Toggleable d3 chord
by KgomDr
HTML
<script src="https://d3js.org/d3.v5.min.js"></script>
Toggleable Chord Graph!
JavaScript
// create the svg area
const width = 954;
const height = 954;
d3.select(document).on('keydown', console.log)
let svg = d3.select("body")
.append("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr("font-size", 12)
.attr("font-family", "sans-serif")
.style("width", width)
.style("height", height)
.style("overflow", "visible")
.append("g")
// create input data: a square matrix that provides flow between entities
const raw_data = [
{
"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",...