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.
Last active
November 12, 2017 22:04
-
-
Save fernoftheandes/93c5c349be14f459c98a to your computer and use it in GitHub Desktop.
Stacked-to-Multiples (improved)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="https://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment