D3 Examples - multiple-to-stack

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}
​
text {
  font: 10px sans-serif;
}
​
.axis path {
  display: none;
}
​
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
.group-label {
  font-weight: bold;
  text-anchor: end;
}
​
form {
  position: absolute;
  right: 10px;
  top: 10px;
}
    
  </style>
</head>
​
<body>
  
  
  <script>
var parseDate = d3.timeParse("%b %Y");
var formatDate = d3.timeFormat("%b");
var element = "body";
var margin = {top: 15, right: 150, bottom: 15, left: 150},
    outerWidth = 960,
    outerHeight = 500, 
    width = outerWidth - margin.left - margin.right,
    height = outerHeight - margin.top - margin.bottom;
​
var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(.1);
    
var y0 = d3.scaleBand()
    .rangeRound([height, 0])
    .padding(.1);
​
var y1 = d3.scaleLinear();
​
var xAxis = d3.axisBottom()
    .scale(x)
    .tickFormat(formatDate);
​
var nest = d3.nest()
    .key(d => d.date);
​
function type(d) {
  d.date = parseDate(d.date);
  d.group = formatDate(d.date);
  d.value = +d.value;
  d.commission = +d.commission;
​
  return d;
}
​
d3.csv('data.csv', type, function(err, data) {
​
  let dataGroups = nest.entries(data);
  let keys = data.columns.slice(1);
  let color = d3.scaleOrdinal(d3.schemeCategory20c);
  
    dataGroups.forEach((d) => {
    d.total = d3.sum(d.values, i => +i.value);
    });
​
  
debugger;
  const svg = d3.select(element)
        .append("svg")
      .attr("width", outerWidth)
      .attr("height", outerHeight)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    ;
​
  x.domain(dataGroups[0].values.map(d => d.date))
  y0.domain(dataGroups.map(d => d.key));
  y1.domain([0, d3.max(dataGroups, d => d.total)])
    .range([y0.bandwidth(), 0])
  ;
​
  const g = svg.selectAll(".group")
    .data(dataGroups)
    .enter()
    .append("g")
    .attr("transform", "translate(0," + y0(y0.domain()[0]) + ")")
  ;
​
  g.selectAll("rect")
    .data(d => d.values)
    .enter()
    .append("rect")
    .style("fill", d => color(d.value))
    .attr("x", d => x(d.date))
    .attr("width", x.bandwidth())
    .attr("height", d => y0.bandwidth() - y1(d.value))
    .attr("y", (d, i) => y1(d.total))
  ;
​
  g.filter((d, i) => !i)
    .append("g")
    .attr("class", "axis axis-x")
    .attr("transform", "translate(0," + y0.bandwidth() + ")")
    .call(xAxis)
  ;
​
});
  </script>
</body>
​
    