D3 Examples - StackedBars

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; }
  </style>
</head>
<body>
  <svg width="960" height="500"></svg>
  <script>
    console.clear();
    
    var svg = d3.select('svg');
    var margin = {top: 20, right: 20, bottom: 20, left: 20};
    var width = svg.attr('width') - margin.left - margin.right;
    var height = svg.attr('height') - margin.top - margin.bottom;
    var g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
    
        // scales
    var x = d3.scaleBand()
        .rangeRound([0, width])
        .paddingInner(0.1);
    
    var x1 = d3.scaleBand()
    .padding(0.05);
    
    var y = d3.scaleLinear()
        .rangeRound([height, 0]);
    
    var z = d3.scaleOrdinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"])
    
    var stack = d3.stack()
        .offset(d3.stackOffsetExpand);
    
    d3.csv('data.csv', function(error, data) {
            if (error) throw error;
      
      data.forEach(function(d) {
        d.Value = +d.Value;
      })
      
      
// TODO: 
//       https://bl.ocks.org/SpaceActuary/6233700e7f443b719855a227f4749ee5
//       https://learnjsdata.com/group_data.html 
      
      
      x.domain(data.map(function(d) { return d.Section}));
      
      z.domain(data.map(function(d) {return d.Region}));
      
      console.log(z.domain());
      
      var groupData = d3.nest()
        .key(function(d) {return d.Section + d.Region})
        .rollup(function(v) { return v.length})
        .entries(data);
      
      console.log(JSON.stringify(groupData));
      
      var row = g.selectAll('g')
        .data(data)
        .enter().append('g')
            .attr("class", "serie")
              .attr("fill", function(d) { return z(d.key); });
    })
  </script>
</body>
​
    