Stacked to grouped bar animation

<!DOCTYPE html encoding="utf-8">
<html>
  <head>
<script src="https://d3js.org/d3.v4.min.js"></script>
 </head>
<style>

form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 10px;
  top: 10px;
}

label {
  display: block;
}

</style>
<form>
  <label><input type="radio" name="mode" value="grouped"> Grouped</label>
  <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
</form>

<body>
  <script>
    
        var margin = {
              top: 20,
              right: 20,
              bottom: 25,
              left: 40
          },
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

data.forEach(function(d){
        var company_index = companies.indexOf(d.symbol);
        var date_index = dates.indexOf(d.date);
        measures_by_date[date_index][company_index] = +d.price;
      })

var x = d3.scaleBand()
          .domain(xz)
          .rangeRound([0, width])
          .padding(0.08);

var y = d3.scaleLinear()
          .domain([0, y1Max])
          .range([height, height/5]);

var color = d3.scaleOrdinal()
          .domain(d3.range(companies.length))
          .range(d3.schemeCategory10);

var series = g.selectAll(".series")
        .data(y01z)
        .enter().append("g")
          .attr("fill", function(d, i) { return color(i); });

var rect = series.selectAll("rect")
        .data(function(d) { return d; })
        .enter().append("rect")
          .attr("x", function(d, i) { return x(companies[i%companies.length]); })
          .attr("y", height)
          .attr("width", x.bandwidth())
          .attr("height", 0);

rect.transition()
          .delay(function(d, i) { return i * 10; })
          .attr("y", function(d) { return y(d[1]); })
          .attr("height", function(d) { return y(d[0]) - y(d[1]); });

g.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x)
              .tickSize(0)
              .tickPadding(6));

d3.selectAll("input")
          .on("change", changed);

var timeout = d3.timeout(function() {
        d3.select("input[value=\"grouped\"]")
            .property("checked", true)
            .dispatch("change");
      }, 2000);

function changed() {
        timeout.stop();
        if (this.value === "grouped") transitionGrouped();
        else transitionStacked();
      }

function transitionGrouped() {
        y.domain([0, yMax]);
        g.select(".stacked_axis").remove();
       	g.append("g")
        .attr("class", "grouped_axis")
          .call(d3.axisLeft(y)
              .tickSize(0)
              .tickPadding(6));

rect.transition()
            .duration(800)
            .delay(function(d, i) { return i * 10; })
            .attr("x", function(d, i) {return x(companies[i%companies.length]) + x.bandwidth() / measures_by_date.length *   this.parentNode.__data__.key; })
            .attr("width", x.bandwidth() / measures_by_date.length)
            .transition()
            .attr("y", function(d) { return y(d[1] - d[0]); })
            .attr("height", function(d) { return y(0) - y(d[1] - d[0]); });
      }

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