Radial tree / Circular dendrogram / Hyperbolic tree

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/KVV5HDT6

<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <!--
			Point ZingChart to modules folder so ZingChart
			can automatically grab the CSV module
		-->
  <script nonce="undefined">
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
  </script>
  <!-- load image data -->
  <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
  <style>
    .chart--container {
      min-height: 900px;
      overflow: auto;
      position: relative;
      height: 100%;
      width: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">

  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    window.addEventListener('load', () => {
      // DEFINE DATA
      // -----------------------------
      let chartData = [{
          id: 'primates',
          parent: '',
          name: 'Primates',
          style: {
            backgroundColor: '#828282'
          }
        },
        {
          parent: 'primates',
          id: 'cercopithecidae',
          name: 'Cercopithecidae',
          value: 53
        },
        {
          parent: 'primates',
          id: 'lemuridae',
          name: 'Lemuridae',
          value: 14
        },
        {
          parent: 'primates',
          id: 'atelidae',
          name: 'Atelidae',
          value: 14
        },
        {
          parent: 'primates',
          id: 'callitrichidae',
          name: 'Callitrichidae',
          value: 13
        },
        {
          parent: 'primates',
          id: 'cebidae',
          name: 'Cebidae',
          value: 7
        },
        {
          parent: 'primates',
          id: 'hominidae',
          name: 'Hominidae',
          value: 6
        },
        {
          parent: 'primates',
          id: 'daubentoniidae',
          name: 'Daubentoniidae',
          value: 1
        },
        {
          parent: 'primates',
          id: 'tarsiidae',
          name: 'Tarsiidae',
          value: 4
        },
        {
          parent: 'primates',
          id: 'hylobatidae',
          name: 'Hylobatidae',
          value: 5
        },
        {
          parent: 'primates',
          id: 'galagidae',
          name: 'Galagidae',
          value: 1
        },
        {
          parent: 'primates',
          id: 'lorisidae',
          name: 'Lorisidae',
          value: 4
        },
        {
          parent: 'primates',
          id: 'cheirogaleidae',
          name: 'Cheirogaleidae',
          value: 3
        },
        {
          parent: 'primates',
          id: 'lepilemuridae',
          name: 'Lepilemuridae',
          value: 1
        },
        {
          parent: 'primates',
          id: 'pitheciidae',
          name: 'Pitheciidae',
          value: 2
        },
        {
          parent: 'primates',
          id: 'indriidae',
          name: 'Indriidae',
          value: 7
        },
        {
          parent: 'primates',
          id: 'aotidae',
          name: 'Aotidae',
          value: 1
        },
        {
          parent: 'tarsiidae',
          id: 'carlito',
          name: 'Carlito',
          value: 1,
        },
        {
          parent: 'tarsiidae',
          id: 'tarsius',
          name: 'Tarsius',
          value: 2,
        },
        {
          parent: 'aotidae',
          id: 'aotus',
          name: 'Aotus',
          value: 1
        },
        {
          parent: 'atelidae',
          id: 'ateles',
          name: 'Ateles',
          value: 8
        },
        {
          parent: 'atelidae',
          id: 'oreonax',
          name: 'Oreonax',
          value: 1
        },
        {
          parent: 'atelidae',
          id: 'alouatta',
          name: 'Alouatta',
          value: 4
        },
        {
          parent: 'atelidae',
          id: 'brachyteles',
          name: 'Brachyteles',
          value: 1
        },
        {
          parent: 'callitrichidae',
          id: 'saguinus',
          name: 'Saguinus',
          value: 5
        },
        {
          parent: 'callitrichidae',
          id: 'leontopithecus',
          name: 'Leontopithecus',
          value: 3
        },
        {
          parent: 'callitrichidae',
          id: 'cebuella',
          name: 'Cebuella',
          value: 1
        },
        {
          parent: 'callitrichidae',
          id: 'callithrix',
          name: 'Callithrix',
          value: 3
        },
        {
          parent: 'callitrichidae',
          id: 'mico',
          name: 'Mico',
          value: 1
        },
        {
          parent: 'cebidae',
          id: 'cebus',
          name: 'Cebus',
          value: 2
        },
        {
          parent: 'cebidae',
          id: 'saimiri',
          name: 'Saimiri',
          value: 2
        },
        {
          parent: 'cebidae',
          id: 'sapajus',
          name: 'Sapajus',
          value: 3
        },
        {
          parent: 'cercopithecidae',
          id: 'Rrhinopithecus',
          name: 'Rhinopithecus',
          value: 3
        },
        {
          parent: 'cercopithecidae',
          id: 'macaca',
          name: 'Macaca',
          value: 15
        },
        {
          parent: 'cercopithecidae',
          id: 'trachypithecus',
          name: 'Trachypithecus',
          value: 7
        },
        {
          parent: 'cercopithecidae',
          id: 'nasalis',
          name: 'Nasalis',
          value: 1
        },
        {
          parent: 'cercopithecidae',
          id: 'chlorocebus',
          name: 'Chlorocebus',
          value: 2
        },
        {
          parent: 'cercopithecidae',
          id: 'cercopithecus',
          name: 'Cercopithecus',
          value: 9
        },
        {
          parent: 'cercopithecidae',
          id: 'papio',
          name: 'Papio',
          value: 5
        },
        {
          parent: 'cercopithecidae',
          id: 'mandrillus',
          name: 'Mandrillus',
          value: 2
        },
        {
          parent: 'cercopithecidae',
          id: 'theropithecus',
          name: 'Theropithecus',
          value: 1
        },
        {
          parent: 'cercopithecidae',
          id: 'colobus',
          name: 'Colobus',
          value: 3
        },
        {
          parent: 'cercopithecidae',
          id: 'erythrocebus',
          name: 'Erythrocebus',
          value: 1
        },
        {
          parent: 'cercopithecidae',
          id: 'cercocebus',
          name: 'Cercocebus',
          value: 1
        },
        {
          parent: 'cercopithecidae',
          id: 'miopithecus',
          name: 'Miopithecus',
          value: 1
        },
        {
          parent: 'cercopithecidae',
          id: 'pygathrix',
          name: 'Pygathrix',
          value: 1
        },
        {
          parent: 'cercopithecidae',
          id: 'semnopithecus',
          name: 'Semnopithecus',
          value: 2
        },
        {
          parent: 'cercopithecidae',
          id: 'allenopithecus',
          name: 'Allenopithecus',
          value: 1
        },
        {
          parent: 'cheirogaleidae',
          id: 'cheirogaleus',
          name: 'Cheirogaleus',
          value: 1
        },
        {
          parent: 'cheirogaleidae',
          id: 'microcebus',
          name: 'Microcebus',
          value: 2
        },
        {
          parent: 'daubentoniidae',
          id: 'daubentonia',
          name: 'Daubentonia',
          value: 1
        },
        {
          parent: 'galagidae',
          id: 'galago',
          name: 'Galago',
          value: 1
        },
        {
          parent: 'hominidae',
          id: 'gorilla',
          name: 'Gorilla',
          value: 2
        },
        {
          parent: 'hominidae',
          id: 'pongo',
          name: 'Pongo',
          value: 2
        },
        {
          parent: 'hominidae',
          id: 'pan',
          name: 'Pan',
          value: 2
        },
        {
          parent: 'hylobatidae',
          id: 'hylobates',
          name: 'Hylobates',
          value: 3
        },
        {
          parent: 'hylobatidae',
          id: 'symphalangus',
          name: 'Symphalangus',
          value: 1
        },
        {
          parent: 'hylobatidae',
          id: 'nomascus',
          name: 'Nomascus',
          value: 1
        },
        {
          parent: 'indriidae',
          id: 'propithecus',
          name: 'Propithecus',
          value: 5
        },
        {
          parent: 'indriidae',
          id: 'indri',
          name: 'Indri',
          value: 1
        },
        {
          parent: 'indriidae',
          id: 'avahi',
          name: 'Avahi',
          value: 1
        },
        {
          parent: 'lemuridae',
          id: 'lemur',
          name: 'Lemur',
          value: 2
        },
        {
          parent: 'lemuridae',
          id: 'hapalemur',
          name: 'Hapalemur',
          value: 1
        },
        {
          parent: 'lemuridae',
          id: 'eulemur',
          name: 'Eulemur',
          value: 8
        },
        {
          parent: 'lemuridae',
          id: 'prolemur',
          name: 'Prolemur',
          value: 1
        },
        {
          parent: 'lemuridae',
          id: 'varecia',
          name: 'Varecia',
          value: 2
        },
        {
          parent: 'lepilemuridae',
          id: 'lepilemur',
          name: 'Lepilemur',
          value: 1
        },
        {
          parent: 'lorisidae',
          id: 'loris',
          name: 'Loris',
          value: 2
        },
        {
          parent: 'lorisidae',
          id: 'nycticebus',
          name: 'Nycticebus',
          value: 1
        },
        {
          parent: 'lorisidae',
          id: 'perodicticus',
          name: 'Perodicticus',
          value: 1
        },
        {
          parent: 'pitheciidae',
          id: 'cacajao',
          name: 'Cacajao',
          value: 1
        },
        {
          parent: 'pitheciidae',
          id: 'pithecia',
          name: 'Pithecia',
          value: 1
        },
      ];
      // CHART CONFIG
      // -----------------------------
      let chartConfig = {
        type: 'tree',
        title: {
          text: 'Organization of the Primates family (Kaggle dataset)',
          fontWeight: 400,
          marginTop: '10px',
        },
        options: {
          refAngle: 180,
          aspect: 'tree-radial',
          progression: 0,
          textAttr: 'name',
          valueAttr: 'value',
          minSize: 4,
          maxSize: 20,
          link: {
            aspect: 'arc'
          },
          node: {
            type: 'circle',
            borderWidth: '0px',
            backgroundColor: '#5975CA',
            hoverState: {
              borderWidth: '2px',
              borderColor: '#000',
              borderAlpha: 1
            },
            label: {
              width: '100px'
            }
          },
          'node[level-0]': {
            backgroundColor: '#5975CA',
            label: {
              visible: true
            },
            size: '5px'
          },
          'node[level-1]': {
            backgroundColor: '#FEA759',
            label: {
              visible: true
            },
          },
          'link[level-0]': {
            aspect: 'arc',
            lineColor: '#FED5AF'
          },
          weightedLinks: 0, // set to 1 to disable collapsible nodes
        },
        series: chartData
      };
      // RENDER CHARTS
      // -----------------------------
      zingchart.render({
        id: 'myChart',
        height: '100%',
        output: 'svg',
        data: chartConfig
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <!--
			Point ZingChart to modules folder so ZingChart
			can automatically grab the CSV module
		-->
    <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";</script>
  	<!-- load image data -->
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/people.js'></script>
  </head>
  <body class="zc-body">

    <!-- CHART CONTAINER -->
    <div id="myChart" class="chart--container">
      <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    </div>

  </body>
</html>

window.addEventListener('load', () => {
  // DEFINE DATA
  // -----------------------------
  let chartData = [{
      id: 'primates',
      parent: '',
      name: 'Primates',
      style: {
        backgroundColor: '#828282'
      }
    },
    {
      parent: 'primates',
      id: 'cercopithecidae',
      name: 'Cercopithecidae',
      value: 53
    },
    {
      parent: 'primates',
      id: 'lemuridae',
      name: 'Lemuridae',
      value: 14
    },
    {
      parent: 'primates',
      id: 'atelidae',
      name: 'Atelidae',
      value: 14
    },
    {
      parent: 'primates',
      id: 'callitrichidae',
      name: 'Callitrichidae',
      value: 13
    },
    {
      parent: 'primates',
      id: 'cebidae',
      name: 'Cebidae',
      value: 7
    },
    {
      parent: 'primates',
      id: 'hominidae',
      name: 'Hominidae',
      value: 6
    },
    {
      parent: 'primates',
      id: 'daubentoniidae',
      name: 'Daubentoniidae',
      value: 1
    },
    {
      parent: 'primates',
      id: 'tarsiidae',
      name: 'Tarsiidae',
      value: 4
    },
    {
      parent: 'primates',
      id: 'hylobatidae',
      name: 'Hylobatidae',
      value: 5
    },
    {
      parent: 'primates',
      id: 'galagidae',
      name: 'Galagidae',
      value: 1
    },
    {
      parent: 'primates',
      id: 'lorisidae',
      name: 'Lorisidae',
      value: 4
    },
    {
      parent: 'primates',
      id: 'cheirogaleidae',
      name: 'Cheirogaleidae',
      value: 3
    },
    {
      parent: 'primates',
      id: 'lepilemuridae',
      name: 'Lepilemuridae',
      value: 1
    },
    {
      parent: 'primates',
      id: 'pitheciidae',
      name: 'Pitheciidae',
      value: 2
    },
    {
      parent: 'primates',
      id: 'indriidae',
      name: 'Indriidae',
      value: 7
    },
    {
      parent: 'primates',
      id: 'aotidae',
      name: 'Aotidae',
      value: 1
    },
    {
      parent: 'tarsiidae',
      id: 'carlito',
      name: 'Carlito',
      value: 1,
    },
    {
      parent: 'tarsiidae',
      id: 'tarsius',
      name: 'Tarsius',
      value: 2,
    },
    {
      parent: 'aotidae',
      id: 'aotus',
      name: 'Aotus',
      value: 1
    },
    {
      parent: 'atelidae',
      id: 'ateles',
      name: 'Ateles',
      value: 8
    },
    {
      parent: 'atelidae',
      id: 'oreonax',
      name: 'Oreonax',
      value: 1
    },
    {
      parent: 'atelidae',
      id: 'alouatta',
      name: 'Alouatta',
      value: 4
    },
    {
      parent: 'atelidae',
      id: 'brachyteles',
      name: 'Brachyteles',
      value: 1
    },
    {
      parent: 'callitrichidae',
      id: 'saguinus',
      name: 'Saguinus',
      value: 5
    },
    {
      parent: 'callitrichidae',
      id: 'leontopithecus',
      name: 'Leontopithecus',
      value: 3
    },
    {
      parent: 'callitrichidae',
      id: 'cebuella',
      name: 'Cebuella',
      value: 1
    },
    {
      parent: 'callitrichidae',
      id: 'callithrix',
      name: 'Callithrix',
      value: 3
    },
    {
      parent: 'callitrichidae',
      id: 'mico',
      name: 'Mico',
      value: 1
    },
    {
      parent: 'cebidae',
      id: 'cebus',
      name: 'Cebus',
      value: 2
    },
    {
      parent: 'cebidae',
      id: 'saimiri',
      name: 'Saimiri',
      value: 2
    },
    {
      parent: 'cebidae',
      id: 'sapajus',
      name: 'Sapajus',
      value: 3
    },
    {
      parent: 'cercopithecidae',
      id: 'Rrhinopithecus',
      name: 'Rhinopithecus',
      value: 3
    },
    {
      parent: 'cercopithecidae',
      id: 'macaca',
      name: 'Macaca',
      value: 15
    },
    {
      parent: 'cercopithecidae',
      id: 'trachypithecus',
      name: 'Trachypithecus',
      value: 7
    },
    {
      parent: 'cercopithecidae',
      id: 'nasalis',
      name: 'Nasalis',
      value: 1
    },
    {
      parent: 'cercopithecidae',
      id: 'chlorocebus',
      name: 'Chlorocebus',
      value: 2
    },
    {
      parent: 'cercopithecidae',
      id: 'cercopithecus',
      name: 'Cercopithecus',
      value: 9
    },
    {
      parent: 'cercopithecidae',
      id: 'papio',
      name: 'Papio',
      value: 5
    },
    {
      parent: 'cercopithecidae',
      id: 'mandrillus',
      name: 'Mandrillus',
      value: 2
    },
    {
      parent: 'cercopithecidae',
      id: 'theropithecus',
      name: 'Theropithecus',
      value: 1
    },
    {
      parent: 'cercopithecidae',
      id: 'colobus',
      name: 'Colobus',
      value: 3
    },
    {
      parent: 'cercopithecidae',
      id: 'erythrocebus',
      name: 'Erythrocebus',
      value: 1
    },
    {
      parent: 'cercopithecidae',
      id: 'cercocebus',
      name: 'Cercocebus',
      value: 1
    },
    {
      parent: 'cercopithecidae',
      id: 'miopithecus',
      name: 'Miopithecus',
      value: 1
    },
    {
      parent: 'cercopithecidae',
      id: 'pygathrix',
      name: 'Pygathrix',
      value: 1
    },
    {
      parent: 'cercopithecidae',
      id: 'semnopithecus',
      name: 'Semnopithecus',
      value: 2
    },
    {
      parent: 'cercopithecidae',
      id: 'allenopithecus',
      name: 'Allenopithecus',
      value: 1
    },
    {
      parent: 'cheirogaleidae',
      id: 'cheirogaleus',
      name: 'Cheirogaleus',
      value: 1
    },
    {
      parent: 'cheirogaleidae',
      id: 'microcebus',
      name: 'Microcebus',
      value: 2
    },
    {
      parent: 'daubentoniidae',
      id: 'daubentonia',
      name: 'Daubentonia',
      value: 1
    },
    {
      parent: 'galagidae',
      id: 'galago',
      name: 'Galago',
      value: 1
    },
    {
      parent: 'hominidae',
      id: 'gorilla',
      name: 'Gorilla',
      value: 2
    },
    {
      parent: 'hominidae',
      id: 'pongo',
      name: 'Pongo',
      value: 2
    },
    {
      parent: 'hominidae',
      id: 'pan',
      name: 'Pan',
      value: 2
    },
    {
      parent: 'hylobatidae',
      id: 'hylobates',
      name: 'Hylobates',
      value: 3
    },
    {
      parent: 'hylobatidae',
      id: 'symphalangus',
      name: 'Symphalangus',
      value: 1
    },
    {
      parent: 'hylobatidae',
      id: 'nomascus',
      name: 'Nomascus',
      value: 1
    },
    {
      parent: 'indriidae',
      id: 'propithecus',
      name: 'Propithecus',
      value: 5
    },
    {
      parent: 'indriidae',
      id: 'indri',
      name: 'Indri',
      value: 1
    },
    {
      parent: 'indriidae',
      id: 'avahi',
      name: 'Avahi',
      value: 1
    },
    {
      parent: 'lemuridae',
      id: 'lemur',
      name: 'Lemur',
      value: 2
    },
    {
      parent: 'lemuridae',
      id: 'hapalemur',
      name: 'Hapalemur',
      value: 1
    },
    {
      parent: 'lemuridae',
      id: 'eulemur',
      name: 'Eulemur',
      value: 8
    },
    {
      parent: 'lemuridae',
      id: 'prolemur',
      name: 'Prolemur',
      value: 1
    },
    {
      parent: 'lemuridae',
      id: 'varecia',
      name: 'Varecia',
      value: 2
    },
    {
      parent: 'lepilemuridae',
      id: 'lepilemur',
      name: 'Lepilemur',
      value: 1
    },
    {
      parent: 'lorisidae',
      id: 'loris',
      name: 'Loris',
      value: 2
    },
    {
      parent: 'lorisidae',
      id: 'nycticebus',
      name: 'Nycticebus',
      value: 1
    },
    {
      parent: 'lorisidae',
      id: 'perodicticus',
      name: 'Perodicticus',
      value: 1
    },
    {
      parent: 'pitheciidae',
      id: 'cacajao',
      name: 'Cacajao',
      value: 1
    },
    {
      parent: 'pitheciidae',
      id: 'pithecia',
      name: 'Pithecia',
      value: 1
    },
  ];
  // CHART CONFIG
  // -----------------------------
  let chartConfig = {
    type: 'tree',
    title: {
      text: 'Organization of the Primates family (Kaggle dataset)',
      fontWeight: 400,
      marginTop: '10px',
    },
    options: {
      refAngle: 180,
      aspect: 'tree-radial',
      progression: 0,
      textAttr: 'name',
      valueAttr: 'value',
      minSize: 4,
      maxSize: 20,
      link: {
        aspect: 'arc'
      },
      node: {
        type: 'circle',
        borderWidth: '0px',
        backgroundColor: '#5975CA',
        hoverState: {
          borderWidth: '2px',
          borderColor: '#000',
          borderAlpha: 1
        },
        label: {
          width: '100px'
        }
      },
      'node[level-0]': {
        backgroundColor: '#5975CA',
        label: {
          visible: true
        },
        size: '5px'
      },
      'node[level-1]': {
        backgroundColor: '#FEA759',
        label: {
          visible: true
        },
      },
      'link[level-0]': {
        aspect: 'arc',
        lineColor: '#FED5AF'
      },
      weightedLinks: 0, // set to 1 to disable collapsible nodes
    },
    series: chartData
  };
  // RENDER CHARTS
  // -----------------------------
  zingchart.render({
    id: 'myChart',
    height: '100%',
    output: 'svg',
    data: chartConfig
  });
});

.chart--container {
  min-height:900px;
  overflow:auto;
  position:relative;
  height: 100%;
  width: 100%;
}

.zc-ref { display:none; }

A "Rating" type chart related to user feedback 6/281 Sunburst of Fruits and Berries Production

Radial tree / Circular dendrogram / Hyperbolic tree

Related Documentation: