D3 Examples - Stacked Bar Graph

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>
  <script>
    var data = [
        {
        leg:[{id:16, data:{value:'Bar 1', key:'Bar 1 Test'}}],
        fdata: [{id: 100, data:[{value: 120.646838}]}, {id: 200, data:[{value: 742.261986}]}]
      },
      {
        leg:[{id:16, data:{value:'Bar 2', key:'Bar 2 Test'}}],
        fdata: [{id: 100, data:[{value: 48.403265}]}, {id: 200, data:[{value: 149.444294}]}]
      },
      {
        leg:[{id:16, data:{value:'Bar 3', key:'Bar 3 Test'}}],
        fdata: [{id: 100, data:[{value: 25.649341}]}, {id: 200, data:[{value: 76.346227}]}]
      },
      {
        leg:[{id:16, data:{value:'Bar 4', key:'Bar 4 Test'}}],
        fdata: [{id: 100, data:[{value: 15.127140}]}, {id: 200, data:[{value: 77.751148}]}]
      },
      {
        leg:[{id:16, data:{value:'Bar 5', key:'Bar 5 Test'}}],
        fdata: [{id: 100, data:[{value: 31.600196}]}, {id: 200, data:[{value: 64.787362}]}]
      },
      {
        leg:[{id:16, data:{value:'Bar 6', key:'Bar 6 Test'}}],
        fdata: [{id: 100, data:[{value: 5.600196}]}, {id: 200, data:[{value: 64.787362}]}]
      }  
    ];
    
    var margin = {top: 30, right: 30, bottom: 30, left: 30},
        width = 800,
        height = 600;
    
    var keys = [100, 200] // field ids
    var max = d3.max(data, function(d) {return d.fdata[0].data[0].value})
    var newData = [];
    
    data.forEach(function(d) {
      var obj = {
         legKey: d.leg[0].data.key
      };
      
      d.fdata.forEach(function(fd) {
            obj[fd.id] = fd.data[0].value
      });
      
      newData.push(obj)
    })
​
    var x = d3.scaleBand() 
        .domain(newData.map(function(d){ return d.legKey; }))
        .range([0, width])
        .paddingInner(0.05)
        .align(0.1)
    
    var y = d3.scaleLinear()
        .rangeRound([height - 60, 0])
        .domain([0, 743]) // hard code highest value for now, should be 'Bar 1'
    
    var z = d3.scaleOrdinal()
        .range(['blue', 'green'])
        .domain(keys)
    
    var svg = d3
        .select('body')
        .append('svg') 
        .attr('width', width)
        .attr('height', height)
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
               
    svg
        .append('g')
            .attr('transform', 'translate(' + 60 + ',' + 0 + ')')
        .selectAll('g')
            .data(d3.stack().keys(keys)(newData))
        .enter().append('g')
        .attr('fill', function(d) { return z(d.key)})
      .selectAll('rect')
        .data(function(d){
        return d;
        })
        .enter().append('rect')
            .attr('x', function(d, i ){
            return x(d.data.legKey)
        })      
            .attr("y", function(d) { return y(d[1]); })
            .attr("height", function(d) { 
          return y(d[0]) - y(d[1]); 
        })
        .attr("width", x.bandwidth()); 
    
    y = d3.scaleBand() 
        .domain(newData.map(function(d){ return d.legKey; }))
        .range([0, height - 30])
        .paddingInner(0.05)
        .align(0.1)
    
    x = d3.scaleLinear()
        .domain([0, 743]) // hard code highest value for now, should be 'Bar 1'
        .range([0, width])
    
    svg.selectAll('rect')
      .attr('x', function(d, i ){
        return x(d[0])
        })      
      .attr("y", function(d) { return y(d.data.legKey); })
      .attr("width", function(d) { 
        return x(d[0]) + x(d[1]);  
        })
      .attr("height", y.bandwidth());  
    
//     var xScale = d3
//      .scaleBand()
//      .domain(data.map(function(d){ return d.leg[0].data.key; }))
//      .range([30, width], 0)
//      .paddingInner([.1])
    
//     var yScale = d3
//      .scaleLinear()
//      .domain([0, max])
//      .range([height - 60, 0]);
    
    var xaxis = d3
        .axisBottom()
        .scale(x)
          
    var yaxis = d3
        .axisLeft()
        .scale(y)
    
//     var svg = d3
//      .select('body')
//      .append('svg') 
//      .attr('width', width)
//      .attr('height', height)
//      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
    
//     var bars = svg
//       .selectAll('rect')
//      .data(data)
//      .enter()
//      .append('rect')
//      .attr('width', function(d) {
//         return xScale.bandwidth();
//       })
//      .attr('x', function(d, i) {
//         return xScale(d.leg[0].data.key);
//       })
//      .attr('y', function(d, i) {
//         return yScale(d.fdata[0].data[0].value) + 30;
//       })
//      .attr('height', function(d, i) {
//         return height - 60 - yScale(d.fdata[0].data[0].value) ;  
//          })
//      .attr('fill', 'blue')
    
    svg
      .append('g')
        .attr('transform', 'translate(' + 60 + ',' + 0 + ')')
            .call(yaxis)
    
    svg
        .append('g')
        .attr('transform', 'translate(' + 60 + ',' + (height - margin.top) + ')')
        .call(xaxis)
  </script>
</body>
​
    