Toward the end of 2013 we organized a Hackday around D3.js.
I had heard about D3.js for some time before that and always found the produced graphics to be really good looking and attractive. It also interested me to see how some people could use this library to createa some really innovative graphics presenting data. One just need to have a look at the gallery page on D3.js website to get convince that almost any kind of data representation can be done with this tool.
D3.js relies on standard, it is based on SVG, which is supported by every recent browsers. The nice thing about being based on SVG and not on the Canvas API is that all the graphicals elements you are creating can be found in the DOM of your web page. You can for example use your inspection tool to see how there are organized, how they nest and why you are getting something that you were not expecting to get. This is a compelling advantage compared to the Canvas where you cannot access or view in anyway the content that has been created in it.
As I was completely new to D3.js and to any kind similar graphical toolkit (like Raphael.js or processing.js) I had to start from the lowest level possible. In doing so I found a great help in using the book “Interactive Data Visualization for the Web” from Scott Murray. I was able to follow through the fist chapters and produce some very simple graphics along the way. If you are like me, completely new to this kind of thing, I found that letting yourselg being guided by a book with some practical examples is the best way to get some results fast (even though you won't impress anyone with your production beside yourself).
There are some useful concepts to be learn when you start using D3.js. Those important topics are: data binding, scales, axis, animation and interaction.
Data Binding
Data binding is simply the fact of acquiring data and to bind them to graphical element that will represent these data in some fashion. Loading data in D3.js is rather simple, just one function call away. D3.js is able to load CSV data and JSON data. The easiest thing you can do to start is to have a very simple CSV file that you will have written yourself and to make it available through your webserver. Once the data is loaded you simply have to tell under which element you want have the data representation to take place.
Scale
Scale is concept by which you will map your raw data to some representation value. For example in a graphics showing population evolution other the last 50 years you might want to scale your data so that every 50 pixels represents one million people. Scales are function that map from an input domain to an output range. This is equal to say that it goes from your domain values (million of people) to your screen values (pixel). D3.js offer many different kind of scale: linear (as in the previous example), ordinal, logarithmic, square root and so on. There is a host of options configure your scale in order to make your values and their representation look nicer.
Axis
Somehow related to the concept of scale is the concept of Axis. This is rather simple as most of us have being using this concept back at school when we were drawing any kind of graphics in our math class. These correspond to the x and y axis. Here again many parameters are available to configure your axis: how you'd like the tick to look like and how much space should be separating them, what should be the label going under or beside those axis.
The remaining
Unfortunately for me I didn't have time to go further and to investigate on the animation and interaction possibilities offer by D3.js. Another area of great interest for me is the geomapping you can do with it. Geomapping is now rather common on the web, but I can't help being impress everytime I see one of those nice map, with beautiful colors explaining some factual data. There is so much a nice data representation can communicate and help you understand, that even thousands of words couldn't. It is also important at this point to mention that D3.js is not a tool to use to analyss or explore your data, it is a tool to be used after having done this prelimary work and when you are ready to communicate your findings in a graphical way. The possibility to animate or provide some interaction to your user will help you to get your point across by letting the viewer interact in a playful maner with the results you are presenting to them.
Conclusion
Although one day is rather short considering the quantity of information you have to know before starting to produce some really stunning graphical presentation I was really happy to play with D3.js. Sure enough my productions of that day are not to be compared with anything you can find on D3.js website but it is rather satisfying to see something appearing on the screen after just a couple of hours using the library. It really had me wanting to do more of this kind of thing in the future, maybe for another Hackday.