d3 v4 stack bar

d3 v4 stacked bar chart

by fekkyDev s

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id='stacked-bar'></div>

CSS

.axis text {
  font: 10px sans-serif;
}
.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis--x path {
  display: none;
}
.path-line {
  fill: none;
  stroke: yellow;
  stroke-width: 1.5px;
}
svg {
  background: #f0f0f0;
}
.selected{
  stroke:#333;
  stroke-width:2;
    
}

JavaScript

var colors = ['#FBB65B', '#513551', '#de3163'];
    var dataset = [{
      "goodRating": 12,
      "avgRating": 12,
      "badRating": 12,
      
    }];
    
     var dataset2 = [{
      "goodRating": 23232122,
      "avgRating": 2323132122,
      "badRating": 12321313,
      
    }];
    
    var stack = d3.stack()
  .keys(['goodRating', 'avgRating', 'badRating']);
  var stackedSeries = stack(dataset);


var sum = 0;

stackedSeries.forEach(d => {
  sum += d[0]
});





  

  // Create a g element for each series
  var svg = d3.select('#stacked-bar').append('svg').attr('height',60).attr('width',900).append('g');
var g = svg
	.selectAll('g.series')
	.data(stackedSeries)
	.enter()
	.append('g')
	.classed('series', true)
	.style('fill', function(d, i) {
		return colors[i];
	});
 
    
    var y = d3.scaleLinear()
  .domain([0, d3.max(stackedSeries, function(d) {  
    console.log(d);
    return d3.max(d, function(d) { return d[0] - d[1]; });  })])
  .range([900, 0]);
   
// For each series create a rect element for each day
g.selectAll('rect')
	.data(function(d) {
		return d;
	})
	.enter()
	.append('rect')
	.attr('width', function(d) {
   
		return d[1] - d[0];
	})
	.attr('x', function(d) {
		return d[0];
	})
	.attr('y', function(d, i) {
		return 1;
	})
	.attr('height', 19);