Force-Directed Tree
Force Directed Tree is a special kind of chart used to display of multi-item data related in hierarchical, linear or mixed way, as a series of linked bubbles.
Related tutorials
Demo source
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 550px;
max-width: 100%;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/hierarchy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create wrapper container
var container = root.container.children.push(am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
var series = container.children.push(am5hierarchy.ForceDirected.new(root, {
singleBranchOnly: false,
downDepth: 1,
initialDepth: 2,
valueField: "value",
categoryField: "name",
childDataField: "children",
centerStrength: 0.5
}));
// Generate and set data
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
var maxLevels = 2;
var maxNodes = 5;
var maxValue = 100;
var data = {
name: "Root",
children: []
}
generateLevel(data, "", 0);
series.data.setAll([data]);
series.set("selectedDataItem", series.dataItems[0]);
function generateLevel(data, name, level) {
for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
var child;
if (level < maxLevels) {
child = {
name: nodeName + level
}
if (level > 0 && Math.random() < 0.5) {
child.value = Math.round(Math.random() * maxValue);
}
else {
child.children = [];
generateLevel(child, nodeName + i, level + 1)
}
}
else {
child = {
name: name + i,
value: Math.round(Math.random() * maxValue)
}
}
data.children.push(child);
}
level++;
return data;
}
// Make stuff animate on load
series.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>