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
Draw a donut chart of (`outerRadius=150`) and (`innerRadius=50`) for given data using the concept of a pie chart. Use the `d3.arc()` and `d3.pie` APIs to draw the donut chart.

## Given data
```
var margin = {top: 20, right: 20, bottom: 60, left: 80},
     width = 500 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
var data = [
  {language:  "Python", value: 30},
  {language:  "Java", value: 20},
  {language:  "C/C++", value: 15},
  {language:  "Javascript", value: 35},
  {language:  "PHP", value: 15},
];
colors=["#00A5E3","#FF96C5","#00CDAC","#FFA23A","#74737A"]
```
 


# Problem statement
Draw a donut chart of (`outerRadius=150`) and (`innerRadius=50`) for given data using the concept of a pie chart. Use the `d3.arc()` and `d3.pie` APIs to draw the donut chart.

# Given data
```
var margin = {top: 20, right: 20, bottom: 60, left: 80},
     width = 500 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
var data = [
  {language:  "Python", value: 30},
  {language:  "Java", value: 20},
  {language:  "C/C++", value: 15},
  {language:  "Javascript", value: 35},
  {language:  "PHP", value: 15},
];
colors=["#00A5E3","#FF96C5","#00CDAC","#FFA23A","#74737A"]
```
 


Can you draw a donut chart using the concept of the pie chart? A solution is placed in the "solution" section to help you, but we would suggest you try to solve it on your own first.

Introduction

D3.js Fundamentals

Scales

Drawing Basic Shapes

Chart Fundamentals

Network Visualization, Hierarchical Data, and Interactivity

Conclusion

Challenge: Draw a Donut Chart

Problem statement

Given data