d3

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ A Bar Chart, Part 2</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='a_bar_chart_part_2'>A Bar Chart, Part 2</h1> The <a href='bar-1.html'>previous part</a> of this tutorial covered the construction of a no-frills, static bar chart. This part will showcase some of the dynamic capabilities of D3, including transitions and data joins. Say that, rather than a simple array of numbers, you want to visualize a <a href='http://en.wikipedia.org/wiki/Time_series'>time series</a>—a sequence of values sampled at regular time intervals. For example, say you run a website, and want to track how many visitors find your ideas intriguing? A bar chart could show the number of visitors that subscribe to your newsletter in realtime! <h2 id='dynamic_data'>Dynamic Data</h2> Now typically, the subscription data would be downloaded to the client via an HTTP request. You can poll the server to refresh the latest data every minute, or use <a href='http://www.w3.org/TR/websockets/'>web sockets</a> to stream data incrementally, minimizing latency. To simplify this tutorial and focus on the task of visualization, we’ll construct a synthetic (i.e., fake) dataset by <a href='http://en.wikipedia.org/wiki/Random_walk'>random walk</a>: <div class='highlight'><pre><code class='js'> 1 var t = 1297110663, // start time (seconds since epoch) 2 v = 70, // start value (subscribers) 3 data = d3.range(33).map(next); // starting dataset 4 5 function next() { 6 return { 7 time: ++t, 8 value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5))) 9 }; 10 } </code></pre> </div> The exact mechanism of the random walk is unimportant, but you should understand the structure of the resulting data. Rather than a number, each data point is an object with <code>time</code> and <code>value</code> attributes: <div class='highlight'><pre><code class='js'>1 {"time": 1297110663, "value": 56}, 2 {"time": 1297110664, "value": 53}, 3 {"time": 1297110665, "value": 58}, 4 {"time": 1297110666, "value": 58}, </code></pre> </div> Note that the values in the dataset are constrained to the domain [10, 90], which is convenient because it allows a fixed y-scale. This simplifies the implementation, as the old bars will not resize as new data arrives. You can use a dynamic scale, but keep in mind that rescaling old values while introducing new ones makes it harder for the user to perceive changes accurately. Also, you’ll need reference lines! Cushioning your scales to avoid sudden changes, or applying <a href='http://en.wikipedia.org/wiki/Hysteresis'>hysteresis</a> to delay changes, is recommended. If you stream data from the server, you can redraw the bar chart whenever new data becomes available. In this case, we’ll cycle the data every 1.5 seconds: <div class='highlight'><pre><code class='js'>1 setInterval(function() { 2 data.shift(); 3 data.push(next()); 4 redraw(); 5 }, 1500); </code></pre> </div> The <code>shift</code> operation removes the first (oldest) element in the array, while the <code>push</code> appends after the last (newest) element. If you have a lot of data, a <a href='http://en.wikipedia.org/wiki/Circular_buffer'>circular buffer</a> will improve performance; with smaller data, the inefficiency of the <code>shift</code> operation is negligible and can be ignored. The <code>redraw</code> method is a function that you will define; we’ll get to that shortly. <h2 id='dynamic_bars'>Dynamic Bars</h2> For now, the next step is to construct two scales, based on our knowledge of the dataset and the desired chart size. To fix the maximum bar size to 80×20, construct two linear scales: <div class='highlight'><pre><code class='js'> 1 var w = 20, 2 h = 80; 3 4 var x = d3.scale.linear() 5 .domain([0, 1]) 6 .range([0, w]); 7 8 var y = d3.scale.linear() 9 .domain([0, 100]) 10 .rangeRound([0, h]); </code></pre> </div> The x-scale is a bit cheeky in that we’ve defined the domain as [0, 1], rather than the full time-domain of the dataset. That’s because we’ll assume (again, for simplicity) that the data is in chronological order and there are no missing data points. As such, we can use the index of the data to derive the x-position; <code>x(i)</code> is identical to <code>w * i</code>. A more robust implementation would update the domain from the <code>time</code> attributes of the dataset whenever the data changes. The y-scale uses <code>rangeRound</code> rather than <code>range</code>; the only difference is that the output values of the scale are rounded to the nearest integer to avoid antialiasing artifacts. If you prefer, you can instead use SVG’s <a href='http://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty'>shape-rendering</a> property. However, antialiasing is nice for smooth intermediate values during transition. With the scales ready, construct the SVG container for the chart: <div class='highlight'><pre><code class='js'>1 var chart = d3.select("body") 2 .append("svg:svg") 3 .attr("class", "chart") 4 .attr("width", w * data.length - 1) 5 .attr("height", h); </code></pre> </div> Add the initial bars: <div class='highlight'><pre><code class='js'>1 chart.selectAll("rect") 2 .data(data) 3 .enter().append("svg:rect") 4 .attr("x", function(d, i) { return x(i) - .5; }) 5 .attr("y", function(d) { return h - y(d.value) - .5; }) 6 .attr("width", w) 7 .attr("height", function(d) { return y(d.value); }); </code></pre> </div> In SVG, rects are positioned relative to their top-left corner. For a vertical bar chart (also known as a column chart), the bars should be anchored by their bottom-left corner, so the “y” attribute flips the y-scale. Alternatively, you can use a transform to change the <a href='http://www.w3.org/TR/SVG/coords.html'>coordinate system</a>. The .5 offset is to avoid antialiasing; the 1-pixel white stroke is centered on the given location, so a half-pixel offset will fill the pixel exactly. If you are not the Martha Stewart type, and don’t care for crisp edges, you may omit this step. Add the y-axis last, so that it appears on top of the bars: <div class='highlight'><pre><code class='js'>1 chart.append("svg:line") 2 .attr("x1", 0) 3 .attr("x2", w * data.length) 4 .attr("y1", h - .5) 5 .attr("y2", h - .5) 6 .attr("stroke", "#000"); </code></pre> </div> SVG draws shapes in the order they are specified, so to have the axis appear on top of the bars, the line must exist after the rects in the DOM. It is sometimes convenient to use <code>svg:g</code> elements to group shapes into the desired z-order. A little bit of CSS will set the bar colors: <div class='highlight'><pre><code class='css'>1 .chart rect { 2 fill: steelblue; 3 stroke: white; 4 } </code></pre> </div><style type='text/css'> .chart { margin-left: 42px; } .chart rect { fill: steelblue; stroke: white; } </style><script type='text/javascript'> var t = 1297110663, v = 70, data = d3.range(33).map(next); function next() { return { time: ++t, value: v = ~~Math.max(10, Math.min(90, v + 10 * (Math.random() - .5))) }; } </script><script type='text/javascript'> var w = 20, h = 80; var x = d3.scale.linear() .domain([0, 1]) .range([0, w]); var y = d3.scale.linear() .domain([0, 100]) .rangeRound([0, h]); </script> The code so far produces a static bar chart: <script type='text/javascript'> var chart = d3.select(".content") .append("svg:svg") .attr("class", "chart") .attr("width", w * data.length - 1) .attr("height", h); chart.selectAll("rect") .data(data) .enter().append("svg:rect") .attr("x", function(d, i) { return x(i) - .5; }) .attr("y", function(d) { return h - y(d.value) - .5; }) .attr("width", w) .attr("height", function(d) { return y(d.value); }); chart.append("svg:line") .attr("x1", 0) .attr("x2", w * data.length) .attr("y1", h - .5) .attr("y2", h - .5) .attr("stroke", "#000"); </script> Now, what about that <code>redraw</code> function? <div class='highlight'><pre><code class='js'> 1 function redraw() { 2 3 // Update… 4 chart.selectAll("rect") 5 .data(data) 6 .transition() 7 .duration(1000) 8 .attr("y", function(d) { return h - y(d.value) - .5; }) 9 .attr("height", function(d) { return y(d.value); }); 10 11 } </code></pre> </div> Observe how the bars dance happily in response to changing data: <script type='text/javascript'> var chart1 = d3.select(".content") .append("svg:svg") .attr("class", "chart") .attr("width", w * data.length - 1) .attr("height", h); chart1.selectAll("rect") .data(data) .enter().append("svg:rect") .attr("x", function(d, i) { return x(i) - .5; }) .attr("y", function(d) { return h - y(d.value) - .5; }) .attr("width", w) .attr("height", function(d) { return y(d.value); }); chart1.append("svg:line") .attr("x1", 0) .attr("x2", w * data.length) .attr("y1", h - .5) .attr("y2", h - .5) .attr("stroke", "#000"); redraw1(); function redraw1() { chart1.selectAll("rect") .data(data) .transition() .duration(1000) .attr("y", function(d) { return h - y(d.value) - .5; }) .attr("height", function(d) { return y(d.value); }); } </script> The redraw function is fairly trivial—reselect the <code>rect</code> elements, bind them to the new data, and then start a transition that updates the “y” and “height” attributes. No enter and exit selection is needed! Without a data join, the data are joined to nodes by index. As the length of the data array is fixed, the number of nodes never changes, and thus the enter and exit selections are always empty. <h2 id='object_constancy'>Object Constancy</h2> Yet, the above animation is poor because it lacks object constancy through the transition: it does not convey the changing data accurately. Rather than updating values in-place, the bars should slide to the left, so that each bar corresponds to the same point in time across the transition. Do this using a data join, to bind nodes to data by timestamp rather than index: <div class='highlight'><pre><code class='js'> 1 function redraw() { 2 3 var rect = chart.selectAll("rect") 4 .data(data, function(d) { return d.time; }); 5 6 // Enter… 7 rect.enter().insert("svg:rect", "line") 8 .attr("x", function(d, i) { return x(i) - .5; }) 9 .attr("y", function(d) { return h - y(d.value) - .5; }) 10 .attr("width", w) 11 .attr("height", function(d) { return y(d.value); }); 12 13 // Update… 14 rect.transition() 15 .duration(1000) 16 .attr("x", function(d, i) { return x(i) - .5; }); 17 18 // Exit… 19 rect.exit() 20 .remove(); 21 22 } </code></pre> </div> With the new data join, we can no longer assume that the enter and exit selections are empty; instead, each contains exactly one bar upon redraw, as a new data point arrives and an old data point leaves. (If using real data, don’t assume regularity; multiple bars could enter and exit with each redraw.) So, the update is split to handle enter and exit separately. However, the update transition is actually simplified: we only transition the “x” attribute, as the “y” and “height” attributes do not change! Note that operations on the entering or exiting selection do not affect the updating selection. Thus, the transition defined on <code>rect</code> on L14 above includes only the updating bars, not any of the entering bars that are appended on L7. The bar chart now slides as desired, but the enter and exit are a bit clunky: <script type='text/javascript'> var chart2 = d3.select(".content") .append("svg:svg") .attr("class", "chart") .attr("width", w * data.length - 1) .attr("height", h); chart2.append("svg:line") .attr("x1", 0) .attr("x2", w * data.length) .attr("y1", h - .5) .attr("y2", h - .5) .attr("stroke", "#000"); redraw2(); function redraw2() { var rect = chart2.selectAll("rect") .data(data, function(d) { return d.time; }); rect.enter().insert("svg:rect", "line") .attr("x", function(d, i) { return x(i) - .5; }) .attr("y", function(d) { return h - y(d.value) - .5; }) .attr("width", w) .attr("height", function(d) { return y(d.value); }); rect.transition() .duration(1000) .attr("x", function(d, i) { return x(i) - .5; }); rect.exit() .remove(); } </script> The above implementation enters new bars immediately, while old bars are removed immediately. A common alternative is to fade, but in this case the most intuitive transition is for new bars to enter from the right, and old bars to exit to the left. Enter and exit can have transitions, too, which you can use to offset the index <code>i</code> to the x-scale: <div class='highlight'><pre><code class='js'> 1 function redraw() { 2 3 var rect = chart.selectAll("rect") 4 .data(data, function(d) { return d.time; }); 5 6 rect.enter().insert("svg:rect", "line") 7 .attr("x", function(d, i) { return x(i + 1) - .5; }) 8 .attr("y", function(d) { return h - y(d.value) - .5; }) 9 .attr("width", w) 10 .attr("height", function(d) { return y(d.value); }) 11 .transition() 12 .duration(1000) 13 .attr("x", function(d, i) { return x(i) - .5; }); 14 15 rect.transition() 16 .duration(1000) 17 .attr("x", function(d, i) { return x(i) - .5; }); 18 19 rect.exit().transition() 20 .duration(1000) 21 .attr("x", function(d, i) { return x(i - 1) - .5; }) 22 .remove(); 23 24 } </code></pre> </div> Note that the enter transition is staged; we initialize the values, and then start the transition. This is not needed with the exit transition because we’ll transition from the current state of the bar, regardless of value. Et voilà! <script type='text/javascript'> var chart3 = d3.select(".content") .append("svg:svg") .attr("class", "chart") .attr("width", w * data.length - 1) .attr("height", h); chart3.append("svg:line") .attr("x1", 0) .attr("x2", w * data.length) .attr("y1", h - .5) .attr("y2", h - .5) .attr("stroke", "#000"); redraw3(); function redraw3() { var rect = chart3.selectAll("rect") .data(data, function(d) { return d.time; }); rect.enter().insert("svg:rect", "line") .attr("x", function(d, i) { return x(i + 1) - .5; }) .attr("y", function(d) { return h - y(d.value) - .5; }) .attr("width", w) .attr("height", function(d) { return y(d.value); }) .transition() .duration(1000) .attr("x", function(d, i) { return x(i) - .5; }); rect.transition() .duration(1000) .attr("x", function(d, i) { return x(i) - .5; }); rect.exit().transition() .duration(1000) .attr("x", function(d, i) { return x(i - 1) - .5; }) .remove(); } </script> This tutorial covered several core concepts in D3, including transitions, enter and exit, and data joins. However, this only scratches the surface! Explore the <a href='../ex/'>examples gallery</a> to see more advanced techniques with D3. <script type='text/javascript'> setInterval(function() { data.shift(); data.push(next()); redraw1(); redraw2(); redraw3(); }, 1500); </script> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>