D3 Examples - Stacked bar to grouped bar

xxxxxxxxxx
 
<!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(500);
​
var stacked = true;
  
var data = d3.range(m).map(function() { 
  return d3.range(n).map(Math.random); 
});
  
var dataset = [];
  
var dataFormat = [];
  
d3.csv("stock.csv", function(data) {
  
  var dataset = d3.nest()
  .key(function(d) {
    return d.date.substring(d.date.length-4)
  })
  .entries(data)
  dataset.forEach(function(item, index) {
    dataset[index] = {
      year: item.key,
      symbols: d3.nest()
              .key(function(e) {
                return e.symbol
              })
              .entries(item.values)
              }
    dataset[index].symbols.forEach(function(el, i) {
      dataset[index].symbols[i] = {
        symbol: el.key,
        price: d3.mean(el.values, function(a) {
          return a.price
        })
      }
    })
  })
  
  dataFormat = d3.range(n).map(function(index) {
    return d3.range(m).map(function(i) {
      return Math.round(dataset[index].symbols[i].price * 10) / 10
    }); 
  })
  
  console.log(dataFormat)
  
  var margin = {top: 20, right: 30, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
​
  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(t).each(function(d, index) {
      d3.select(this).selectAll("rect").transition(t).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(t).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(t)
            .attr("y", function(d) {
            return y(d[1]); 
            })
            .attr("height", function(d) {
            return y(d[0]) - y(d[1]) 
            })
//          .transition(t).delay(500)
            .attr("x", function() {
            return x(i)
            })
            .attr("width", function() {
            return x.bandwidth()
            })
        }
      })
    })
//       svg.selectAll("g").transition(t).each(function(d, index) {
//       d3.select(this).selectAll("rect").transition(t).each(function(e, i) {
//         d3.select(this).transition(t)
//          .attr("y", function(d) {
//              return y(d[1]); 
//          })
//          .attr("height", function(d) {
//              return y(d[0]) - y(d[1]) 
//          })
//          .transition(t).delay(500)
//          .attr("x", function() {
//              return x(i)
//          })
//          .attr("width", function() {
//              return x.bandwidth()
//          })
//       })
//     })
    stacked = !stacked;
  })
});
​
</script>
    