JSFiddle - React, Tailwind, and code Playground

by Javier Sosa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<form>

</form>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

JavaScript

var n = 3, // number of layers
  m = 1;
var layers = [
  [{
    'x0': 0,
    'x': 70,
    'y': 0
  }],
  [{
    'x0': 70,
    'x': 20,
    'y': 0
  }],
  [{
    'x0': 90,
    'x': 10,
    'y': 0
  }]
]

  xStackMax = d3.max(layers, function(layer) {
    return d3.max(layer, function(d) {
      return d.x0 + d.x;
    });
  });

var width = 150,
  height = 50;


var scaleX = d3.scale.linear()
  .domain([0, xStackMax])
  .range([0, width]);

var colors = ["#4e86d0", "#c2d4ea", "#f59c51"];

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")

var layer = svg.selectAll(".layer")
  .data(layers)
  .enter().append("g")
  .attr("class", "layer")
  .style("fill", function(d, i) {
    return colors[i];
  });

var rect = layer.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter().append("rect")
  .attr("y", 0)
  .attr("x", 0)
  .attr("height", height)
  .attr("width", 0);

rect.transition()  
  .attr("x", function(d) {
    return scaleX(d.x0);
  })
  .attr("width", function(d) {
    return scaleX(d.x0 + d.x) - scaleX(d.x0);
  });

svg.append("g")
  .attr("transform", "translate(0%,50%")