Amcharts Force Directed Tree

by Captain_Armorica

HTML

<body>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<div id="chartdiv"></div>
</body>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
  width: 100%;
  height: 600px;
}

JavaScript

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
chart.legend = new am4charts.Legend();

var series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
	
series.data = [

{
  name: 'One',
  color:("#6ab8da"),
  children: [{
    name: '1',

	  children: [{
	
      name: 'Blackberry', value: 1 },
    {
      name: 'Raspberry', value: 1 },
    {
      name: 'Blueberry', value: 1 },
    {
      name: 'Strawberry', value: 1 }] },

  {
    name: '2',
    children: [{
      name: 'Raisin', value: 1 },
    {
      name: 'Prune', value: 1 }] },

  {
    name: '3',
    children: [{
      name: 'Coconut', value: 1 },
    {
      name: 'Cherry', value: 1 },
    {
      name: 'Pomegranate', value: 1 },
    {
      name: 'Pineapple', value: 1 },
    {
      name: 'Grape', value: 1 },
    {
      name: 'Apple', value: 1 },
    {
      name: 'Peach', value: 1 },
    {
      name: 'Pear', value: 1 }] },

  {
    name: '4',
    children: [{
      name: 'Grapefruit', value: 1 },
    {
      name: 'Orange', value: 1 },
    {
      name: 'Lemon', value: 1 },
    {
      name: 'Lime', value: 1 }] }] },


{
  name: 'Two',
  color:("#6872d9"),
  children: [{
    name: 'Visites vistuelles'},

  {
    name: 'Lorem ipsum'}] },

{
  name: 'Three',
  color:("#a267d9"),
  children: [{
    name: 'Papery/Musty',
    children: [{
      name: 'Stale', value: 1 },
    {
      name: 'Cardboard', value: 1 },
    {
      name: 'Papery', value: 1 },
    {
      name: 'Woody', value: 1 },
    {
      name: 'Moldy/Damp', value: 1 },
    {
      name: 'Musty/Dusty', value: 1 },
    {
      name: 'Musty/Earthy', value: 1 },
    {
      name: 'Animalic', value: 1 },
    {
      name: 'Meaty Brothy', value: 1 },
    {
      name: 'Phenolic', value: 1 }] },

  {
    name: 'Chemical',
    children: [{
      name: 'Bitter', value: 1 },
    {
      name: 'Salty', value: 1 },
    {
      name: 'Medicinal', value: 1 },
...