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�� ��" |