This is largely based on Mike Bostock's Stacked-to-Multiples gist. I have added 4 snippets to the original code in order to represent the magnitudes of each group per quarter and also each quarter's total. I find totalling the values as they are stacked to be an efficient and intuitive way to marry visual movement with enhanced information display.
forked from fernoftheandes's block: Stacked-to-Multiples (improved)
| group | date | value | |
|---|---|---|---|
| 1 | 2008-01 | 10 | |
| 1 | 2008-04 | 8 | |
| 1 | 2008-07 | 14 | |
| 1 | 2008-10 | 9 | |
| 1 | 2009-01 | 10 | |
| 1 | 2009-04 | 8 | |
| 1 | 2009-07 | 14 | |
| 1 | 2009-10 | 9 | |
| 2 | 2008-01 | 3 | |
| 2 | 2008-04 | 3.5 | |
| 2 | 2008-07 | 5 | |
| 2 | 2008-10 | 11 | |
| 2 | 2009-01 | 3 | |
| 2 | 2009-04 | 3.5 | |
| 2 | 2009-07 | 4.5 | |
| 2 | 2009-10 | 10.5 | |
| 3 | 2008-01 | 10 | |
| 3 | 2008-04 | 8 | |
| 3 | 2008-07 | 14 | |
| 3 | 2008-10 | 9 | |
| 3 | 2009-01 | 10 | |
| 3 | 2009-04 | 8 | |
| 3 | 2009-07 | 14 | |
| 3 | 2009-10 | 9 | |
| 4 | 2008-01 | 3 | |
| 4 | 2008-04 | 3.5 | |
| 4 | 2008-07 | 5 | |
| 4 | 2008-10 | 11 | |
| 4 | 2009-01 | 3 | |
| 4 | 2009-04 | 3.5 | |
| 4 | 2009-07 | 4.5 | |
| 4 | 2009-10 | 10.5 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| margin: auto; | |
| position: relative; | |
| width: 960px; | |
| } | |
| text { | |
| font: 10px sans-serif; | |
| } | |
| .axis path { | |
| display: none; | |
| } | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .group-label { | |
| font-weight: bold; | |
| text-anchor: end; | |
| } | |
| form { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| } | |
| </style> | |
| <form> | |
| <label><input type="radio" name="mode" value="multiples" checked> Multiples</label> | |
| <label><input type="radio" name="mode" value="stacked"> Stacked</label> | |
| </form> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var parseDate = d3.time.format("%Y-%m").parse, | |
| formatYear = d3.format("02d"), | |
| formatDate = function(d) { return "Q" + ((d.getMonth() / 3 | 0) + 1) + formatYear(d.getFullYear() % 100); }; | |
| var margin = {top: 10, right: 20, bottom: 20, left: 60}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var y0 = d3.scale.ordinal() | |
| .rangeRoundBands([height, 0], .2); | |
| var y1 = d3.scale.linear(); | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width], .1, 0); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .tickFormat(formatDate); | |
| var nest = d3.nest() | |
| .key(function(d) { return d.group; }); | |
| var stack = d3.layout.stack() | |
| .values(function(d) { return d.values; }) | |
| .x(function(d) { return d.date; }) | |
| .y(function(d) { return d.value; }) | |
| .out(function(d, y0) { d.valueOffset = y0; }); | |
| var color = d3.scale.category10(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.tsv("data.tsv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.date = parseDate(d.date); | |
| d.value = +d.value; | |
| }); | |
| var dataByGroup = nest.entries(data); | |
| stack(dataByGroup); | |
| x.domain(dataByGroup[0].values.map(function(d) { return d.date; })); | |
| y0.domain(dataByGroup.map(function(d) { return d.key; })); | |
| y1.domain([0, d3.max(data, function(d) { return d.value; })]).range([y0.rangeBand(), 0]); | |
| var group = svg.selectAll(".group") | |
| .data(dataByGroup) | |
| .enter().append("g") | |
| .attr("class", "group") | |
| .attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; }); | |
| // added this segment | |
| var quarterTotal = []; | |
| for (var i = 0; i < 8; i++) { | |
| quarterTotal[i] = 0; | |
| } | |
| // | |
| group.append("text") | |
| .attr("class", "group-label") | |
| .attr("x", -6) | |
| .attr("y", function(d) { return y1(d.values[0].value / 2); }) | |
| .attr("dy", ".35em") | |
| .text(function(d) { return "Group " + d.key; }); | |
| group.selectAll("rect") | |
| .data(function(d) { return d.values; }) | |
| .enter().append("rect") | |
| .style("fill", function(d) { return color(d.group); }) | |
| .attr("x", function(d) { return x(d.date); }) | |
| .attr("y", function(d) { return y1(d.value); }) | |
| .attr("width", x.rangeBand()) | |
| .attr("height", function(d) { return y0.rangeBand() - y1(d.value); }); | |
| // added this segment | |
| group.selectAll(".value-label") | |
| .data(function(d) { return d.values; }) | |
| .enter().append("text") | |
| .attr("class", "value-label") | |
| .style("fill", "white") | |
| .style("font-size", "12px") | |
| .attr("x", function(d) { return x(d.date); }) | |
| .attr("y", y0.rangeBand()) | |
| .attr("dx", ".20em") | |
| .attr("dy", "-.20em") | |
| .text(function(d,i) { | |
| quarterTotal[i] += d.value; // building the array with quarter totals... | |
| return d.value; | |
| }); | |
| // | |
| group.filter(function(d, i) { return !i; }).append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + y0.rangeBand() + ")") | |
| .call(xAxis); | |
| d3.selectAll("input").on("change", change); | |
| var timeout = setTimeout(function() { | |
| d3.select("input[value=\"stacked\"]").property("checked", true).each(change); | |
| }, 2000); | |
| function change() { | |
| clearTimeout(timeout); | |
| if (this.value === "multiples") transitionMultiples(); | |
| else transitionStacked(); | |
| } | |
| function transitionMultiples() { | |
| var t = svg.transition().duration(750), | |
| g = t.selectAll(".group").attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; }); | |
| g.selectAll("rect").attr("y", function(d) { return y1(d.value); }); | |
| g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2); }); | |
| // added this segment | |
| g.selectAll(".value-label") | |
| .attr("y", y0.rangeBand()) | |
| .style("opacity", 1) | |
| .text(function(d) { | |
| return d.value; | |
| }); | |
| // | |
| } | |
| function transitionStacked() { | |
| var t = svg.transition().duration(750), | |
| g = t.selectAll(".group").attr("transform", "translate(0," + y0(y0.domain()[0]) + ")"); | |
| g.selectAll("rect").attr("y", function(d) { return y1(d.value + d.valueOffset); }); | |
| g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2 + d.values[0].valueOffset); }); | |
| // added this segment | |
| g.selectAll(".value-label") | |
| .attr("y", y1(0)) | |
| .style("opacity", function(d,i,j) { | |
| return j === 3 ? "1" : "0"; | |
| }) | |
| .text(function(d,i) { | |
| return quarterTotal[i]; | |
| }); | |
| // | |
| } | |
| }); | |
| </script> |