JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

JavaScript

console.log('running');



var VanillaRunOnDomReady = function() {
  console.log('running2');
  var margins = {
    top: 12,
    left: 48,
    right: 24,
    bottom: 24
  };
  var data = [{
    "key": "Nonviolent",
    "cat1": 0.69,
    "cat2": 0.21,
    "cat3": 0.10
  }, {
    "key": "Violent",
    "cat1": 0.53,
    "cat2": 0.29,
    "cat3": 0.18
  }];

  var catnames = {
    cat1: "No mental illness",
    cat2: "Mild mental illness",
    cat3: "Moderate or severe mental illness"
  };

  var svg = d3.select('body')
    .append('svg')
    .attr('width', width + margins.left + margins.right)
    .attr('height', height + margins.top + margins.bottom)
    .append('g')
    .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

  var n = 3, // number of layers
    m = data.length, // number of samples per layer
    stack = d3.layout.stack(),
    labels = data.map(function(d) {
      return d.key;
    }),

    //go through each layer (cat1, cat2 etc, that's the range(n) part)
    //then go through each object in data and pull out that objects's catulation data
    //and put it into an array where x is the index and y is the number
    layers = stack(d3.range(n).map(function(d) {
      var a = [];
      for (var i = 0; i < m; ++i) {
        a[i] = {
          x: i,
          y: data[i]['cat' + (d + 1)]
        };
      }
      return a;
    })),

    //the largest single layer
    yGroupMax = d3.max(layers, function(layer) {
      return d3.max(layer, function(d) {
        return d.y;
      });
    }),
    //the largest stack
    yStackMax = d3.max(layers, function(layer) {
      return d3.max(layer, function(d) {
        return d.y0 + d.y;
      });
    });

  var margin = {
      top: 40,
      right: 10,
      bottom: 20,
      left: 50
    },
    width = 677 - margin.left - margin.right,
    height = 533 - margin.top - margin.bottom;

  var y = d3.scale.ordinal()
    .domain(d3.range(m))
    .rangeRoundBands([2, height], 0.08);

  var x =...