epubjs

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg"><head><title>Chapter 2. Introducing D3</title><link rel="stylesheet" type="text/css" href="core.css"/><meta name="generator" content="DocBook XSL Stylesheets V1.76.1"/><link rel="up" href="index.html" title="Interactive Data Visualization for the Web"/><link rel="prev" href="ch01.html" title="Chapter 1. Introduction"/><link rel="next" href="ch03.html" title="Chapter 3. Technology Fundamentals"/></head><body><section class="chapter" title="Chapter 2. Introducing D3" epub:type="chapter" id="_introducing_d3"><div class="titlepage"><div><div><h2 class="title">Chapter 2. Introducing D3</h2></div></div></div><p>D3—also referred to as D<sup>3</sup> or d3.js—is a JavaScript library for creating data visualizations. But that kind of undersells it.<a id="I_indexterm2_id286857" class="indexterm"/></p><p>The abbreviation D3 references the tool’s full name, <span class="emphasis"><em>Data-Driven Documents</em></span>. The <span class="emphasis"><em>data</em></span> is provided by you, and the <span class="emphasis"><em>documents</em></span> are web-based documents, meaning anything that can be rendered by a web browser, such as HTML and SVG. D3 does the <span class="emphasis"><em>driving</em></span>, in the sense that it connects the data to the documents.<a id="I_indexterm2_id286888" class="indexterm"/><a id="I_indexterm2_id286898" class="indexterm"/></p><p>Of course, the name also functions as a clever allusion to the network of technologies underlying the tool itself: the W3, or World Wide Web, or, today, simply “the Web.”</p><p>D3’s primary author is the brilliant <a class="ulink" href="http://bost.ocks.org/mike/" target="_top">Mike Bostock</a>, although there are a few other dedicated contributors. The project is entirely open source and freely available on<a id="I_indexterm2_id286919" class="indexterm"/> <a class="ulink" href="https://github.com/mbostock/d3/" target="_top">GitHub</a>.</p><p>D3 is released under a BSD license, so you may use, modify, and adapt the code for noncommercial or commercial use at no cost.</p><p>D3’s official home on the Web is <a class="ulink" href="http://www.d3js.org/" target="_top"><span class="emphasis"><em>d3js.org</em></span></a>.</p><div class="sect1" title="What It Does"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_what_it_does">What It Does</h2></div></div></div><p>Fundamentally, D3 is an elegant piece of software that facilitates<a id="I_indexterm2_id286968" class="indexterm"/> generation and manipulation of web documents with data. It does this by:</p><div class="itemizedlist"><ul class="itemizedlist"><li class="listitem"> <span class="emphasis"><em>Loading</em></span> data into the browser’s memory </li><li class="listitem"> <span class="emphasis"><em>Binding</em></span> data to elements within the document, creating new elements as needed </li></ul></div><div class="itemizedlist"><ul class="itemizedlist"><li class="listitem"> <span class="emphasis"><em>Transforming</em></span> those elements by interpreting each element’s bound datum and setting its visual properties accordingly </li><li class="listitem"> <span class="emphasis"><em>Transitioning</em></span> elements between states in response to user input </li></ul></div><p>Learning to use D3 is simply a process of learning the syntax used to tell it how you want it to load and bind data, and transform and transition elements.</p><p>The <span class="emphasis"><em>transformation</em></span> step is most important, as this is where the <span class="emphasis"><em>mapping</em></span> happens. D3 provides a structure for applying these transformations, but, as we’ll see, you define the mapping rules. Should larger values make taller bars or brighter circles? Will clusters be sorted on the x-axis by age or category? What color palette is used to fill in countries on your world map? All of the visual design decisions are up to you. You provide the concept, you craft the rules, and D3 executes it—without telling you what to do. (Yes, it’s like the opposite of Excel’s pushy “Chart Wizard.”)<a id="I_indexterm2_id287058" class="indexterm"/><a id="I_indexterm2_id287066" class="indexterm"/></p></div><div class="sect1" title="What It Doesn’t Do"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_what_it_doesn_t_do">What It Doesn’t Do</h2></div></div></div><p>Here is a list of things D3 does not do:</p><div class="itemizedlist"><ul class="itemizedlist"><li class="listitem"> D3 doesn’t generate predefined or “canned” visualizations for you. This is on purpose. D3 is intended primarily for <span class="emphasis"><em>explanatory</em></span> visualization work, as opposed to <span class="emphasis"><em>exploratory</em></span> visualizations. Exploratory tools help you discover significant, meaningful patterns in data. These are tools like <a class="ulink" href="http://bit.ly/13KrhFH" target="_top">Tableau</a> and <a class="ulink" href="http://ggplot2.org/" target="_top">ggplot2</a>, which help you quickly generate multiple views on the same data set. That’s an essential step, but different from generating an <span class="emphasis"><em>explanatory</em></span> presentation of the data, a view of the data that highlights what you’ve already discovered. Explanatory views are more constrained and limited, but also focused, and designed to communicate only the important points. D3 excels at this latter step, but is not ideal for the former. (For ideas on other tools, see the section <a class="xref" href="ch02.html#alternatives_2" title="Alternatives">Alternatives</a> later in this chapter.)<a id="I_indexterm2_id287132" class="indexterm"/><a id="I_indexterm2_id287141" class="indexterm"/> </li><li class="listitem"> D3 doesn’t even try to support older browsers. This helps keep the D3 codebase clean and free of hacks to support old versions of Internet Explorer, for example. The philosophy is that by creating more compelling tools and refusing to support older browsers, we encourage more people to upgrade (rather than forestall the process, thereby requiring us to continue to support those browsers, and so on—a vicious cycle). D3 wants us to move forward.<a id="I_indexterm2_id287158" class="indexterm"/><a id="I_indexterm2_id287168" class="indexterm"/> </li><li class="listitem"> D3’s core functionality doesn’t handle bitmap map tiles, such as those provided by Google Maps or Cloudmade. D3 is great with anything vector—SVG images or GeoJSON data—but wasn’t originally intended to work with traditional map tiles. (<span class="emphasis"><em>Bitmap</em></span> images are made up of pixels, so resizing them larger or smaller is difficult without a loss in quality. <span class="emphasis"><em>Vector</em></span> images are defined by points, lines, and curves—mathematical equations, really—and can be scaled up or down without a loss in quality.) This is starting to change, with the introduction of the <a class="ulink" href="http://bit.ly/W8L18u" target="_top">d3.geo.tile plug-in</a>. Prior to this plug-in, geomapping with D3 meant either going all-SVG and avoiding tiles or using D3 to create SVG visuals <span class="emphasis"><em>on top of</em></span> a base layer of map tiles (which would be managed by another library, like Leaflet or Polymaps—see the section <a class="xref" href="ch02.html#alternatives_2" title="Alternatives">Alternatives</a> later in this chapter). This question of how to integrate bitmap tiles and vector graphics comes up a lot in the D3 community. As of today, there is no super-simple and perfect answer, but I think you can expect to see lots of work done in this area, and possibly the new tile-handling methods integrated into the D3 core at some point in the future.<a id="I_indexterm2_id287218" class="indexterm"/><a id="I_indexterm2_id287226" class="indexterm"/><a id="I_indexterm2_id287235" class="indexterm"/><a id="I_indexterm2_id287241" class="indexterm"/><a id="I_indexterm2_id287247" class="indexterm"/><a id="I_indexterm2_id287253" class="indexterm"/><a id="I_indexterm2_id287259" class="indexterm"/> </li><li class="listitem"> D3 doesn’t hide your original data. Because D3 code is executed on the client side (meaning, in the user’s web browser, as opposed to on the web server), the data you want visualized must be sent to the client. If your data can’t be shared, then don’t use D3. Alternatives include using proprietary tools (like Flash) or prerendering visualizations as static images and sending those to the browser. (If you’re not interested in sharing your data, though, why would you bother visualizing it? The purpose of visualization is to communicate the data, so you might sleep better at night by choosing openness and transparency, rather than having nightmares about <a class="ulink" href="http://www.datathief.org/" target="_top">data thieves</a>.)<a id="I_indexterm2_id287286" class="indexterm"/><a id="I_indexterm2_id287293" class="indexterm"/> </li></ul></div></div><div class="sect1" title="Origins and Context"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_origins_and_context">Origins and Context</h2></div></div></div><p>The first web browsers rendered static pages; interactivity was limited to clicking links. In 1996, Netscape introduced the first browser with JavaScript, a new scripting language that could be interpreted <span class="emphasis"><em>by the browser while the page was being viewed</em></span>.<a id="I_indexterm2_id287329" class="indexterm"/></p><p>This doesn’t sound as groundbreaking as it turned out to be, but this enabled web browsers to evolve from merely passive <span class="emphasis"><em>browsers</em></span> to dynamic frames for interactive, networked experiences. This shift ultimately enabled every intrapage interaction we have on the Web today. Without JavaScript, D3 would never exist, and web-based data visualizations would be limited to prerendered, noninteractive GIFs. (Yuck. Thank you, Netscape!)<a id="I_indexterm2_id287348" class="indexterm"/><a id="I_indexterm2_id287357" class="indexterm"/></p><p>Jump ahead to 2005, when Jeffrey Heer, Stuart Card, and James Landay introduced <a class="ulink" href="http://prefuse.org/" target="_top">prefuse</a>, a toolkit for bringing data visualization to the Web. prefuse (spelled with all lowercase letters) was written in Java, a compiled language, with programs that could run in web browsers via a Java plug-in. (Note that <span class="emphasis"><em>Java</em></span> is a completely different programming language than <span class="emphasis"><em>JavaScript</em></span>, despite their similar names.)<a id="I_indexterm2_id287385" class="indexterm"/><a id="I_indexterm2_id287392" class="indexterm"/><a id="I_indexterm2_id287398" class="indexterm"/><a id="I_indexterm2_id287404" class="indexterm"/><a id="I_indexterm2_id287410" class="indexterm"/></p><p>prefuse was a breakthrough application—the first to make web-based visualization accessible to less-than-expert programmers. Until prefuse came along, any datavis on the Web was very much a custom affair.</p><p>Two years later, Jeff Heer introduced <a class="ulink" href="http://flare.prefuse.org/" target="_top">Flare</a>, a similar toolkit, but written in ActionScript, so its visualizations could be viewed on the Web through Adobe’s Flash Player. Flare, like prefuse, relied on a browser plug-in. Flare was a huge improvement, but as web browsers continued to evolve, it was clear that visualizations could be created with native browser technology, no plug-ins required.<a id="I_indexterm2_id287435" class="indexterm"/><a id="I_indexterm2_id287441" class="indexterm"/></p><p>By 2009, Jeff Heer had moved to Stanford, where he was advising a graduate student named Michael Bostock. Together, in Stanford’s Vis Group, they created <a class="ulink" href="http://mbostock.github.com/protovis/" target="_top">Protovis</a>, a JavaScript-based visualization toolkit that relied exclusively on native browser technologies. (If you have used Protovis, be sure to reference Mike’s <a class="ulink" href="http://bit.ly/XxebvX" target="_top">introduction to D3 for Protovis users</a>.)<a id="I_indexterm2_id287471" class="indexterm"/><a id="I_indexterm2_id287477" class="indexterm"/></p><p>Protovis made generating visualizations simple, even for users without prior programming experience. Yet to achieve this, it created an abstract representation layer. The designer could address this layer using Protovis syntax, but it wasn’t accessible through standard methods, so debugging was difficult.</p><p>In 2011, Mike Bostock, Vadim Ogievetsky, and Jeff Heer <a class="ulink" href="http://vis.stanford.edu/papers/d3" target="_top">officially announced D3</a>, the next evolution in web visualization tools. Unlike Protovis, D3 operates directly on the web document itself. This means easier debugging, easier experimentation, and more visual possibilities. The only downside to this approach is a potentially steeper learning curve, but this book will make that as painless as possible. Plus, all the skills you gain while learning about D3 will prove useful even beyond the realm of datavis.<a id="I_indexterm2_id287504" class="indexterm"/><a id="I_indexterm2_id287510" class="indexterm"/></p><p>If you’re familiar with any of these groundbreaking tools, you’ll appreciate that D3 descends from a prestigious lineage. And if you have any interest in the philosophy underlying D3’s elegant technical design, I highly recommend Mike, Vadim, and Jeff’s <a class="ulink" href="http://vis.stanford.edu/files/2011-D3-InfoVis.pdf" target="_top">InfoVis paper</a>, which clearly articulates the need for this kind of tool. The paper encapsulates years’ worth of learning and insights made while developing visualization tools.<a id="I_indexterm2_id287532" class="indexterm"/></p></div><div class="sect1" title="Alternatives"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="alternatives_2">Alternatives</h2></div></div></div><p>D3 might not be perfect for every project. Sometimes you just need a quick chart and you don’t have time to code it from scratch. Or you might need to support older browsers and can’t rely on recent technologies like SVG.<a id="ix_D3alttools" class="indexterm"/><a id="ix_alttools" class="indexterm"/></p><p>For those situations, it’s good to know what other tools are out there. Here is a brief, noncomprehensive list of D3 alternatives, all of which use web-standard technologies (mostly JavaScript) and are free to download and use.</p><div class="sect2" title="Easy Charts"><div class="titlepage"><div><div><h3 class="title" id="_easy_charts">Easy Charts</h3></div></div></div><div class="variablelist"><dl><dt><span class="term"> <a class="ulink" href="http://datawrapper.de" target="_top">DataWrapper</a> </span></dt><dd> A beautiful web service that lets you upload your data and quickly generate a chart that you can republish elsewhere or embed on your site. This service was originally intended for journalists, but it is helpful for everyone. DataWrapper displays interactive charts in current browsers and static images for old ones. (Brilliant!) You can also download all the code and run it on your own server instead of using theirs.<a id="I_indexterm2_id287622" class="indexterm"/> </dd><dt><span class="term"> <a class="ulink" href="http://www.flotcharts.org/" target="_top">Flot</a> </span></dt><dd> A plotting library for jQuery that uses the HTML canvas element and supports older browsers, even all the way back to Internet Explorer 6. It supports limited visual forms (lines, points, bars, areas), but it is easy to use. </dd><dt><span class="term"> <a class="ulink" href="https://developers.google.com/chart/" target="_top">Google Chart Tools</a> </span></dt><dd> Having evolved from their earlier <a class="ulink" href="https://developers.google.com/chart/image/" target="_top">Image Charts API</a>, Google’s Chart Tools can be used to generate several standard chart types, with support for old versions of IE. </dd><dt><span class="term"> <a class="ulink" href="http://g.raphaeljs.com/" target="_top">gRaphaël</a> </span></dt><dd> A charting library based on Raphaël (see later in this chapter) that supports older browsers, including IE6. It has more visual flexibility than Flot, and—some might say—it is prettier. </dd><dt><span class="term"> <a class="ulink" href="http://www.highcharts.com/" target="_top">Highcharts JS</a> </span></dt><dd> A JavaScript-based charting library with several predesigned themes and chart types. It uses SVG for modern browsers and <a class="ulink" href="http://www.highcharts.com/documentation/compatibility" target="_top">falls back on VML</a> for old versions of IE, including IE6 and later. The tool is free only for noncommercial use. </dd><dt><span class="term"> <a class="ulink" href="http://thejit.org/" target="_top">JavaScript InfoVis Toolkit</a> </span></dt><dd> The JIT provides several preset visualization styles for your data. It includes lots of examples, but the documentation is pretty technical. The toolkit is great if you like one of the preset styles, but browser support is unclear. </dd><dt><span class="term"> <a class="ulink" href="http://www.jqplot.com/" target="_top">jqPlot</a> </span></dt><dd> A plug-in for charting with jQuery. This supports very simple charts and is great if you are okay with the predefined styles. jqPlot supports IE7 and newer. </dd><dt><span class="term"> <a class="ulink" href="http://omnipotent.net/jquery.sparkline/" target="_top">jQuery Sparklines</a> </span></dt><dd> A jQuery plug-in for generating sparklines, typically small bar, line, or area charts used inline with text. Supports most browsers, even back to IE6. </dd><dt><span class="term"> <a class="ulink" href="http://benpickles.github.com/peity/" target="_top">Peity</a> </span></dt><dd> A jQuery plug-in for very simple and very <span class="emphasis"><em>tiny</em></span> bar, line, and pie charts that supports only recent browsers. Did I mention that this makes only very <span class="emphasis"><em>tiny</em></span> visualizations? +10 cuteness points. </dd><dt><span class="term"> <a class="ulink" href="http://timeline.verite.co/" target="_top">Timeline.js</a> </span></dt><dd> A library specifically for generating interactive timelines. No coding is required; just use the code generator. There is not much room for customization, but hey, timelines are really hard to do well. Timeline.js supports only IE8 and newer. </dd><dt><span class="term"> <a class="ulink" href="http://yuilibrary.com/yui/docs/charts/" target="_top">YUI Charts</a> </span></dt><dd> The Charts module for the Yahoo! User Interface Library enables creation of simple charts with a goal of wide browser support. </dd></dl></div></div><div class="sect2" title="Graph Visualizations"><div class="titlepage"><div><div><h3 class="title" id="_graph_visualizations">Graph Visualizations</h3></div></div></div><p>A “graph” is just data with a networked structure (for example, B is connected to A, and A is connected to C).<a id="I_indexterm2_id287894" class="indexterm"/></p><div class="variablelist"><dl><dt><span class="term"> <a class="ulink" href="http://arborjs.org/" target="_top">Arbor.js</a> </span></dt><dd> A library for graph visualization using jQuery. Even if you never use this, you should check out how the documentation is presented as a graph, using the tool itself. (It’s so <span class="emphasis"><em>meta</em></span>.) It uses the HTML canvas, so it works only in IE9 or current browsers, although some workarounds are available. </dd><dt><span class="term"> <a class="ulink" href="http://sigmajs.org/" target="_top">Sigma.js</a> </span></dt><dd> A very lightweight library for graph visualization. You have to visit this website, move your mouse over the header graphic, and then play with the demos. Sigma.js is beautiful and fast, and it also uses canvas. </dd></dl></div></div><div class="sect2" title="Geomapping"><div class="titlepage"><div><div><h3 class="title" id="_geomapping">Geomapping</h3></div></div></div><p>I distinguish between <span class="emphasis"><em>mapping</em></span> (all visualizations are maps) and <span class="emphasis"><em>geomapping</em></span> (visualizations that include geographic data, or geodata, such as traditional maps). D3 has a lot of geomapping functionality, but you should know about these other tools.<a id="I_indexterm2_id287979" class="indexterm"/></p><div class="variablelist"><dl><dt><span class="term"> <a class="ulink" href="http://kartograph.org/" target="_top">Kartograph</a> </span></dt><dd> A JavaScript-and-Python combo for gorgeous, entirely vector-based mapping by Gregor Aisch with must-see demos. Please go look at them now. I promise you’ve never seen online maps this beautiful. Kartograph works with IE7 and newer. </dd><dt><span class="term"> <a class="ulink" href="http://leaflet.cloudmade.com/" target="_top">Leaflet</a> </span></dt><dd> A library for tiled maps, designed for smooth interaction on both desktop and mobile devices. It includes some support for displaying data layers of SVG on top </dd></dl></div><p>of the map tiles. (See Mike’s demo <a class="ulink" href="http://bost.ocks.org/mike/leaflet/" target="_top">“Using D3 with Leaflet”</a>.) Leaflet works with IE6 (barely) or IE7 (better!) and of course all current browsers.</p><div class="variablelist"><dl><dt><span class="term"> <a class="ulink" href="http://modestmaps.com/" target="_top">Modest Maps</a> </span></dt><dd> The granddaddy of tiled map libraries, Modest Maps has been succeeded by Polymaps, but lots of people still love it, as it is lightweight and works with old versions of IE and other browsers. Modest Maps has been adapted for ActionScript, Processing, Python, PHP, Cinder, openFrameworks…yeah, basically everything. File this under “oldie, but goodie.” </dd><dt><span class="term"> <a class="ulink" href="http://polymaps.org/" target="_top">Polymaps</a> </span></dt><dd> A library for displaying tiled maps, with layers of data on top of the tiles. Polymaps relies on SVG and thus works best with current browsers. </dd></dl></div></div><div class="sect2" title="Almost from Scratch"><div class="titlepage"><div><div><h3 class="title" id="_almost_from_scratch">Almost from Scratch</h3></div></div></div><p>These tools, like D3, provide methods of drawing visual forms, but without predesigned visual templates. If you enjoy the creative freedom of starting from scratch, you might enjoy these.<a id="I_indexterm2_id288113" class="indexterm"/></p><div class="variablelist"><dl><dt><span class="term"> <a class="ulink" href="http://processingjs.org/" target="_top">Processing.js</a> </span></dt><dd> A native JavaScript implementation of <a class="ulink" href="http://processing.org/" target="_top">Processing</a>, the fantastic programming language for artists and designers new to programming. Processing is written in Java, so exporting Processing sketches to the Web traditionally involved clunky Java applets. Thanks to Processing.js, regular Processing code can run natively, in the browser. It renders using canvas, so only modern browsers are supported. </dd><dt><span class="term"> <a class="ulink" href="http://paperjs.org/" target="_top">Paper.js</a> </span></dt><dd> A framework for rendering vector graphics to canvas. Also, its website is one of the most beautiful on the Internet, and their demos are unbelievable. (Go play with them now.) </dd><dt><span class="term"> <a class="ulink" href="http://raphaeljs.com/" target="_top">Raphaël</a> </span></dt><dd> Another library for drawing vector graphics, popular due to its friendly syntax and support for older browsers. </dd></dl></div></div><div class="sect2" title="Three-Dimensional"><div class="titlepage"><div><div><h3 class="title" id="_three_dimensional">Three-Dimensional</h3></div></div></div><p>D3 is not the best at 3D, simply because web browsers are historically two-dimensional beasts. But with increased support for WebGL, there are now more opportunities for 3D web experiences.<a id="I_indexterm2_id288213" class="indexterm"/></p><div class="variablelist"><dl><dt><span class="term"> <a class="ulink" href="http://www.senchalabs.org/philogl/" target="_top">PhiloGL</a> </span></dt><dd> A WebGL framework specifically for 3D visualization. </dd><dt><span class="term"> <a class="ulink" href="http://mrdoob.github.com/three.js/" target="_top">Three.js</a> </span></dt><dd> A library for generating any sort of 3D scene you could imagine, produced by Google’s Data Arts team. You could spend all day exploring the mind-blowing demos on their site. </dd></dl></div></div><div class="sect2" title="Tools Built with D3"><div class="titlepage"><div><div><h3 class="title" id="_tools_built_with_d3">Tools Built with D3</h3></div></div></div><p>When you want to use D3 without actually writing any D3 code, you can choose one of the many tools built on top of D3!</p><div class="variablelist"><dl><dt><span class="term"> <a class="ulink" href="http://square.github.com/crossfilter/" target="_top">Crossfilter</a> </span></dt><dd> A library for working with large, multivariate datasets, written primarily by Mike Bostock. This is useful for trying to squeeze your “big data” into a relatively small web browser. </dd><dt><span class="term"> <a class="ulink" href="http://square.github.com/cubism/" target="_top">Cubism</a> </span></dt><dd> A D3 plug-in for visualizing time series data, also written by Mike Bostock. (One of my favorite demos.) </dd><dt><span class="term"> <a class="ulink" href="https://dashku.com/" target="_top">Dashku</a> </span></dt><dd> An online tool for data dashboards and widgets updated in real time, by Paul Jensen. </dd><dt><span class="term"> <a class="ulink" href="http://nickqizhu.github.com/dc.js/" target="_top">dc.js</a> </span></dt><dd> The “dc” is short for <span class="emphasis"><em>dimensional charting</em></span>, as this library is optimized for exploring large, multidimensional datasets. </dd><dt><span class="term"> <a class="ulink" href="http://nvd3.org" target="_top">NVD3</a> </span></dt><dd> Reusable charts with D3. NVD3 offers lots of beautiful examples, with room for visual customizations without requiring as much code as D3 alone. </dd><dt><span class="term"> <a class="ulink" href="http://polychart.com/" target="_top">Polychart.js</a> </span></dt><dd> More reusable charts, with a range of chart types available. Polychart.js is free only for noncommercial use. </dd><dt><span class="term"> <a class="ulink" href="http://code.shutterstock.com/rickshaw/" target="_top">Rickshaw</a> </span></dt><dd> A toolkit for displaying time series data that is also very customizable. </dd><dt><span class="term"> <a class="ulink" href="http://enjalot.com/" target="_top">Tributary</a> </span></dt><dd> A great tool for experimenting with live coding using D3, by Ian Johnson.<a id="I_indexterm2_id288463" class="indexterm"/><a id="I_indexterm2_id288472" class="indexterm"/> </dd></dl></div></div></div></section></body></html>