Saturday, August 27, 2011

Tool: d3.js (Data-Driven Documents)


D3.js is javascript library for visualization on websites or for web application. It uses JSON or DOM objects(as any other javascript) as input for generating Visualization. The author of this tool is Mike Bostov. This tool tries just to manipulate data in document object model by exploiting complete capabilities of HTML5 and CSS3.It uses SVG graphics with javascript very efficiently, because of which it can render large datasets with extremely fast with animations and and interactions. It is divided in modules to make web application light by including only required module.



Sample: This is sample code of usage of tool.
var svg = d3.select("#chart")
.append("svg:svg")
.attr("width", 400)
.attr("height", 600)
.attr("class", "PiYG");
svg.selectAll("circle")
.data(vertices.slice(1))
.enter().append("svg:circle")
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2);
Above code is trying to create svg element of visualization.Later on it is drawing circles with properties depending data.


Reference :

0 comments: