I’ve recently been playing with D3.js, mainly for my side-project, SoMePolis, which investigates social media usage by Swiss MPs.
D3.js (D3: data-driven documents) is a Javascript library for creating complex, static or animated/interactive web graphics using HTML, SVG and CSS. The main site has a short tutorial and lots of example implementations. A well-known solid introduction to D3.js is the one by Scott Murray from alignedleft.com. Small tutorials also come from Mike Bostocks (developer of D3.js), Jan Willem Tulp and Christophe Viau.
D3.js is not exactly easy to use to build something from scratch, especially if you are not that experienced a Javascript developer. But it’s easily understandable enough to take an existing visualization and tweak it to fit your purpose. Guess what? That’s exactly what I did.
Our first infographic (German, but English-speakers should still be fine looking at it; find the French version here) details the membership of tweeting MPs to a range of classes in the dimensions “political party”, “sex”, “chamber”, “status in parliament”, “age” and “year of account creation”.
The visualization, called Par(allel)Sets, thus allows you to explore a six-dimensional attribute space with relative ease. All the dimensions can be (vertically) re-ordered using drag-and-drop.
Similarly, the classes on each dimension can be (horizontally) re-ordered using either drag-and-drop, alphabetic sorting or sorting according to class size (in terms of number of politicians in each class). The latter two support ascending and descending sorting.
Distilling insight from the graphic is facilitated by informative captions that show when you hover over a class or a portion of the coloured bands.
The adaptation of the D3.js code was actually not as much work as making the graphic in an iframe work seamlessly within our WordPress template and compiling a concise introduction video using in-browser screencasting tool Screenr (thumbs up!) and YouTube annotations (thumbs down).