Cluster Chart - d3 + ECharts

by gnijuohz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>
<div id="chart" style="width: 800px; height: 600px"></div>

JavaScript

// CSF -> Device -> Country -> Application
// CSF -> Device -> IOC -> Application
var rawData = [{
  "id": "flare",
  "value": ""
}, {
  "id": "flare.analytics",
  "value": ""
}, {
  "id": "flare.analytics.cluster",
  "value": ""
}, {
  "id": "flare.analytics.cluster.AgglomerativeCluster",
  "value": "3938"
}, {
  "id": "flare.analytics.cluster.CommunityStructure",
  "value": "3812"
}, {
  "id": "flare.analytics.cluster.HierarchicalCluster",
  "value": "6714"
}, {
  "id": "flare.analytics.cluster.MergeEdge",
  "value": "743"
}, {
  "id": "flare.analytics.graph",
  "value": ""
}, {
  "id": "flare.analytics.graph.BetweennessCentrality",
  "value": "3534"
}, {
  "id": "flare.analytics.graph.LinkDistance",
  "value": "5731"
}, {
  "id": "flare.analytics.graph.MaxFlowMinCut",
  "value": "7840"
}, {
  "id": "flare.analytics.graph.ShortestPaths",
  "value": "5914"
}, {
  "id": "flare.analytics.graph.SpanningTree",
  "value": "3416"
}, {
  "id": "flare.analytics.optimization",
  "value": ""
}, {
  "id": "flare.analytics.optimization.AspectRatioBanker",
  "value": "7074"
}, {
  "id": "flare.animate",
  "value": ""
}, {
  "id": "flare.animate.Easing",
  "value": "17010"
}, {
  "id": "flare.animate.FunctionSequence",
  "value": "5842"
}, {
  "id": "flare.animate.interpolate",
  "value": ""
}, {
  "id": "flare.animate.interpolate.ArrayInterpolator",
  "value": "1983"
}, {
  "id": "flare.animate.interpolate.ColorInterpolator",
  "value": "2047"
}, {
  "id": "flare.animate.interpolate.DateInterpolator",
  "value": "1375"
}, {
  "id": "flare.animate.interpolate.Interpolator",
  "value": "8746"
}, {
  "id": "flare.animate.interpolate.MatrixInterpolator",
  "value": "2202"
}, {
  "id": "flare.animate.interpolate.NumberInterpolator",
  "value": "1382"
}, {
  "id": "flare.animate.interpolate.ObjectInterpolator",
  "value": "1629"
}, {
  "id": "flare.animate.interpolate.PointInterpolator",
  "value": "1675"
}, {
  "id": "flare.animate.interpolate.RectangleInterpolator",
  "value":...