JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

CSS

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: 0.5;
  stroke: #3182bd;
  stroke-width: 1.5px;
}
.node text {
  font: 10px sans-serif;
  pointer-events: none;
}
.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var margin = {top: 30, right: 20, bottom: 30, left: 20},
    width = 960,
    barHeight = 20,
    barWidth = (width - margin.left - margin.right) * 0.8;
var i = 0,
    duration = 400,
    root;
    
// x scale
var xScale = d3.scaleLinear().range([0, barWidth]);

var diagonal = d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; });
var svg = d3.select("body").append("svg")
    .attr("width", width) // + margin.left + margin.right)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("https://gist.githubusercontent.com/mbostock/1093025/raw/b40b9fc5b53b40836ead8aa4b4a17d948b491126/flare.json", function(error, flare) {
  if (error) throw error;
  root = d3.hierarchy(flare);
  root.x0 = 0;
  root.y0 = 0;
  root.children.forEach(function(d){
    d._children = d.children;
    d.children = null;
  });
  update(root);
});
function update(source) {
  // Compute the flattened node list.
  var nodes = root.descendants();
  var height = Math.max(500, nodes.length * barHeight + margin.top + margin.bottom);
  d3.select("svg").transition()
      .duration(duration)
      .attr("height", height);
  d3.select(self.frameElement).transition()
      .duration(duration)
      .style("height", height + "px");
  // Compute the "layout". TODO https://github.com/d3/d3-hierarchy/issues/67
  var index = -1;
  root.eachBefore(function(n) {
    n.x = ++index * barHeight;
    n.y = n.depth * 20;
  });
  // Update the nodes…
  var node = svg.selectAll(".node")
    .data(nodes, function(d) { return d.id || (d.id = ++i); });
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .style("opacity", 0);
  // Enter any new nodes at the parent's previous position.
  nodeEnter.append("rect")
      .attr("y", -barHeight / 2)
      .attr("height", barHeight)
      .attr("width", function(d) {
     ...