So I needed an excuse to try D3js and therefore I decided to try to visualize the results of the two past elections (2007, 2009) of the Italian Democratic Party. I’ve collected the results in this page, and the code is on github.
Now let’s go into the technical bit. D3js is a javascript library which makes very easy to visualize and transform data, leaning on the svg standard. Instead of offering a ready-made graph where you just call plot(x,y) and you’re done, with D3js you’ve got to write every little bit of it. A declarative approach is used and every-single bit displayed needs to be written. However D3js offers vey well-though methods to definy scales and data transformation, which do most of the heavy lifting.
With great power comes great responsibilities (– Spiderman 2009)
Writing Javascript is not fun, but Coffeescript, so I used it. D3js is quite steep, however if you already got the DOM, CSS and Jquery chaining approach to methods under the belt, than you have a chance. Otherwise desists 🙂
Some resources I found very helpful:
- the tutorial: d3 for mere mortals is very good: http://www.recursion.org/d3-for-mere-mortals/
- this HTML5 presentation: http://lws.node3.org/#landing-slide
- This site, which explain everything in detail: http://www.dashingd3js.com/
It’s not that bad, and I think the steepness of D3js is like LaTeX, quite tricky at the beginning, in favour of very nice and professional results in the long run.
So yeah, you can read and have a look at my first step at http://michelemattioni.me/evolution-primarie-pd/
Edit 1: Added a new D3Js tutorial