A diverging stacked bar chart, with negative values descending below the x-axis.
forked from mbostock's block: Stacked Negative Values
| license: gpl-3.0 |
A diverging stacked bar chart, with negative values descending below the x-axis.
forked from mbostock's block: Stacked Negative Values
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var data = [ | |
| {month: "Q1-2016", apples: 3840, bananas: 1920, cherries: -1960, dates: -400}, | |
| {month: "Q2-2016", apples: 1600, bananas: 1440, cherries: -960, dates: -400}, | |
| {month: "Q3-2016", apples: 640, bananas: 960, cherries: -640, dates: -600}, | |
| {month: "Q4-2016", apples: 320, bananas: 480, cherries: -640, dates: -400} | |
| ]; | |
| var series = d3.stack() | |
| .keys(["apples", "bananas", "cherries", "dates"]) | |
| .offset(d3.stackOffsetDiverging) | |
| (data); | |
| var svg = d3.select("svg"), | |
| margin = {top: 20, right: 30, bottom: 30, left: 60}, | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"); | |
| var x = d3.scaleBand() | |
| .domain(data.map(function(d) { return d.month; })) | |
| .rangeRound([margin.left, width - margin.right]) | |
| .padding(0.1); | |
| var y = d3.scaleLinear() | |
| .domain([d3.min(series, stackMin), d3.max(series, stackMax)]) | |
| .rangeRound([height - margin.bottom, margin.top]); | |
| var z = d3.scaleOrdinal(d3.schemeCategory10); | |
| svg.append("g") | |
| .selectAll("g") | |
| .data(series) | |
| .enter().append("g") | |
| .attr("fill", function(d) { return z(d.key); }) | |
| .selectAll("rect") | |
| .data(function(d) { return d; }) | |
| .enter().append("rect") | |
| .attr("width", x.bandwidth) | |
| .attr("x", function(d) { return x(d.data.month); }) | |
| .attr("y", function(d) { return y(d[1]); }) | |
| .attr("height", function(d) { return y(d[0]) - y(d[1]); }) | |
| svg.append("g") | |
| .attr("transform", "translate(0," + y(0) + ")") | |
| .call(d3.axisBottom(x)); | |
| svg.append("g") | |
| .attr("transform", "translate(" + margin.left + ",0)") | |
| .call(d3.axisLeft(y)); | |
| function stackMin(serie) { | |
| return d3.min(serie, function(d) { return d[0]; }); | |
| } | |
| function stackMax(serie) { | |
| return d3.max(serie, function(d) { return d[1]; }); | |
| } | |
| </script> |
| ���� JFIF H H �� C | |
| $.' ",#(7),01444'9=82<.342�� C 2!!22222222222222222222222222222222222222222222222222�� ��" |