D3JS - jQuery of Visualization world In today's world with growing HTML5 UI in almost every product we are starting, Visualization becomes a core part of the Product.
While there are many charting and visualization solutions out there, the choice for us an Engineering Partners is to choose one solution which has all the necessary building blocks to accomplish anything.
For Synerzip I recommend D3JS as the data visualization Framework
- D3JS stands for Data Driven Document and not a charting solution
- If any charts are not supported by D3JS or its eco system, building one is a breeze
- D3JS can create charts using regular DOM elements or SVG etc
As a HTML5 Practice is becoming more and more important in Synerzip, I recommend everyone to pickup D3JS
Training Material
- Introduction to D3JS Video - http://vimeo.com/35005701#
- Youtube Playlist for Learning D3JS - http://www.youtube.com/playlist?list=PL6il2r9i3BqH9PmbOf5wA5E1wOG3FT22p
- Tutorial Site for D3 JS - http://www.dashingd3js.com/table-of-contents
Here is an example of a Back to Back Bar Chart I created using D3 Charts
[singlepic id=42 w=320 h=240 float=]
Here is the code for the same
var dataset = [ { "name":"Ford-150", "acceleration":50, "economy":17 }, { "name":"Chevy-Avalanche", "acceleration":70, "economy":15 }, { "name":"Toyota-Tundra", "acceleration":60, "economy":22 }, { "name":"Honda Pilot", "acceleration":79, "economy":2 }, { "name":"Ford-250", "acceleration":40, "economy":15 }] var bodySelection = d3.select("body");
var w = 500; var h = 100;
var svg = bodySelection.append("svg") .attr("width",200) .attr("height", 120);
svg.selectAll("rect.acceleration") .data(dataset) .enter() .append("rect") .attr("x", 100) .attr("y", function(d, i) { return i * 21; }) .attr("width", function(d) { return d.acceleration; }) .attr("height", 20) .attr("fill", "red");
svg.selectAll("rect.economy") .data(dataset) .enter() .append("rect") .attr("x", 0) .attr("y", function(d, i) { return i * 21; }) .attr("width", function(d) { return d.economy; }) .attr("height", 20) .attr("transform", "translate(95,0),scale(-1,1)") .attr("fill", "teal")
svg.selectAll("text.car") .data(dataset) .enter() .append("text") .attr("x", 0) .attr("y", function(d, i) { return 10+i * 21; }) .attr("height", 20) .text(function(d,i){ return d.name }) .attr("font-family", "sans-serif") .attr("font-size", "8px")
