JSFiddle - React, Tailwind, and code Playground

by Abhishek Hingu

HTML

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

CSS

.node {
  cursor: pointer;
  
}
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.node text {
  font: 10px sans-serif;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

JavaScript

var pubs =
{
    "name": "root",
    "children": [
        {
            "name": "Goal1","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal2","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal3","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal4","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal5","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal5","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal6","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal7","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal8","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal9","children": [
                {"name": "Primary","children": [
                    {"name": "Secondary"},
                ]}
            ]
        },
        {
            "name": "Goal10","children": [
             ...