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