Gain insights into D3.js fundamentals, explore DOM manipulation, data binding, and SVG. Learn about creating maps, graphs, and network visualizations to master data-driven documentation.

Introduction to Visualization Using D3.js.png

In this course, you will learn the fundamentals of D3.js (stands for Data-Driven Documents), which is a JavaScript library mainly used for visualization.

In the first half of the course, you will cover DOM (Document Object Model) manipulation, method chaining, data binding, and data loading.

In the second half, you’ll cover visualization concepts and dive deep into SVG which is used to draw different geometrical shapes. After that, you’ll work with various maps and graphs in order to display your data. Lastly, you’ll learn about network visualization with the help of nodes and links.

By the end of this course, you will have a new, powerful data visualization library at your disposal.

Introduction to Visualization Using D3.js

# Introduction
Data joining is a fundamental concept in D3.js, and it allows us to bind the data of an array with each element, HTML or SVG (we will cover it in the next chapter) *selection*. 

It binds data with *selection* elements and makes the manipulation of elements based on data much easier. We will use data binding throughout the course to draw different visualizations. 

There are two methods that are used to bind data to a D3 *selection* which are explained below:

## datum()
Let's explore the first method.
The `datum()` method joins data points with a single D3 *selection*. See the following example for a better understanding.




d3.select("body")
  .select("p")
  .datum(["10"])
  .text(function(d) { return d; });

codemirror

In the above example, we want to bind the data element with the HTML tag. In **line 1**, we select the `p` tag using the `select()` method. Then, in **line 3**, the `datum()` method is used to bind `10` with the `p` tag. In **line 4**, `text()` is used to return the data associated with the `p` tag. 

What will happen if we want to associate multiple data points with selections in one go? To answer this question, let's take a look at another data binding method, i.e., `data()`.   

## Data()
If we want to associate a set of data points with a set of D3 selections then we will use the `data()` method. To better understand how this works, let’s take a look at the following example.

d3.select("body").selectAll("p")
   .data([10, 20, 30])
   .text(function(d) { return d; });

In this example, we have three data points and we are combining them with multiple D3 *selections*, in this case, three `p` tags. Multiple data joins are done with help of the `data()` method in **line 2**.  

What will happen if the number of data points in the array is greater than the number of D3 selection elements? That's where we will use the `enter()` method.  

# enter() 
The `enter()` method is used when the number of elements in D3 *selection* is less than the number of elements in the data array. See the following example to understand the working of the `enter()` method. 
 
  

d3.select("body").selectAll("p")
   .data([10, 20, 30, 50, 70])
   .text(function(d) { return d; })
   .enter()
   .append("p")
   .text(function(d) { return d; });

In the above example, we have three D3 *selections* that are `p` tags, as we can see in the HTML file, and five data elements in the array. To create new `p` tag elements and bind every data element with the *selection* element, we used the `enter()` method in **line 4**.

In **line 5**, we append a new `p` tag for every missing data element using the `append()` method. 

Learn about data joins and the methods used for data joining.

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Data Joins/Binding