D3 Examples - stacked minimum setup

xxxxxxxxxx
 
<!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>
​
    