Still, it’s difficult to discuss a specific software library with such a diverse audience, because you want to explain to half the audience how to make something work, while explaining to the other half why it’s important that they understand how it works, and both constituencies are suspicious of the legitimacy of the latter claim. I’m convinced that there are enough faculty, students, alt-ac staff, and so on that such a general introduction is useful, but as you can tell with the title of this post, I have a my own suspicions. I’m also hamstrung by the fact that my interesting interactive material is still unreleased, and relates to the projects I’m currently working on here at Stanford.
Partly, though, that’s a dodge, since I doubt I’m a skilled enough coder to teach a real course on D3. So, while I’m happy to explain the sort of work I’ve done with it, I feel like coders who want to learn D3 should look to a pair of excellent resources: The first is a set of tutorials written by Scott Murray, who had to take a break from writing the tutorials to write an O’Reilly book on web visualization (which I expect will feature D3 prominently). The second is an interactive tutorial written by Vadim Ogievetsky, which demonstrates many of the most interesting features of the library.
The performance issue is still an issue, though, as is compatibility. D3 runs best on Webkit browsers (Chrome and Safari) and not so well on Firefox and not at all on Internet Explorer 8 or earlier. This is because D3 relies on scalable vector graphics (SVG) to render its graphical content, and SVG has only just begun to be supported as of IE9. Technically, you can use D3 to manipulate div elements and color them and thus show working dataviz on IE8, but I think it’s fair to say that D3 is not a suitable solution unless you’re comfortable losing anyone with an older browser.
Vector graphics like SVG are textual expressions of shapes that are displayed by your browser at runtime. They have numerous benefits, not least of which is that they can be styled and interacted with like any other element on a website, and also provide humanists with the pride of knowing that their visual objects are fundamentally textual. So for instance, to draw a circle with D3, one would code:
circle.attr("r", 5).attr("fill", "blue").attr("stroke", "red")
Which is the equivalent of telling the browser in natural language to, “Draw a circle with a radius of 5 [pixels] that’s blue with a red outline.”
Or to represent data using an interactive globe alongside or in place of a traditionally projected world map.
The globe spins, but there’s no way I could place 1000 tiny circles on it like I can on a flat map, so there are trade-offs within the trade-offs. At some point, I’ll actually manage to demo the interactive forms of all of these, and hopefully they’ll have a well-designed interface.