Let set the expectation clear here, this is pragmatic overview for D3, target for the audience which never knew d3 before. If you like to get in depth of data visualization with d3, I would suggest Scott Murray website, great place to start.
List of other related articles
- What is Data Visualization
- What we did with D3
This how Wikipedia defines it,
In order to understand what d3 is, I would rather first explain what it not to bring to clear picture in front of all
What it not?
- It not just a charting library (though you can make charts with it)
- It not just a map library (though you can make map with it)
- It not a compatibility layer (It doesn’t work on all the bad browser)
- It not an SVG abstraction layer (It doesn’t have its own way of making a line or a circle. it makes you deal with svg elements as svg elements. plus, you can deal with HTML elements and Canvas elements)
What is it?
- D3 converts your data to document. That what’s is name states ‘data-driven-document’
- It a general purpose visualization library, which help us to make charts, graphs and all other type of visualization to represent data.
But, note d3 doesn’t come with any prebuilt visualization. There is no d3.barchart. It just low level visualization library
- It have certain API’s to make awesome visualization (circles, rectangles, polygons, etc) with data
- It under BSD license, and is open source with code on GitHub. Hence, you can use it for free
Show me how it looks
Here, a lot awesome examples at https://github.com/mbostock/d3/wiki/Gallery. I have taken the screen shot of just few. I recommended to explorer and other examples on this page to understand the ability of d3.js. People have made plugin out of d3 which make lives, with multiple forms.
What d3 does?
How it works?
Now, let’s get to the bare metal, here is a code example to demonstrate how d3 works
var dataset = [ 5, 10, 15, 20, 25 ];
.data(dataset) //Binding it to the dataset
.enter() //For every data which exists in biding,
//but do not see an element
.append(“div”) //append an element
.attr(“class”, “bar”); //and apply the css class ‘bar’
This would result in something like this
I have taken this example from the Scott Murray website, which host the excellent tutorial to learn d3.
What else D3 do?
As mention earlier, d3 is simple low level data visualization library. It has tons of API’s which allow you to select elements, create SVG objects, style them, or add transitions, dynamic effects to it or tooltips to them. Going to each of it would be cumbersome and outstretched for this post. But, by and large API are classified under the big bucket as below
If you want to explore yourself, you can see the entire list at https://github.com/mbostock/d3/wiki/API-Reference#d3layout-layouts
Else, you can alternative get on http://devdocs.io/d3/#d3layout-layouts
Where do I go from here?
There are several places, to get hands dirty with d3. First place would be D3 website itself. Checkout the examples, and check out which you like the best. Most of the example would be hosted on https://gist.github.com. Gists are a great way to share your work. You can share single files, parts of files, or full applications. Mike Bostock, one of the creators of d3 has developed great different visualization and host on http://bl.ocks.org/, which is the simple viewer for code examples hosted on GitHub Gist. Didn’t make sense, read the sentence again.
Note: Warning, learning D3 involves steep learning curve, and but one you learn it, you never needs any other visualization library, it so powerful.
Pick, on your favourite visualization and download the code. Try to make sense of it (best of luck). Able to understand bit of it, give d3 a try, else, forget it.
Another way is to use the visualization as it is, without customizing look and feel. Just play with your data in json and voila, chart renders your data.
Reader feedback is important to me, please add the comments in the below section. If you think, I need to improve on any of the topics, and there something, which I didn’t know, do let me know. World is large, world is exploratory. Share your knowledge, illuminate other minds.