JSFiddle - React, Tailwind, and code Playground

by rolfsf

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="tree"></div>

CSS

rect {
    fill: #CCC;
    cursor: pointer;
}
.active {
    fill: orange;
    stroke: orange;
}

.activelink {
    fill: none;
    stroke: orange;
    stroke-width: 2.5px;
}

.label {
    fill: white;
    font-family: sans-serif;
    pointer-events: none;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2.5px;
}

JavaScript

var width = 800,
    height = 800,
    boxWidth = 150,
    boxHeight = 20,
    gap = {
        width: 150,
        height: 12
    },
    margin = {
        top: 16,
        right: 16,
        bottom: 16,
        left: 16
    },
    svg;
    
var data = {
    "Nodes": [
        {
            "lvl": 1,
            "name": "Product 1"
        },
        {
            "lvl": 1,
            "name": "Product 2"
        },
        {
            "lvl": 1,
            "name": "Product 3"
        },
        {
            "lvl": 1,
            "name": "Product 4"
        },
        {
            "lvl": 1,
            "name": "Product 5"
        },
        {
            "lvl": 0,
            "name": "Industry 1"
        },
        {
            "lvl": 0,
            "name": "Industry 2"
        },
        {
            "lvl": 0,
            "name": "Industry 3"
        },
        {
            "lvl": 0,
            "name": "Industry 4"
        },
        {
            "lvl": 0,
            "name": "Industry 5"
        },
        {
            "lvl": 2,
            "name": "Size 1"
        },
        {
            "lvl": 2,
            "name": "Size 2"
        },
        {
            "lvl": 2,
            "name": "Size 3"
        },
        {
            "lvl": 2,
            "name": "Size 4"
        },
        {
            "lvl": 2,
            "name": "Size 5"
        }
    ],
    "links": [
        {
            "source": "Industry 1",
            "target": "Product 1"
        },
        {
            "source": "Industry 3",
            "target": "Product 1"
        },
        {
            "source": "Industry 5",
            "target": "Product 1"
        },
        {
            "source": "Industry 2",
            "target": "Product 2"
        },
        {
            "source": "Industry 4",
            "target": "Product 2"
        },
        {
            "source": "Industry 1",
            "target": "Product 3"
        },
        {
            "source": "Industry...