JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://rawgithub.com/novus/nvd3/master/lib/d3.v2.js"></script>
<script src="https://rawgithub.com/novus/nvd3/master/nv.d3.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/novus/nvd3/master/src/nv.d3.css">
<body>
<div id='processing_tab'>
</div>
</body>20

CSS

/*
#chart svg {
    width: 600px;
    height: 400px;
}
*/

JavaScript

//$(document).ready(function() {
  buildPageElements();
  visualizeData(data()); 
//});

function buildPageElements() {
  $('#processing_tab').append(
      '<div id="chart">' +
      '<svg></svg>' +
      '</div>'
  );
}

function visualizeData(data) {  
  nv.addGraph(function() {
     var width = 600, height=400;
    chart = nv.models.multiBarChart()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; })
      .color(['#aec7e8', '#7b94b5', '#486192'])
      .stacked(true)
      //.margin({top:150,right:150,bottom:150,left:150})
      .width(width)
      .height(height);

    chart.multibar
         .hideable(false);

    chart.xAxis
         .showMaxMin(true)
         .tickFormat(d3.format(',f'));

    chart.yAxis
         .tickFormat(d3.format(',.1f'));

    d3.select('#chart svg')
      .datum(data)
      .transition().duration(500).call(chart) .attr('width', width).attr('height', height);

    nv.utils.windowResize(chart.update);

    return chart;
  });
}

function data() {
  var data = 
    stream_layers(3,10+Math.random()*100,1).map(function(data, i) {
      return {
        key: 'Stream ' + i,
        values: data
      };
    });
  
  return data;
}

/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random()*1000000;
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 *...