<!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>
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
});
});
