D3.js in Data Visualization

D3.js in Data Visualization

Introduction

This blog covers some basic information about Big data, the need for Data visualization in Big Data using the D3.js tool, and a small demonstration using D3.js. D3 is a general purpose visualization library that deals with the transformation of data into information, documents and elements and ultimately helps in creating data visualization.

Use Case

The need for data visualization:

‘A picture is worth 1000 words’
In this use case we are going to discuss how we are going to make use of Data visualization in order to make sense of all the information efficiently to arrive at good decisions.

What is D3.js?

  • Data-Driven Documents

From the official D3.js website, D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM(document object model) manipulation.

What we need to do?

  • Prerequisites
  • Pie Chart creation using D3.js

Solution

Prerequisites

D3.js Data visualization setup

In order to understand the below process, a basic knowledge of HTML, SVG, CSS and JavaScript is required, without which we’ll not be able to implement the data visualization techniques.The setup initialization of D3.js is quite simple.

Step 1: HTML Setup

First, create a new empty HTML file, in the favorite text editor, and save it in a folder location.

Basic HTML structure:

Step 2: D3.js Setup

Download the D3.js JavaScript file from this link – http://d3js.org/ or, we can also use the direct CDN link in our project.

Refer to this JavaScript library file to the head of the HTML file.

Now we have added D3.js in our project.

Open the console window in the favorite browser and check whether D3 is installed or not, using the below code:

Creating a Pie Chart using D3.js

Now that we are familiar with the initial Set Up process, we first follow the above set of instructions and perform the initial set up, before we go ahead and create the pie chart using DR.js.

Step 1: Create one JS file and refer it above the closing body tag.

Step 2: In the pie_chart.js file, set the initial variables.

The variables “r” refers to the radius, “w” refers to the width, and “h” refers to the height values.

The information in this array is used to create the pie chart.
(Note: D3.js data support)

Step 3: To Append an SVG element inside the HTML body tag, we use the below script; we use the variable “canvas” for the “svg” element.

Step 4: We have created the group element (“g”) inside the “svg” tag using the below code:

Step 5: We have created the arc path generator, with innerRadius and outerRadius as the attributes of arc.

Step 6: The pie layout has been created as follows:

The value attribute fetches the data from the array.

Step 7: Bind the data into document

Step 8: Here we have selected the arcs group element and appended the path into the arcs:

The “d” data attribute fetches the data from arc path generator.
When we run the HTML in the browser, we can see the pie chart without any color.

pie chart without any color

Step 9: Adding colors

Creation of an ordinal color scale for different data indication:

Then fill the color on the path by using the below code:

Now the arc path gets filled with different range of colors.

Step 10: Adding labels

By using the below code, we can append the data values to the text attribute. Using the transform and text-anchor attribute we have positioned the label in the center of the arc.

Final Output:

different range of colors

Represent the Pie chart as a Donut chart

Step 11: By using a simple technique we can change the pie chart into Donut chart.

The innerRadius has been modified as follows:

Output:

pie chart into donut chart

Conclusion

Data visualizations work on the web and will make sense only when we look at it.In today’s digital world, the best place to put them up and to see them is on the internet, in our browser.

D3 has right set of tools that makes the connection between data and graphics easy.

References

4967 Views 3 Views Today