JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "visualization">
	<button id = "button-toggle" style="float : right;">Toggle</button>
 </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

CSS

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  font-weight: bold;

  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 5px;
}

JavaScript

var width = 1200,
    height = 900,
    root = {
        "name": "flare",
        "children": [{
            "name": "analytics",
            "children": [{
                "name": "cluster",
                "children": [{
                    "name": "AgglomerativeCluster",
                    "size": 3938
                }, {
                    "name": "CommunityStructure",
                    "size": 3812
                }, {
                    "name": "HierarchicalCluster",
                    "size": 6714
                }, {
                    "name": "MergeEdge",
                    "size": 743
                }]
            }, {
                "name": "graph",
                "children": [{
                    "name": "BetweennessCentrality",
                    "size": 3534
                }, {
                    "name": "LinkDistance",
                    "size": 5731
                }, {
                    "name": "MaxFlowMinCut",
                    "size": 7840
                }, {
                    "name": "ShortestPaths",
                    "size": 5914
                }, {
                    "name": "SpanningTree",
                    "size": 3416
                }]
            }, {
                "name": "optimization",
                "children": [{
                    "name": "AspectRatioBanker",
                    "size": 7074
                }]
            }]
        }]

    };
var force = d3.layout.force()
    .linkDistance(230) // link distance between the nodes
    .charge(-500) // charge that repel nodes from each other
    .gravity(.05)
    .size([width, height])
    .on("tick", tick);

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

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");
//Fix the position of the nodes and doesnt allow them to move out of the screen
var drag = force.drag().on("dragstart", dragstart);

flatten(root); //to set...