I saw Mark DiMarco speak at AustinJS on D3.js.

If you want to have the visual stimuli of a Rich Internet application in your reporting, without the awful overhead of RIAs, there are a some pretty snazzy charting tools available in the JavaScript space:

• Raphaël
• three
• Highcharts
• Processing
• Protovis

The last of these was made by a Mike Bostock who has gone on to make an even more impressive charting library. On Tuesday night, I saw Mark DiMarco speak (all of the information here comes from him) at AustinJS on D3.js which is Bostock's new charting tool(s). The three Ds in D3 stand for Data-Driven Documents. To get started, Mark suggested that one not start from nothing, but instead browse some of the examples at the D3 web site, take the code for one and then start messing with it. Voronoi Tesselation was one of the examples he showed off. D3 drinks JSON and spits out SVG Scalable Vector Graphics (SVG) which are a feature in any modern browser and even the mildly geriatric IE9. I have not experimented yet with SVG myself, but I learned Tuesday night that one may apply CSS styles to SVG elements just as one may do so with HTML elements. An example Mark gave was:

path {
   fill: #222;
   stroke: #bad;
   stroke-width: 1px;
}

 
 

D3 has its own syntax for DOM manipulation and Mark encouraged the audience to do things the D3 way instead of rolling a mishmash of D3 and jQuery. Examples of the D3 way of doing things are:

• d3.select(".someclass").style("color", "#fa0fa0");
• d3.json("/mydata.json", function(data) { whatever });
• d3.selectAll(".classy").on("click", function() { whatever });
• d3.select("body").selectAll("div")
     .data([4, 8, 15, 16, 23, 42])
     .enter().append("div")
     .text(function(d) { return d; });

 
 

It is really hard to convey how awesome D3 is here in words. The presentation I saw sure relied heavily on actually showing off D3 to win the audience with its wow factor. Why not go to the site and see it in action for yourself?