JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

CSS

.node circle {
    cursor: pointer;
    stroke: #3182bd;
    stroke-width: 1.5px;
}
.node text {
    font: 10px sans-serif;
    pointer-events: none;
    text-anchor: middle;
}
line.link {
    fill: none;
    stroke: #9ecae1;
    stroke-width: 1.5px;
}

JavaScript

var width = 960,
    height = 500,
    root;

var force = d3.layout.force()
    .linkDistance(80)
    .charge(-120)
    .gravity(.05)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");
var root = {
    "name": "flare",
    type: "red",
        "children": [{
        "name": "analytics",
        type: "blue",
            "children": [{
            "name": "cluster",
                "type": "red",
                "children": [{
                "name": "AgglomerativeCluster",
                    "type": "red",
                    "size": 3938
            }, {
                "name": "CommunityStructure",
                    "type": "red",
                    "size": 3812
            }, {
                "name": "HierarchicalCluster",
                    "type": "green",
                    "size": 6714
            }, {
                "name": "MergeEdge",
                    "type": "blue",
                    "size": 743
            }]
        }, {
            "name": "graph",
                "children": [{
                "name": "BetweennessCentrality",
                    "type": "red",
                    "size": 3534
            }, {
                "name": "LinkDistance",
                    "type": "red",
                    "size": 5731
            }, {
                "name": "MaxFlowMinCut",
                    "type": "red",
                    "size": 7840
            }, {
                "name": "ShortestPaths",
                    "type": "blue",
                    "size": 5914
            }, {
                "name": "SpanningTree",
                    "type": "red",
                    "size": 3416
            }]
        }, {
            "name": "optimization",
                "children": [{
                "name": "AspectRatioBanker",
                    "type": "red",
             ...