Hello Friends!!
This post is dedicated to D3.js, which I came across a few months back.
Prior to that, I always preferred Google Charts which catered to most of my charting needs. However, since I switched to D3.js I could not find a good reason to move back to Google Chart.
If we take a very crude analogy, D3.js would be analogous to an Ubuntu of the OS world, while Google Charts could easily be a Windows 7(just that both of them are free in this case); in the sense that the control and the power the user(in our case the developer) gets from D3.js while working with it, is unmatchable.
While Google Charts is simply too cool and simple for a free charting tool, but D3.js is a library which lets you create any chart that you could think and conceptualize, with so much of ease, and it lets you link any kind of interaction/control that you would want to put on events, on any of the elements of the chart.
D3.js, like RaphaelJS and PaperJS is a library which is developed to manipulate the DOM based on the structured data you have. Only it covers a little wider set of elements and features than the latter two (although the latter two provide out-of-the-box animation, which in some cases could be the deciding factor though).
Just check this simple example, and see how easily a bar chart can be created with D3.js.
(Assuming that the page has a div with id chartDiv and that the d3.js is included on the page).
var data = [1,2,3,4,5,6,7,8,9,10]; //lets create some random data
//simply create the chart with these few lines
var divs = d3.select("#chartDiv")
.selectAll("div")//select all the divs(which are not yet created)
.data(data)//read the data
.enter()//run through each data object
.append("div")//and finally append the divs we selected previously
.style("width", function(d) { return (d*20)+"px"; })
.style({'cursor': 'pointer', 'background-color' :'lightblue','margin':'2px'})//some styling
.text(function(d) { return d; });//the text inside the div
That's all you need to code to generate the below chart -
Isn't it so simple, yet powerful.
One could easily link events to it by doing something like this -
divs.on('click', function (data, index) {alert(data +', '+ index)});
See, how easily we could link a event to each bar div. Isn't it awesome!!
Now the next step for you is to visit D3.js and check the rich documentation, browse through the code of the tons of example provided, and dive into the awesome world of D3.js.
Although it will take a little practice and some learning to get a knack of it, but eventually you will fall in love with it.
Happy charting :)
Sandeep
P.S. - Don't forget to check my Visualization app powered by D3.js
This post is dedicated to D3.js, which I came across a few months back.
Prior to that, I always preferred Google Charts which catered to most of my charting needs. However, since I switched to D3.js I could not find a good reason to move back to Google Chart.
If we take a very crude analogy, D3.js would be analogous to an Ubuntu of the OS world, while Google Charts could easily be a Windows 7(just that both of them are free in this case); in the sense that the control and the power the user(in our case the developer) gets from D3.js while working with it, is unmatchable.
While Google Charts is simply too cool and simple for a free charting tool, but D3.js is a library which lets you create any chart that you could think and conceptualize, with so much of ease, and it lets you link any kind of interaction/control that you would want to put on events, on any of the elements of the chart.
D3.js, like RaphaelJS and PaperJS is a library which is developed to manipulate the DOM based on the structured data you have. Only it covers a little wider set of elements and features than the latter two (although the latter two provide out-of-the-box animation, which in some cases could be the deciding factor though).
Just check this simple example, and see how easily a bar chart can be created with D3.js.
(Assuming that the page has a div with id chartDiv and that the d3.js is included on the page).
var data = [1,2,3,4,5,6,7,8,9,10]; //lets create some random data
//simply create the chart with these few lines
var divs = d3.select("#chartDiv")
.selectAll("div")//select all the divs(which are not yet created)
.data(data)//read the data
.enter()//run through each data object
.append("div")//and finally append the divs we selected previously
.style("width", function(d) { return (d*20)+"px"; })
.style({'cursor': 'pointer', 'background-color' :'lightblue','margin':'2px'})//some styling
.text(function(d) { return d; });//the text inside the div
That's all you need to code to generate the below chart -
One could easily link events to it by doing something like this -
divs.on('click', function (data, index) {alert(data +', '+ index)});
See, how easily we could link a event to each bar div. Isn't it awesome!!
Now the next step for you is to visit D3.js and check the rich documentation, browse through the code of the tons of example provided, and dive into the awesome world of D3.js.
Although it will take a little practice and some learning to get a knack of it, but eventually you will fall in love with it.
Happy charting :)
Sandeep
P.S. - Don't forget to check my Visualization app powered by D3.js
Comments