JSFiddle - React, Tailwind, and code Playground

by Fallain

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="chart"></div>

CSS

.node {
  font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #bbb;
}
 
.node:hover {
  fill: #000;
}
 
.link {
  stroke: steelblue;
  stroke-opacity: .4;
  fill: none;
  pointer-events: none;
}
 
.node:hover,
.node--source,
.node--target {
  font-weight: 700;
}
 
.node--source {
  fill: #2ca02c;
}
 
.node--target {
  fill: #d62728;
}
 
.link--source,
.link--target {
  stroke-opacity: 1;
  stroke-width: 2px;
}
 
.link--source {
  stroke: #d62728;
}
 
.link--target {
  stroke: #2ca02c;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

JavaScript

var flaredata = [
{"name":"flare.analytics.A","size":3938,"imports":["flare.analytics.B","flare.analytics.C"]},
{"name":"flare.analytics.B","size":3812,"imports":["flare.analytics.C","flare.analytics.D"]},
{"name":"flare.analytics.C","size":3812,"imports":["flare.analytics.D","flare.analytics.E"]},
{"name":"flare.analytics.D","size":743, "imports":["flare.analytics.E","flare.analytics.F"]},
{"name":"flare.analytics.E","size":3534,"imports":["flare.analytics.F","flare.analytics.G"]},
{"name":"flare.analytics.F","size":5731,"imports":["flare.analytics.G","flare.analytics.H"]},
{"name":"flare.analytics.G","size":7840,"imports":["flare.analytics.H","flare.analytics.I"]},
{"name":"flare.analytics.H","size":5914,"imports":["flare.analytics.I","flare.analytics.A"]},
{"name":"flare.analytics.I","size":3416,"imports":["flare.analytics.B","flare.analytics.A"]}

];

var diameter = 400,
    radius = diameter / 2,
    innerRadius = radius - 120;

var cluster = d3.layout.cluster()
    .size([360, innerRadius])
    .sort(null)
    .value(function(d) { return d.size; });

var bundle = d3.layout.bundle();

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });

var svg = d3.select("#chart").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

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

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  //.html(function(d, i) { //debugger;
  //  return "<strong>Frequency:</strong> <span style='color:red'>" //+ d3.select("text").text() +     "</span>";
  //     + d[i].name +     "</span>";
  //})

svg.call(tip);

var nodes = cluster.nodes(packageHierarchy(flaredata));
var links = packageImports(nodes);

link = link
      .data(bundle(links))
   ...