The Community for Technology Leaders
RSS Icon
Subscribe
Issue No.12 - Dec. (2011 vol.17)
pp: 2301-2309
ABSTRACT
Data-Driven Documents (D3) is a novel representation-transparent approach to visualization for the web. Rather than hide the underlying scenegraph within a toolkit-specific abstraction, D3 enables direct inspection and manipulation of a native representation: the standard document object model (DOM). With D3, designers selectively bind input data to arbitrary document elements, applying dynamic transforms to both generate and modify content. We show how representational transparency improves expressiveness and better integrates with developer tools than prior approaches, while offering comparable notational efficiency and retaining powerful declarative components. Immediate evaluation of operators further simplifies debugging and allows iterative development. Additionally, we demonstrate how D3 transforms naturally enable animation and interaction with dramatic performance improvements over intermediate representations.
INDEX TERMS
Information visualization, user interfaces, toolkits, 2D graphics.
CITATION
Michael Bostock, Vadim Ogievetsky, Jeffrey Heer, "D³ Data-Driven Documents", IEEE Transactions on Visualization & Computer Graphics, vol.17, no. 12, pp. 2301-2309, Dec. 2011, doi:10.1109/TVCG.2011.185
REFERENCES
[1] R. A. Becker and W. S. Cleveland, Brushing scatterplots. Technometrics, 29: 127–142, May 1987.
[2] M. Bostock and J. Heer, Protovis: A graphical toolkit for visualization. IEEE Trans Vis and Comp Graphics, 15 (6): 1121–1128, 2009.
[3] D. M. Bruls, C. Huizing, and J. J. van Wijk, Squarified treemaps. In Joint Eurographics and IEEE TCVG Symposium on Visualization, pages 33–42, 1999.
[4] L. Byron and M. Wattenberg, Stacked graphs – geometry & aesthetics. IEEE Trans. Vis. and Comp. Graphics, 14 (6): 1245–1252, 2008.
[5] S. K. Card, J. D. Mackinlay, and B. Shneiderman editors. Readings in information visualization: using vision to think. Morgan Kaufmann, San Francisco, CA, 1999.
[6] d3.js. http://mbostock.github.comd3/, Mar 2011.
[7] T. Dwyer,, Scalable, versatile and simple constrained graph layout. In EuroVis, 2009.
[8] J.-D. Fekete, The InfoVis Toolkit. In IEEE InfoVis, pages 167–174, 2004.
[9] Flare. http:/flare.prefuse.org, Mar 2011.
[10] M. A. Harrower and C. A. Brewer, Colorbrewer.org: An online tool for selecting color schemes for maps. The Cartographic Journal, 40: 27–37, 2003.
[11] S. Havre, B. Hetzler, and L. Nowell, ThemeRiver: Visualizing theme changes over time. In IEEE InfoVis, page 115, 2000.
[12] J. Heer and M. Agrawala, Software design patterns for information visualization. IEEE Trans Vis and Comp Graphics, 12 (5): 853–860, 2006.
[13] J. Heer and M. Bostock, Declarative language design for interactive visualization. IEEE Trans Vis and Comp Graphics, 16 (6): 1149–1156, 2010.
[14] J. Heer, S. K. Card, and J. A. Landay, prefuse: a toolkit for interactive information visualization. In Proc. ACM CHI, pages 421–430, 2005.
[15] J. Heer and G. G. Robertson, Animated transitions in statistical data graphics. IEEE Trans Vis and Comp Graphics, 13 (6): 1240–1247, 2007.
[16] P. Hudak, Building domain-specific embedded languages. ACM Computing Surveys, 28:196, December 1996.
[17] S. Hudson and J. T. Stasko, Animation support in a user interface toolkit: Flexible, robust, and reusable abstractions. In ACM UIST, pages 57–67, 1993.
[18] JavaScript InfoVis Toolkit. http:/thejit.org/, Mar 2011.
[19] jQuery. http:/jquery.com/, Mar 2011.
[20] M. Krzywinski, J. Schein, I. Birol, J. Connors, R. Gascoyne, D. Hors-man, S. J. Jones, and M. A. Marra, Circos: An information aesthetic for comparative genomics. Genome Research, 19 (9): 1639–1645, Sep 2009.
[21] H. W. Lie, Cascading Style Sheets. PhD thesis, University of Oslo, 2005.
[22] M. Mayer Google I/O keynote. http://www.youtube.comwatch?v=6x0cAzQ7PVs, 2008.
[23] MooTools. http:/mootools.net/, Mar 2011.
[24] D. A. Norman, The Psychology of Everyday Things. Basic Books, New York, NY, 1988.
[25] J. M. Olson, Noncontiguous area cartograms. The Professional Geographer, 28: 371–380, November 1976.
[26] R. Penner Robert penner's easing equations. http://www.robertpenner.comeasing/, Mar 2011.
[27] K. Perlin and D. Fox, Pad: an alternative approach to the computer interface. In ACM SIGGRAPH 93, pages 57–64, 1993.
[28] Processing.js. http:/processingjs.org, Mar 2011.
[29] Prototype. http:/www.prototypejs.org/, Mar 2011.
[30] Raphaël”. http:/raphaeljs.com/, Mar 2011.
[31] B. Shneiderman, Tree visualization with tree-maps: 2-d space-filling approach. ACM Transactions on Graphics, 11: 92–99, 1992.
[32] J. Stasko and E. Zhang, Focus+context display and navigation techniques for enhancing radial, space-filling hierarchy visualizations. In IEEE Info-Vis, pages 57–64, 2000.
[33] The Dojo Toolkit. http:/dojotoolkit.org/, Mar 2011.
[34] The GeoJSON Format Specification. http:/geojson.org/, Jun 2008.
[35] The R Project for Statistical Computing. http:/www.r-project. org/, Mar 2011.
[36] E. T. Tufte Graphing software. http://www.edwardtufte.com/bboardq-and-a-fetch-msg?msg_id=00000p , 2001.
[37] M. Wattenberg, Baby names, visualization, and social data analysis. In IEEE InfoVis, pages 1–7, 2005.
[38] C. E. Weaver, Building highly-coordinated visualizations in Improvise. In Proc. IEEE InfoVis, pages 159–166, 2004.
[39] H. Wickham, ggplot2: Elegant Graphics for Data Analysis. Springer, 2009.
[40] L. Wilkinson, The Grammar of Graphics (Statistics and Computing). Springer-Verlag, Secaucus, NJ, 2005.
[41] XSL Transformations. http://www.w3.org/TRxslt, Nov 1999.
6 ms
(Ver 2.0)

Marketing Automation Platform Marketing Automation Tool