JSFiddle - React, Tailwind, and code Playground

by A B Jones

HTML

<div id="chart"></div>

JavaScript

var lvl1, gEnter, data, lvl2, gEnter2, data2;

data = [{
    "name": "home",
    "link": "http://pmd3.co.uk",
    "level": "one",
    "width": 80,
    "x": 0,
    "parent": ""
  }, {
    "name": "plan",
    "link": "http://pmd3.co.uk",
    "level": "one",
    "width": 80,
    "x": 90,
    "parent": ""
  }, {
    "name": "risk",
    "link": "http://pmd3.co.uk",
    "level": "one",
    "width": 80,
    "x": 180,
    "parent": ""
  }, {
    "name": "baseline",
    "link": "http://pmd3.co.uk/d3/baseline.html",
    "level": "two",
    "width": 80,
    "x": 90,
    "parent": "plan"
  }, {
    "name": "plan1",
    "link": "http://buyingcircles.co.uk/",
    "level": "two",
    "width": 80,
    "x": 90,
    "parent": "plan"
  }, {
    "name": "plan2",
    "link": "http://pmd3.co.uk/d3/critical.html",
    "level": "two",
    "width": 80,
    "x": 90,
    "parent": "plan"
  }, {
    "name": "risk1",
    "link": "http://pmd3.co.uk/d3/LiveRisk.aspx",
    "level": "two",
    "width": 80,
    "x": 180,
    "parent": "risk"
  }, {
    "name": "risk2",
    "link": "http://pmd3.co.uk/d3/risk.aspx",
    "level": "two",
    "width": 80,
    "x": 180,
    "parent": "risk"
  }


];


data1 = data.filter(function(d) {
  return d.level === "one";
});

var margin = {
  top: 20,
  right: 15,
  bottom: 15,
  left: 100
};

var width = 960,
  height = 500;

svg = d3.select("#chart")
  .append('svg')
  .attr('transform', 'translate(' + margin.left + ', ' + margin.right + ')')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .style("border", "1px solid black")
  .attr('class', 'chart');


lvl1 = svg.selectAll(".lvl1")
  .data(data1);

gEnter = lvl1.enter()
  .append("g")
  .attr("class", "lvl1")
  .attr("fill", "pink")
  .attr("transform", function(d, i) {
    return "translate(" + d.x + "," + 0 + ")";
  });

gEnter.append("text")
  .text(function(d) {
    return d.name;
  })
  .attr("fill", "black")
  .attr('transform', 'translate('...