Data Visualization using D3
This tutorial will give the basics of creating a pie-chart using D3.js. New to D3? No worries. We will give you a brief understanding of D3 too.
So, what is D3?
D3–Data-Driven Documents is a JavaScript library for producing dynamic and interactive data visualizations in web browsers using widely implemented SVG, HTML5, and CSS standards.
JavaScript D3.js library is embedded within an HTML webpage and uses pre-built JavaScript functions to select elements, create SVG objects, style them, or add transitions, dynamic effects. Briefly, it allows you to dynamically manipulate the properties and attributes of your HTML document elements and it can create and manipulate SVG elements as well.
We can easily bind large data set to SVG objects using simple D3.js functions.Pie charts are built using SVG paths. The SVG path is a more advanced shape compared to circles and rectangles, since it uses path commands to create any arbitrary shape we want.
The data can be in various formats, most commonly JSON,CSV geoJSON, but if required, JavaScript functions can be written to read other data formats as well.
For more information on this, you can visit this link D3-intro
Until now, you must have understood what D3 is all about.Here we shall describe how to create a pie chart using D3
As you see in the above figure, a pie chart is composed of multiple arc-like paths, with different fill colours. D3.js provides a helper functions to draw arcs. Arcs are drawn using 4 main parameters: startAngle, endAngle, innerRadius and outerRadius.In case of pie-charts, the innerRadius is zero.
To draw an arc, first add the following SVG element:
Now draw an arc using:
Next, we create a pie element of D3 using:
We now create the path and append it to our SVG element, using .append(“path”); assign data of pie_data and then assign the “arc” to its “d” attribute.To append arcs dynamically based on our data, we select path, bind our data to the selections and append new paths accordingly.
where data is:
Now that you have understood the basics, you can jump right in to the code:
Step 1:
To create a pie chart, we first need the libraries , which will be inside the script tag (script tag which is inside html <head></head> tag):
Next, define a <div id=”pie_chart”> </div> tag.
Step 2:
You must have a sample_data.json file in the directory where your is present.
sample_data.json
Step 3:
Lastly, we define a Script tag. We will write the actual code here to render the pie-chart.
Here’s the output !
