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 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
Now, we need a webpage… lets create a HTML file named rio.html and in the head tag, attach the necessary scripts.
Okay, lets have a div, with id “chartContainer”, as a placeholder to show the chart.
In the place of … we are gonna have our script, to load the data and draw the chart.
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.
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.
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 ;)
Bye for now.