Animated bar chart transitions

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .axis .domain {
    display: none;
  }

.tick line {
    stroke: #CCC;
  }

rect {
    fill: #65a4e0;
  }
</style>
<svg width="960" height="500">
  <g class="margin">
    <g class="x axis"></g>
    <g class="content"></g>
  </g>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
  var margin = {
    top: 0,
    right: 8,
    bottom: 24,
    left: 8
  };

var bandwidth = 10;
  var gutter = 2;

// Just some random numbers for the charts
  var data = [
    [22, 19, 7, 6, 4],
    [29, 20, 19, 19, 12, 8, 2, 1]
  ];

var index = 0;

var svg = d3.select("svg"),
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

svg.select(".margin").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear().range([0, width]);

var xAxis = d3.axisBottom(x);

var g = svg.select(".content"),
    gX = svg.select(".x.axis");

function update(group) {
    x.domain([0, d3.max(data[group])]);

var t = d3.transition()
        .duration(750)
        .ease(d3.easeCubicOut);

var bar = g.selectAll("rect")
      .data(data[group], function (d, i) { return d + "-" + i; });

bar.exit()
      .transition(t).delay(function (d, i) { return i * 20; })
        .attr("x", function () { return +d3.select(this).attr("width"); })
        .attr("width", 0)
      .remove();

bar.enter().append("rect")
        .attr("y", function (d, i) { return i * (bandwidth + gutter); })
        .attr("height", bandwidth)
      .merge(bar).transition(t).delay(function (d, i) { return 175 + i * 20; })
        .attr("width", function (d) { return x(d); });

gX.transition(t)
        .call(xAxis.tickSize(data[group].length * (bandwidth + gutter) - gutter));
  }

window.setTimeout(function tick() {
    update(index);
    index = (index + 1) % 2;
    window.setTimeout(tick, 2000);
  }, 0);
</script>

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