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

var svg = d3.select("body") //Create Svg element
   .append("svg")
   .attr("height",500)
   .attr("width", 500)
   .style("border", "solid 8px red")
   .attr("transform","translate(200,0)"); // To align svg at the center in the output tab.

svg.append("circle") //Drawing circle
   .attr("cx", 250)
   .attr("cy", 50)
   .attr("r", 50)
   .attr("fill", "black")
   .transition()
   .duration(3000)
   .attr("transform","translate(0,400)")
   .transition() 
   .duration(3000)
   .attr("fill", "green")

codemirror

## Explanation
See the following explanation to better understand the above code.
- From **line 1** to **line 5**, we have created an SVG canvas of size (500x500) with a red border. 
- In **line 7** to **line 11**, we have created a circle of radius (r=50), and the center of the circle at (250,50) relative to the origin.
- In **line 14**, we have moved the circle to the bottom of the canvas using `translate`. The `transition` function with a duration of `3000ms` is used in **line 12** and **line 13** to make the translation of the circle smooth. 
- After moving the circle to the bottom of the SVG canvas, we have to change the `color` of the circle using the `attr` function. The `transition` function with the duration of `3000ms` is used to make the change of the color smooth.  

# Explanation
See the following explanation to better understand the above code.
- From **line 1** to **line 5**, we have created an SVG canvas of size (500x500) with a red border. 
- In **line 7** to **line 11**, we have created a circle of radius (r=50), and the center of the circle at (250,50) relative to the origin.
- In **line 14**, we have moved the circle to the bottom of the canvas using `translate`. The `transition` function with a duration of `3000ms` is used in **line 12** and **line 13** to make the translation of the circle smooth. 
- After moving the circle to the bottom of the SVG canvas, we have to change the `color` of the circle using the `attr` function. The `transition` function with the duration of `3000ms` is used to make the change of the color smooth.  

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Solution Review: Falling Circle

Solution

Explanation