#d3 visualization

D3 Is Taking Over & Here’s What Your Data Analytics And Visualization Is Missing

D3.js, short for Data-Driven Documents, is a sophisticated JavaScript library that empowers developers to animate data with life through HTML, SVG, and CSS. D3 enables the creation of stunning visuals from basic bar graphs to intricate interactive maps, transforming raw data into visual narratives.

Introduction to D3.js {Part -3}

The charts are more meaningful when they have axes around them. The axes tell the quantity of a particular datum represented on the plane. This a how-to-post to create the axes around a D3 chart.

D3 provides .json()method to load the JSON data from a URL. This method takes two parameters – first, a URL that returns a JSON data and second, an anonymous method that takes action on the data coming…

How do I make this damn statement of purpose sound good, so the committee chooses me? How do I package what I’ve done and sell it, so it’s better than any potential competition? It’s a thinker. 

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).