Visualizing data in JavaScript with D3.js and dimple

Okay, so here’s another article about data visualization(also my first article on Medium). Well, its kind of because its such an important topic(and also because I have nothing else to write about :p )

So, why data visualization and why D3.js? If you are reading this, then probably you know why data visualization is important, so you may skip the next couple of lines. Now, imagine you got a hell of a amount of data, like really really lot, and you gotta figure out a model to analyze that. You look at the data, you get confused, you leave your job, you loose will to live… to avoid that you need to see or visualize the data in a more understandable form, like charts, graphs and even maps. And that’s where data visualization comes in.

But for this, you need to code up something to do it, and for that you need libraries, and D3.js is a library that does it in JavaScript. JS is not that popular in data science, but its the language of the web and visualizations are truly presentable and portable in this media. Also, many a times we need to create data driven interfaces such as dashboards.

D3.js is a JavaScript library for manipulating documents based on data.

But the, why dimple? Because it wraps up D3.js into something very simple for data visualizations. It does the heavy lifting for you with svg, animations and stuff.

The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive. It also exposes the d3 objects so you can pick them up and run to create some really cool stuff.

Okay, lets dive in

Alright, time to get the hands dirty… we will pick up a dataset, and use simple dimple plots to visualize it. Today we are gonna use the 2016 Olympics in Rio de Janeiro dataset from Kaggle Datasets.

Now, we need a webpage… lets create a HTML file named rio.html and in the head tag, attach the necessary scripts.

<script src="http://d3js.org/d3.v3.min.js"></script><script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>

Okay, lets have a div, with id “chartContainer”, as a placeholder to show the chart.

<div id="chartContainer">...</div>

In the place of … we are gonna have our script, to load the data and draw the chart.

First, we are gonna create a bar graph to visualize the distribution of gold medals among various nations in different sports. Different nationalities will be shown with different colours. And, believe me, we will do all of it with under 10 lines of JavaScript code.

Hell yeah, we will!

So, have a look at the code.

Lets get a grasp of what I wrote.

First, I created a SVG for the div to show the chart. The dimple.newSvg function takes string as the first argument, which is a selector string(same as CSS selector strings) to select the placeholder html tag to show the chart. We used “#chartContainer” to point to our div with id “chartContainer”. The other arguments specify the dimensions.

Next, we load up our .csv file with the data, the d3.csv function takes two arguments, the first one is the path to the .csv file and the second one is a function to be called when the data finishes loading, this function must accept one argument containing the data fetched from the csv file.

Then we create a dimple.chart instance, passing the svg instance and the data we fetched to its constructor, we will use this chart instance to visualize the data.

Then we add up the axes, x axis for the sports, using addCategoryAxis and y axis for the no. of gold medals won using addMeasureAxis. CategoryAxis is added when we have discrete categories or classes and MeasureAxis, when we have a numerical value. There are more types of axes, which you can find in the documentation(link at the end).

Then we are gonna add a series, which sets the chart’s series property,which connects the two axes together and renders the chart. Here, our series would be “nationality”. We also mention the type of plot we need for the series, so we pass dimple.plot.bar as we need a bar graph. You can add multiple series with different graph plots.

We can have different types of plots, like dimple.plot.area, dimple.plot.bubble and dimple.plot.line, go ahead, try all of these.

Finally, we call the draw() function of the chart instance to display the graph.

Open the directory where you have the .csv and the HTML file,and fire up a simple HTTP server using python’s http.server module.(Using Python3.5 here)

python -m http.server

Then go to localhost:8000/rio.html in your browser.

Here’s what it renders.

Hovering your pointer on the parts of the graph, shows you the nationality it represents.

The graph gives us a glance on the performance of the nations in different sports, for example, look at the amazing performance of USA in basketball, or China in Table Tennis.

Yes, and we can do all these with such less work.

So, guys tinker more with the library, try all the kinds of charts, and use data from various sources.

Further Learning

1. Dimple documentation.
2. D3 documentation.
3. Dimple examples.
4. This awesome YouTube video by Siraj Raval.

People, this is my first Medium article, excuse me for little faults. If u have any questions please hit up the comments, also if you have done something amazing with D3 or dimple, leave the link. Please share and support me ;)

_Click to see my Youtube programming channel for more!!_🤓🤓 I need your love there

Bye for now.