Data Visualization using d3.js

Platform

For visualization of data using d3.js we use Observablehq, a notebook which allows us to write javascript code without having to write html and it's inbuilt functions help in exploiting the d3.js library with ease and create interactive, animated graphs to visualize the data.

The tutorials on the website are also used as reference for the below visualization.

Data

The data-set being used is of crime in India from 2001 - 2014, it is the same data-set which is used for tableau. Its data description is given on the home page.

Code

The code for the visualization is available at Observable HQ The entire code is also uploaded in the github repository in the folder Assignment 2. The main components of the javascript code are embedded below (Note: This only shows the output of the main code components, the enitre code is available in the notebook link above):

Inference

The output of visualization using d3.js is given below:

The visualization is a racing bar-chart created using d3 where we have number of crimes on the x axis, each of the bar has the name of the state and the total crimes in each state (displaying only top 12) in a particular year. There is also a time stamp at the bottom which display's the year. The length of bars is according to the number of crimes. The replay button can be used to see the animation again.

References