Old school D3 from simpler times

All examples By author By category About

boyets

Full window Github gist

Stacked Bar Graph

Built with blockbuilder.org

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

https://d3js.org/d3.v4.min.js