New treatise on D3.js

Good evening (or morning),

An excellent new treatise on D3.js[1] will be published in the InfoVis journal in October.  You will likely appreciate D3's design and may be able to borrow ideas as you labour to improve the web.

As we all know, this decade is seeing robust applications moving to the web.  As I see it, the AJAX (XmlHttpRequest) revolution helped with “acquiring” data from disparate sources.  The jQuery revolution helped with selecting and manipulating DOM elements.  The D3 revolution helps with the next steps in the web development process which builds on the previous revolutions and adds the vital capability of creating robust data-driven visualizations while complimenting web standards.

I just wanted to share this paper as it clearly articulates a number of key related points which are worth considering as we move forward with improving the web standards.  Mike Bostock, the author of D3 said he looks forward to any feedback on D3 so I am CC'ing him.

I have been looking into D3's capabilities over the last few months and am impressed - it has been well-built from the ground up by the prolific Mike Bostock.  This is his full (pre-publication) article[2].

As a quick summary of the article, D3’s genius and usefulness lies in the following features:
--  Representation-transparency:  Data is bound directly through standard calls to the DOM (HTML, SVG, etc.). 
        This improves expressiveness and complements web standards by not abstracting the visualization through an intermediate API. CSS, filters, HTML, SVG, and other DOM-based languages such as MathML work well together like they were designed.  This also allows for full in-browser debugging.
        Allows for immediate evaluations of operators and enables iterative development.
        Integrates well with other developer tools; developers know what to expect because the W3C standards are fully documented.
        And representational-transparency greatly improves accessibility compared to other visualization libraries.
--  D3 uses “Selection" via predicates to then apply operators to mutate the elements.  The closest analogues to D3 are other document transformers such as jQuery and CSS.
--  One of D3s sweet spots which neither CSS or jQuery provide is the creation and deletion of elements to match a dataset.  Designed to maximize efficient management of large set of data – 2X faster than Provotis.
--  Besides allowing for a low-level representation of dynamic data sources, on top of the selection-based "kernel" D3 includes a collection of helper modules for advanced graphs and mapping.  With this D3 provides convenient abstractions to allow for highly complex visualization tasks including transitions and animation.
--  Canvas, declarative SMIL, CSS animations, and even SVG-Replicate all seem to play well with D3, and D3's Transitions implementation is worth reviewing.

This [3] is also a nice new overview of D3 by our friend Domenico S.  Since D3 is open source and supports SVG by default, it might be nice to mention it on the SVG and FX blog or news feeds because it gives designers and developers a quick pathway to creating useful apps with SVG, HTML, CSS, etc.

[1] http://d3js.org
[2] http://vis.stanford.edu/files/2011-D3-InfoVis.pdf
[3] http://www.svgmagazine.com/jul2011/spotson_d3.js.html

Enjoy and cheers, Jon

Received on Tuesday, 16 August 2011 23:48:33 UTC