JSFiddle - React, Tailwind, and code Playground

by vivekhegde99

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
Filter: <input type="text" name="filter" id="filter"/>
<button id = 'reset'>Reset Filter</button><br >

CSS

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #000;
  stroke-width: 1.5px;
}

text {
  font-size: 10px;
}

.tooltip {
  position: absolute;
  z-index: 9999;
  visibility: hidden;
  padding: 2px;
  text-align: center;
  width: 150px;
  color: white;
  background-color: #009cdc;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.5)
}

JavaScript

var graph = {
'nodes':[
{'id':'Menu','group':0},
{'id':'Item1','group':1},
{'id':'Item2','group':1},
{'id':'Item3','group':1},
{'id':'Item4','group':1},
{'id':'Item5','group':1},
{'id':'SubItem1_Item1','group':2},
{'id':'SubItem2_Item1','group':2}],
'links':[

{'source':'Menu','target':'Item1','value':1,'type':'A'},
{'source':'Menu','target':'Item2','value':8,'type':'A'},
{'source':'Menu','target':'Item3','value':10,'type':'A'},
{'source':'Menu','target':'Item3','value':1,'type':'A'},
{'source':'Menu','target':'Item4','value':1,'type':'A'},
{'source':'Menu','target':'Item5','value':1,'type':'A'},

/* Item1 is linked to SubItems */
{'source':'Item1','target':'SubItem1_Item1','value':2,'type':'A'},
{'source':'Item1','target':'SubItem2_Item1','value':1,'type':'A'},

/* Interconnected Items */
{'source':'Item5','target':'Item4','value':2,'type':'A'},
{'source':'Item2','target':'Item3','value':1,'type':'A'},
]};


var width = 800;
var height= 500;
var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("body").append("svg")
  .attr("width",width)
  .attr("height",height);
  
var grads = svg.append("defs").selectAll("radialGradient")
    .data(graph.nodes)
    .enter()
    .append("radialGradient")
    .attr("gradientUnits", "objectBoundingBox")
    .attr("cx", 0)
    .attr("fill", function(d) { return color(d.id); })
    .attr("cy", 0)
    .attr("r", "100%")
    .attr("id", function(d, i) { return "grad" + i; });
 
   grads.append("stop")
    .attr("offset", "0%")
    .style("stop-color", "white");
 
   grads.append("stop")
    .attr("offset", "100%")
    .style("stop-color",  function(d) { return color(d.id); });    



var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().distance(200).id(function(d) {
    return d.id;
  }))
  .force("charge", d3.forceManyBody().strength(-1000))
  .force("center", d3.forceCenter(width / 2, height / 2));
  
var g = svg.append("g")
  .attr("class", "everything");
  
  var tooltip =...