Stacked bar to grouped bar

Built with blockbuilder.org

forked from romsson's block: Stacked bar chart v4

<!DOCTYPE html>
<style>

.axis .domain {
  display: none;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// Source: https://bl.ocks.org/mbostock/3886208
var n = 11, // number of samples
    m = 4; // number of series
  
var t = d3.transition()
					.duration(1000)

var y = d3.scaleLinear()
      .domain([0, 500])
      .rangeRound([height, 0])
      .nice();
  
  var y_bis = d3.scaleLinear()
      .domain([0, 150])
      .rangeRound([height, 0])
      .nice();

var x = d3.scaleBand()
      .rangeRound([0, width])
      .paddingInner(0.05)
      .align(0.1)
      .domain(d3.range(n));
  
  var z = d3.scaleOrdinal()
      .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  
  var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g").selectAll("g")
              .data(d3.stack().keys(d3.range(n))(dataFormat))
                .enter().append("g")
                  .style("fill", function(d) {
                return z(d.key); })	
                  .selectAll("rect")
                .data(function(d) {
                return d; })
                  .enter().append("rect")
                    .attr("x", function(d, i) {
    						return x(i); })
                    .attr("y", function(d) {
                return y(d[1]); })
                    .attr("height", function(d) { 
                return y(d[0]) - y(d[1]); })
                    .attr("width", x.bandwidth());
  
  svg.on("click", function() {
      svg.selectAll("g").transition().each(function(d, index) {
      d3.select(this).selectAll("rect").transition().each(function(e, i) {
        if(stacked) {
        d3.select(this).transition(t)
          .attr("x", function() {
          	return x(i) + ((index - 1) % 4)*x.bandwidth()/4
        	})
        	.attr("width", function() {
          	return x.bandwidth()/5
        	})
        	.transition().delay(500)
        	.attr("y", function(d) {
          	return height - (y_bis(d[0]) - y_bis(d[1])); 
        	})
        	.attr("height", function(d) {
          	return y_bis(d[0]) - y_bis(d[1]); 
        	})
        } else {
          d3.select(this).transition()
        	.attr("y", function(d) {
          	return y(d[1]); 
        	})
        	.attr("height", function(d) {
          	return y(d[0]) - y(d[1]) 
        	})
        	.transition().delay(500)
        	.attr("x", function() {
          	return x(i)
        	})
//         	.attr("width", function() {
//           	return x.bandwidth()
//         	})
        }
      })
    })
    stacked = !stacked;
  })
});

</script>

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