JSFiddle - React, Tailwind, and code Playground

by Rich Shih

HTML

<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js">

CSS

.axis .domain {
  display: none;
}

JavaScript

var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
  .rangeRound([0, width])
  .paddingInner(0.05)
  .align(0.1);
//https://bl.ocks.org/mbostock/3886208
var y = d3.scaleLinear()
  .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

d3.json("https://api.myjson.com/bins/101171", function(data) {
  var keys = Object.keys(data[0]),
    x_var = keys.splice(0, 1)[0],
    xDom = data.map(function(d) {
      return d[x_var]
    }),
    yMax = d3.max(data, function(d) {
      return d3.max(keys.map(function(_d) {
        return d[_d]
      }));
    }),
    yDom = [0, yMax];

  x.domain(xDom);
  y.domain(yDom).nice();

  g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
    .attr("fill", function(d) {
      return z(d.key);
    })
    .selectAll("rect")
    .data(function(d) {
      return d;
    })
    .enter().append("rect")
    .attr("x", function(d) {
      return x(d.data.State);
    })
    .attr("y", function(d) {
      return y(d[1]);
    })
    .attr("height", function(d) {
      return y(d[0]) - y(d[1]);
    })
    .attr("width", x.bandwidth());





  /*





    g.append("g")
      .selectAll("g")
      .data(d3.stack().keys(keys)(data))
      .enter().append("g")
        .attr("fill", function(d) { return z(d.key); })
      .selectAll("rect")
      .data(function(d) { return d; })
      .enter().append("rect")
        .attr("x", function(d) { return x(d.data.State); })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
        .attr("width", x.bandwidth());

   ...