JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

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

<svg width="900" height="600"></svg>

CSS

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

.node text {
    font: 8px sans-serif;
    pointer-events: none;
    text-anchor: middle;
}

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

JavaScript

var color = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("svg")
var width = +svg.attr("width");
var height = +svg.attr("height");

var g = svg.append("g").attr("class", "everything");
var link = g.selectAll(".link"),
    node = g.selectAll(".node");

var minSize, maxSize;
var sizeScale = d3.scalePow();

var nodes = [],
    links = [];
var simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody(nodes).strength(-1000))
    .force("link", d3.forceLink(links).distance(200))
    .force("x", d3.forceX())
    .force("y", d3.forceY())
    .alphaTarget(1)
    .on("tick", tick);

var json = {
 "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}
     ]
    }
   ]
  }
 ]
};

initialize();

function load_address(addr, target, callback){
    console.log("load address called");
/*     d3.json("/api/address/" + addr, function(error, json) {
        if (error || json.error) {
            alert("Bad json respnse from API.");
            return;
        }//throw error;
     */        
     		obj = d3.hierarchy(json);
        callback(obj);
   // });
}

function color_classify(d) {
  return d._children ? "#3182bd" // collapsed package
      : d.children ? "#c6dbef" // expanded package
      : "#fd8d3c"; // leaf node
}

function initialize(){
    console.log("Init called");
 ...