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
After exploring different charts in the previous lesson, let's explore different visualization tools.
There are some types of data that are hard to show through charts. Let's say we have data where we want to represent the connections between different cities. That's where we will use nodes and links to show the network. 

In the above illustration, **nodes** represent the cities, and **links** are used to join these cities.

## Network layout
Before drawing the network, let's explore the basics of a network. To draw a network of nodes and links, we need to know the position of the nodes for the given data. As we needed an [angle generator](https://www.educative.io/pageeditor/10370001/4609988201807872/5109092690427904) to add angle information to the data in the pie chart, we need the positional information to draw the nodes and links of the network. D3.js provides the `d3.forceSimulation()` API to add positional information to nodes. It creates a dynamic simulation in which nodes are organized in an optimal way based on our constraints.

`d3.forceSimulation()` uses forces for positioning different visual elements. Forces can be set up between elements, for example:

- All elements repel one another (`forceManyBody()`)
- Elements are attracted to the center(s) of gravity (`forceCenter()`)


In the following example, we will add positional information to the data with the help of the `d3.forceSimulation()` API.     

var margin = {top: 20, right: 150, bottom: 60, left: 80},
     width = 500 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
var graph={
  "nodes": [
    {"name": "A"},
    {"name": "B"},
    {"name": "C"},
    {"name": "D"},
    {"name": "E"},
  ],
  "links": [
    {"source": "A", "target": "B"},
    {"source": "E", "target": "D"},
    {"source": "C", "target": "E"},
    {"source": "B", "target": "E"},
    {"source": "A", "target": "D"} 
  ]
}
var simulation = d3.forceSimulation(graph.nodes)
                    .force("link",d3.forceLink(graph.links)
                        .id(function(d) {return d.name;}))
                    .force("charge", d3.forceManyBody())
                    .force("center", d3.forceCenter(width / 2, height / 2))
console.log(graph)  

codemirror

console

## Explanation
As shown in the above code:
- In **line 20,** we have given the `nodes` of the `graph` to the `forceSimulation()` which will create an empty simulation with no force.
- In **line 21,** we are creating a `force` using `d3.forceLink()` on the basis of links between different nodes. `d3.forceLink()` receives an input of `links` in which the `source` and `target` nodes are specified. Then we specified the `id` to the `name` which indicates that `source` and `target` are specified on the basis of `name` in the `nodes`. 
- In **line 23** and **line 24**, we have created two forces. `forceManyBody` will balance the `forceLink()` and will repel the nodes from each other and the `forceCenter` force will be used to keep `nodes` at the center of the canvas. 
- Now if we look into the data shown on the `console` we will see the position `x` and `y` for each `node`. And their `vx` and `vy` velocities, which are used in computing the forces, will be shown as well.

>Note: It is necessary to specify `source` and `target` in the data to draw the network. 

# Introduction
After exploring different charts in the previous lesson, let's explore different visualization tools.
There are some types of data that are hard to show through charts. Let's say we have data where we want to represent the connections between different cities. That's where we will use nodes and links to show the network. 

In the above illustration, **nodes** represent the cities, and **links** are used to join these cities.

# Network layout
Before drawing the network, let's explore the basics of a network. To draw a network of nodes and links, we need to know the position of the nodes for the given data. As we needed an [angle generator](https://www.educative.io/pageeditor/10370001/4609988201807872/5109092690427904) to add angle information to the data in the pie chart, we need the positional information to draw the nodes and links of the network. D3.js provides the `d3.forceSimulation()` API to add positional information to nodes. It creates a dynamic simulation in which nodes are organized in an optimal way based on our constraints.

`d3.forceSimulation()` uses forces for positioning different visual elements. Forces can be set up between elements, for example:

- All elements repel one another (`forceManyBody()`)
- Elements are attracted to the center(s) of gravity (`forceCenter()`)


In the following example, we will add positional information to the data with the help of the `d3.forceSimulation()` API.     

# Explanation
As shown in the above code:
- In **line 20,** we have given the `nodes` of the `graph` to the `forceSimulation()` which will create an empty simulation with no force.
- In **line 21,** we are creating a `force` using `d3.forceLink()` on the basis of links between different nodes. `d3.forceLink()` receives an input of `links` in which the `source` and `target` nodes are specified. Then we specified the `id` to the `name` which indicates that `source` and `target` are specified on the basis of `name` in the `nodes`. 
- In **line 23** and **line 24**, we have created two forces. `forceManyBody` will balance the `forceLink()` and will repel the nodes from each other and the `forceCenter` force will be used to keep `nodes` at the center of the canvas. 
- Now if we look into the data shown on the `console` we will see the position `x` and `y` for each `node`. And their `vx` and `vy` velocities, which are used in computing the forces, will be shown as well.

>Note: It is necessary to specify `source` and `target` in the data to draw the network. 

Get yourself familiar with the very important concept of nodes and links.

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Introduction to Nodes and Links

Introduction

Network layout

Explanation