So my curiosity for the D3 visualization library has led me to attend a meet-up put on by the Bay Area D3 User group called “Visualizing Gun Violence”. It came at a good time, as I have begun working with D3 recently, and it helped me learn more about the D3 world. One of the hosts of the event, Curran Kelleher (@currankelleher), sat down and talked to me about a visualization he was working on during the meet-up. I ended up asking him a bunch of questions about D3, which gave me some very insightful answers. Here is what I learned:
Part of the reason that developers like to geek out about D3 is that it “gives them a window into a world that no one else can.” D3 geeks are part of a big community that feels this way. But where did all of this visualization enthusiasm come from? Some believe that it was spearheaded by a French book written by Jacques Bertin almost half a century ago, called Semiology of Graphics. A lot of the enthusiasm was kept alive by conferences put on by the IEEE VIS community over the years. Mike Bostock, one of the key developers of D3.js, was definitely involved with these, and has been called a “digital superstar” by the New York Times recently. He has tons of great examples on the web of just what D3 can do, so be sure to check them out.
If you want to cut to the chase, I suggest you start with an introductory D3 video here:
https://www.youtube.com/watch?v=8jvoTV54nXw
For me, what makes D3 so awesome is that it has tons of publicly available examples on the web. Usually these examples come with source code, which means that you can copy and paste your way into your own great D3 visualization in under an hour. Many D3 examples are shared via GitHub gists. The website bl.ocks.org is a great viewer for these (with great examples from bl.ocks.org/curran used during our event). blockbuilder.org is another really cool new code editor which helps you create and share your D3 visualizations.
And so eventually, I started working with D3 myself. At first I tried using libraries built on top of D3 such as Dimple; which got me far quickly, but made more long-term development prone to roadblocks. You see D3 is an abstraction of drawing geometric figures on the browser, which makes it easier than rendering visualizations from scratch (like drawing everything with HTML5 Canvas); however, the more you abstract something, the harder it becomes to customize it. This was certainly the case in my experiences with D3, and scaling back to “basic” D3 code made it easier to develop more complex solutions. Still, working with SVG elements is harder than the usual CSS/HTML manipulations developers work with. Things are painted on the screen one at a time, as opposed to following the markup layout/rendering rules you might be used to. Add the fact that a lot of the logic deals with math and equations, and all of a sudden developing with D3 is not a piece of cake! (and I didn’t even mention debugging).
But if the complexities of D3 don’t phase you, you will soon realize that with enough practice and poking around, it becomes pretty fun. There are a lot of different combinations to try. One thing you realize right off the bat, is that you have to separate how you prepare the data, from how you visualize it. For example, you can use ‘binning’ to visualize your data, which groups your data points into ranges, perhaps visualized as different colored bins on your graph or chart. D3 makes it easy to actually feed your data in, and it’s up to you what marks and channels you use to project this data to your audience. It really does take a lot of playing around before you develop a sense of expertise with this library. Hopefully you find your inner visualization geek anxiously waiting to visualize stuff ASAP!
