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 = [ | |
{time: "1", tomato: 3840, gold: 1920, black: 1960}, | |
{time: "2", tomato: 1600, gold: 1440, black: 960}, | |
{time: "3", tomato: 640, gold: 960, black: 640}, | |
{time: "4", tomato: 320, gold: 480, black: 640} | |
]; | |
var series = d3.stack() | |
.keys(["tomato", "gold", "black"]) | |
.offset(d3.stackOffsetDiverging) | |
(data); | |
console.log('series:', series) | |
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((d) => d.time)) | |
.rangeRound([margin.left, width - margin.right]) | |
.padding(0.1); | |
var y = d3.scaleLinear() | |
.domain([0, d3.max(series, (serie) => d3.max(serie,(d) => d[1]))]) | |
.rangeRound([height - margin.bottom, margin.top]); | |
var z = d3.scaleOrdinal(['tomato', 'gold', 'black']); | |
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.time); }) | |
.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)); | |
</script> |
���� JFIF H H �� C | |
$.' ",#(7),01444'9=82<.342�� C 2!!22222222222222222222222222222222222222222222222222�� ��" |