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

## Problem statement
The tasks in this challenge are as follows:
- Draw a canvas of size 500 x 500.
- Draw a circle of radius (r=50) with the origin at (250,50).
- The circle should transition to the bottom of the canvas and stop there.
- The circle should change its color from black to green when it touches the base of the SVG canvas.
- The transition time between the falling of the circle and the changing of the color when it touches the base should be `3000` ms. 
## Expected output


The output of your code should look like this:

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 center align svg in the output tab

svg.append("circle") //Drawing circle
   .attr("cx", 250)
   .attr("cy", 50)
   .attr("r", 50)
   .attr("fill", "black")
   .transition() // line 13 and 14 will be explain in detail in next lesson
   .duration(3000)
   .attr("transform","translate(0,400)")
   .transition() // line 13 and 14 will be explain in detail in next lesson
   .duration(3000)
   .attr("fill", "green")

codemirror

## Coding exercise
The problem is designed to check your understanding, so you are encouraged to solve it on your own. If you are completely stuck then refer to the next lesson which will explain the solution in detail.

# Problem statement
The tasks in this challenge are as follows:
- Draw a canvas of size 500 x 500.
- Draw a circle of radius (r=50) with the origin at (250,50).
- The circle should transition to the bottom of the canvas and stop there.
- The circle should change its color from black to green when it touches the base of the SVG canvas.
- The transition time between the falling of the circle and the changing of the color when it touches the base should be `3000` ms. 
# Expected output


# Coding exercise
The problem is designed to check your understanding, so you are encouraged to solve it on your own. If you are completely stuck then refer to the next lesson which will explain the solution in detail.

Can you make a circle that will change color when it touches the base of the SVG canvas?

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Challenge: Falling Circle

Problem statement

Expected output

Coding exercise