JSFiddle - React, Tailwind, and code Playground

by Steve Pegg

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(' +...