Before I go further, let me give you a link to the source for this blog post available on Github
When we talk about doing charts, post people will think about Excel.
Excel do provide some very rich charting but the problem is that you need a licence for Excel. Second, you need to share a file that often have over 30Mb of data to display a simple chart about your monthly sales or what not.
While it is a good way to explore your data, once you know what you want… you want to be able to share it easily. Then you use the first tool available to a Microsoft developer… SSRS.
So let’s start with d3js.
However… it’s extremely low level. You will have to create your axis, your popup, your hover, your maps and what not.
But since it’s only a building block, other libraries exist that leverage d3js…
Dimple is a super simple charting library built on top of d3js. It’s what we’re going to use for this demo. But we need data…
Let’s start with a simple data set.
Original data can be found here: http://www.statcrunch.com/app/index.php?dataid=418469
I’m going to just copy this into Excel (Google Spreadsheets) to clean the data a bit. We’ll remove all the “Country of ”, which will only pollute our data, as well as the Bins which could be dynamic but are otherwise useless.
First step will be to start a simple MVC project so that we can leverage basic MVC minimizing, layouts and what not.
In our _Layout.cshtml, we’ll add the following thing to the “head”:
This will allow us to start charting almost right away!
Here’s some code that will take a CSV that is on disk or generated by an API and parse it as an object.
This code is super simple and will display something along those lines:
Wow. So we are almost ready to go?
As mentioned before, Dimple is a super simple tool to create chart. Let’s see how far we can go with the least amount of code.
Let’s add the following to our “success” handler:
var chart = new dimple.chart(svg, csv);
Once we refresh the page, it creates this:
Okay… not super pretty, lots of crappy data but… wow. We already have a minimum viable data source. To help us see it better… let’s clean the CSV file. We’ll remove all countries that didn’t win medals.
For our data set, that means from row 28 (Albania).
And that’s it. We now have a super basic bar graph.
Do not use d3.js as a standalone way of creating graphs. You will find it harder than it needs to be.
If you want to know more about charting, please let me know on Twitter: @MaximRouiller