JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div id=tree></div>

CSS

html{
    font: 10px sans-serif;
}

svg{
    border: 1px solid silver;
}

.node{
    cursor: pointer;
}

.node circle{
    stroke: steelblue;
    stroke-width: 1.5px;
}

.link{
    fill: none;
    stroke: lightgray;
    stroke-width: 1.5px;
}

JavaScript

var json = 
{
    "name": "Warhammer",
    "type": "game",
    "children": [
        {
            "name": "Empire",
            "type": "army",
            "children": [
                {
                    "name": "Lords",
                    "type": "section",
                    "children": [
                        {"name": "Elector Count"},
                        {"name": "Grand Master"},
                        {"name": "Wizard Lord"}
                    ]
                },
                {
                    "name": "Heroes",
                    "type": "section",
                    "children": [
                        {"name": "Captain"},
                        {"name": "Engineer"},
                        {"name": "Battle Wizard"},
                        {"name": "Warrior Priest"}
                    ]
                },
                {
                    "name": "Core",
                    "type": "section",
                    "children": [
                        {"name": "Halleberdier"},
                        {"name": "Spearman"},
                        {"name": "Swordsman"},
                        {"name": "Handgunner"},
                        {"name": "Free Companies"},
                        {"name": "Archer"},
                        {"name": "Crossbowman"},
                        {"name": "Knight"},
                        {"name": "White Wolf"}
                    ]
                },
                {
                    "name": "Special",
                    "type": "section",
                    "children": [
                        {"name": "Greatsword"},
                        {"name": "Pistolier"},
                        {"name": "Great Cannon"},
                        {"name": "Mortar"}
                    ]
                },
                {
                    "name": "Rare",
                    "type": "section",
                    "children": [
                        {"name": "Helblaster"},
                ...