This website uses cookies and similar technologies to understand visitors' experiences. By continuing to use this website, you accept our use of cookies and similar technologies,Terms of Use, and Privacy Policy.

Jun 03 2013 - 12:17 PM
Fluent 2013 Session - The ABC of Data Visualization
One of the very interesting sessions at the recent Fluent Conference was the one given by Irene Ros, which was about d3.chart, an upgrade of the powerful charting tool, d3.js. d3.js has proved successful by its efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, and exposing the full capabilities of web standards such as CSS3, HTML5 and SVG. In simpler words, all the chart elements created by d3.js are transparent to users and are directly customizable. Users don't need to learn particular API names to control the charts they draw. Instead, they just use the normal JS or JQuery selector syntaxes to locate their charts and style them up. It also supports dynamic value assigning which means users give a function instead of a static value in configuring a certain chart property. A typical example is like this d3.selectAll("p") .data([4, 8, 15, 16, 23, 42]) .style("font-size", function(d) { return d + "px"; }); From the example we can see that d3 follows JQuery's node concept allows cascade operations on a single element. Once the data is bound to the element, it automatically becomes the argument to the next method if applicable. Going forward from d3.js, people started to desire a better tool that can further meet the four charting requirements:
  1. repeatable, easy to create multiple instances of
  2. configurable, easy to appropriate for a specific task, color, orientation
  3. extensible, easy to extend with additional functionality, inheritance
  4. composable, easy to combine into other charts
And work on these requirements gave birth to d3.chart. With d3.chart, a chart is defined separately from when it's being used. Basically a chart is defined as a class and can be instantiated when needed. Going with object-oriented developing, a d3 chart class can even be extended to sub-charts. Example: chart definition d3.chart("RoundBarChart", { initialize: function() { } }); chart instantiation var chart ="#vis") .append("svg") .chart("RoundBarChart"); Once a chart is initialized, it doesn't actually render until data is passed into it. var data = [1,3,24,45]; myChart.draw(data); One powerful feature is that two d3 charts can be mixed to make a new chart class. The mixing API allows mixing charts together to create new charts. Example A label chart and a circle chart can be mixed to become a labeled circle chart with the below syntax. ... d3.chart("LabeledCirclesChart", { initialize: function() { // setup some size defaults this._width = this._width || this.base.attr("width") || 200; this._height = this._height || this.base.attr("height") || 100; this.circles = this.mixin("CircleChart", this.base.append("g")); this.labels = this.mixin("LabelChart", this.base.append("g")); // make the radius larger than the default this.circles.radius(10); // overlay the labels on top of the circles this.labels.layer("labels") .attr("transform", "translate(0,-" + ( (this.height() / 2) - this.circles.radius()*1.3) + ")"); }, ... When a mixed chart class is instantiated, it actually has multiple layers, each corresponding to one of the composing chart classes. d3.chart and d3.js would be very valuable charting tools that are worth trying out in our work.
Posted in: Events|By: Yudan Li|2014 Reads