Circular Hierarchical Chart

by kelvinau

HTML

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

CSS

.node {
  font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #bbb;
}

.node:hover {
  fill: #000;
}

.link {
  stroke: steelblue;
  stroke-opacity: 0.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;
}

JavaScript

var classes = [{
  "name": "flare.analytics.cluster.AgglomerativeCluster",
  "size": 3938,
  "imports": ["flare.animate.Transitioner", "flare.vis.data.DataList", "flare.util.math.IMatrix", "flare.analytics.cluster.MergeEdge", "flare.analytics.cluster.HierarchicalCluster", "flare.vis.data.Data"]
}, {
  "name": "flare.analytics.cluster.CommunityStructure",
  "size": 3812,
  "imports": ["flare.analytics.cluster.HierarchicalCluster", "flare.animate.Transitioner", "flare.vis.data.DataList", "flare.analytics.cluster.MergeEdge", "flare.util.math.IMatrix"]
}, {
  "name": "flare.analytics.cluster.HierarchicalCluster",
  "size": 6714,
  "imports": ["flare.vis.data.EdgeSprite", "flare.vis.data.NodeSprite", "flare.vis.data.DataList", "flare.vis.data.Tree", "flare.util.Arrays", "flare.analytics.cluster.MergeEdge", "flare.util.Sort", "flare.vis.operator.Operator", "flare.util.Property", "flare.vis.data.Data"]
}, {
  "name": "flare.analytics.cluster.MergeEdge",
  "size": 743,
  "imports": []
}, {
  "name": "flare.analytics.graph.BetweennessCentrality",
  "size": 3534,
  "imports": ["flare.animate.Transitioner", "flare.vis.data.NodeSprite", "flare.vis.data.DataList", "flare.util.Arrays", "flare.vis.data.Data", "flare.util.Property", "flare.vis.operator.Operator"]
}, {
  "name": "flare.analytics.graph.LinkDistance",
  "size": 5731,
  "imports": ["flare.animate.Transitioner", "flare.vis.data.NodeSprite", "flare.vis.data.EdgeSprite", "flare.analytics.graph.ShortestPaths", "flare.vis.data.Data", "flare.util.Property", "flare.vis.operator.Operator"]
}, {
  "name": "flare.analytics.graph.MaxFlowMinCut",
  "size": 7840,
  "imports": ["flare.animate.Transitioner", "flare.vis.data.NodeSprite", "flare.vis.data.EdgeSprite", "flare.vis.data.Data", "flare.util.Property", "flare.vis.operator.Operator"]
}, {
  "name": "flare.analytics.graph.ShortestPaths",
  "size": 5914,
  "imports": ["flare.vis.data.EdgeSprite", "flare.vis.data.NodeSprite", "flare.animate.Transitioner",...