Skip to content

Instantly share code, notes, and snippets.

@petergpython

petergpython/data.json

Last active June 21, 2018 08:27
Show Gist options
  • Save petergpython/bb8a3d709fe691a1180d124f57b15054 to your computer and use it in GitHub Desktop.
Save petergpython/bb8a3d709fe691a1180d124f57b15054 to your computer and use it in GitHub Desktop.
Download ZIP
Banana diversity Tree
Raw
data.json
{
"children": [
{"colorCode" : "Wild color",
"name" : ["Ensete"],
"key" : "Ensete",
"size" : 4},
{"colorCode" : "Wild color",
"name" : ["Musa"],
"key" : "Musa",
"size" : 1542,
"children":[
{"colorCode" : "Wild color",
"name": ["Section_Calimusa"],
"key": "Section_Calimusa",
"size": 42,
"children":[
{"colorCode" : "Wild color",
"name": ["Calimusa_genetic_cluster"],
"key": "Calimusa_genetic_cluster",
"size": 12,
"children": [{"colorCode" : "Wild color",
"name": ["M. beccarii"],
"key": "M. beccarii",
"size": 3},
{"colorCode" : "Wild color",
"name": ["M. borneensis"],
"key": "M. borneensis",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. campestris"],
"key": "M. campestris",
"size": 2},
{"colorCode" : "Wild color",
"name": ["M. coccinea"],
"key": "M. coccinea",
"size": 3},
{"colorCode" : "Wild color",
"name": ["M. monticola"],
"key": "M. monticola",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. violascens"],
"key": "M. violascens",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. viridis"],
"key": "M. viridis",
"size": 1}]
},
{"colorCode" : "Wild color",
"name": ["Australimusa_genetic_cluster"],
"key": "Australimusa_genetic_cluster",
"size": 30,
"children": [{"colorCode" : "Exploration Actions",
"name": ["Fe'i"],
"key": "Fe'i",
"size": 10,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i PNG"],
"key": "Fe'i PNG",
"size": 9},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i FSM"],
"key": "Fe'i FSM",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i FJI"],
"key": "Fe'i FJI",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i PYF"],
"key": "Fe'i PYF",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i USA"],
"key": "Fe'i USA",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i MHL"],
"key": "Fe'i MHL",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i NRU"],
"key": "Fe'i NRU",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i NCL"],
"key": "Fe'i NCL",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i PLW"],
"key": "Fe'i PLW",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i SLB"],
"key": "Fe'i SLB",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i TON"],
"key": "Fe'i TON",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Fe'i TUV"],
"key": "Fe'i TUV",
"size": 0},
{ "colorCode" : "App Actions",
"name": ["Fe'i VUT"],
"key": "Fe'i VUT",
"size": 0}
]},
{"colorCode" : "Wild color",
"name": ["Wild"],
"key": "Wild",
"size": 20,
"children": [{"colorCode" : "Wild color",
"name": ["M. boman"],
"key": "M. boman",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. jackeyi"],
"key": "M. jackeyi",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. lolodensis"],
"key": "M. lolodensis",
"size": 2},
{"colorCode" : "Wild color",
"name": ["M. textilis"],
"key": "M. textilis",
"size": 4},
{"colorCode" : "Wild color",
"name": ["M. maclayi"],
"key": "M. maclayi",
"size": 7},
{"colorCode" : "Wild color",
"name": ["M. peekelii"],
"key": "M. peekelii",
"size": 5}]}
]}
]
},
{"colorCode" : "Wild color",
"name": ["Section_Musa"],
"key": "Section_Musa",
"size": 1327,
"children": [
{"colorCode" : "Wild color",
"name": ["Rhodochlamys genetic cluster"],
"key": "Rhodochlamys genetic cluster",
"size": 16,
"children":[
{"colorCode" : "Wild color",
"name": ["M. ornata"],
"key": "M. ornata",
"size": 6},
{"colorCode" : "Wild color",
"name": ["M. laterita"],
"key": "M. laterita",
"size": 4},
{"colorCode" : "Wild color",
"name": ["M. velutina"],
"key": "M. velutina",
"size": 2},
{"colorCode" : "Wild color",
"name": ["M. mannii"],
"key": "M. mannii",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. rosea"],
"key": "M. rosea",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. rubra"],
"key": "M. rubra",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. sanguinea"],
"key": "M. sanguinea",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. mannii"],
"key": "M. mannii",
"size": 1},
{"colorCode" : "Wild color",
"name": ["M. rosea"],
"key": "M. rosea",
"size": 1},
{"colorCode" : "Wild color",
"name": ["Other 5 wild species"],
"key": "Other 5 wild species",
"size": 0}
]
},
{ "colorCode" : "Wild color",
"name": ["Eumusa genetic cluster"],
"key": "Eumusa genetic cluster",
"size": 1327,
"children": [
{"colorCode" : "Wild color",
"name": ["Eumusa cluster-Wild"],
"key": "Eumusa cluster-Wild",
"size": 137,
"children": [
{ "colorCode" : "Wild color",
"name": ["M. acuminata"],
"key": "M. acuminata",
"size": 89,
"children": [
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. banksii"],
"key": "M. acuminata subsp. banksii",
"size": 30},
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. malaccensis"],
"key": "M. acuminata subsp. malaccensis",
"size": 14},
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. zebrina"],
"key": "M. acuminata subsp. zebrina",
"size": 6},
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. siamea"],
"key": "M. acuminata subsp. siamea",
"size": 4},
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. burmannica"],
"key": "M. acuminata subsp. burmannica",
"size": 4},
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. microcarpa"],
"key": "M. acuminata subsp. microcarpa",
"size": 1},
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. truncata"],
"key": "M. acuminata subsp. truncata",
"size": 1},
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. errans"],
"key": "M. acuminata subsp. errans",
"size": 0},
{ "colorCode" : "Wild color",
"name": ["M. acuminata subsp. truncata"],
"key": "M. acuminata subsp. truncata",
"size": 1},
{ "colorCode" : "Wild color",
"name": ["Others M. acuminata"],
"key": "Others M. acuminata",
"size": 29}
]
},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana"],
"key": "M. balbisiana",
"size": 31,
"children": [
{ "colorCode" : "Wild color",
"name": ["M. balbisiana PHL"],
"key": "M. balbisiana PHL",
"size": 8},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana VNM"],
"key": "M. balbisiana VNM",
"size": 2},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana CHN"],
"key": "M. balbisiana CHN",
"size": 1},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana IND"],
"key": "M. balbisiana IND",
"size": 0},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana MMR"],
"key": "M. balbisiana MMR",
"size": 0},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana LAO"],
"key": "M. balbisiana LAO",
"size": 0},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana LKA"],
"key": "M. balbisiana LKA",
"size": 0},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana THA"],
"key": "M. balbisiana THA",
"size": 0},
{ "colorCode" : "Wild color",
"name": ["M. balbisiana other or unknown origin"],
"key": "M. balbisiana other or unknown origin",
"size": 20}
]
},
{ "colorCode" : "Wild color",
"name": ["M. schizocarpa"],
"key": "M. schizocarpa",
"size": 13},
{ "colorCode" : "Wild color",
"name": ["M. itinerans"],
"key": "M. itinerans",
"size": 2},
{ "colorCode" : "Wild color",
"name": ["M. cheesmani"],
"key": "M. cheesmani",
"size": 1},
{ "colorCode" : "Wild color",
"name": ["M. basjoo"],
"key": "M. basjoo",
"size": 1},
{ "colorCode" : "Wild color",
"name": ["Other 15 wild species"],
"key": "Other 15 wild species",
"size": 0}
]},
{"colorCode" : "Exploration Actions",
"name": ["Eumusa cluster-Domesticated"],
"key": "Eumusa cluster-Domesticated",
"size": 1190,
"children": [{"colorCode" : "Exploration Actions",
"name": ["Cultivars"],
"key": "Cultivars",
"size": 1190,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["Diploids"],
"key": "Diploids",
"size": 330,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["AA"],
"key": "AA",
"size": 292,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["AA PNG"],
"key": "AA PNG",
"size": 129},
{ "colorCode" : "Exploration Actions",
"name": ["AA IDN"],
"key": "AA IDN",
"size": 27},
{ "colorCode" : "Exploration Actions",
"name": ["AA PHL"],
"key": "AA PHL",
"size": 10},
{ "colorCode" : "Exploration Actions",
"name": ["AA MYS"],
"key": "AA MYS",
"size": 12},
{ "colorCode" : "Exploration Actions",
"name": ["AA VNM"],
"key": "AA VNM",
"size": 11},
{ "colorCode" : "Exploration Actions",
"name": ["AA THA"],
"key": "AA THA",
"size": 6},
{ "colorCode" : "Exploration Actions",
"name": ["AA TZA"],
"key": "AA TZA",
"size": 20},
{ "colorCode" : "Exploration Actions",
"name": ["AA other origin"],
"key": "AA other origin",
"size": 77},
{ "colorCode" : "Exploration Actions",
"name": ["AA TLS"],
"key": "AA TLS",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["AA IND"],
"key": "AA IND",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["AA SLB"],
"key": "AA SLB",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["AA MDG"],
"key": "AA MDG",
"size": 0}
]},
{ "colorCode" : "Exploration Actions",
"name": ["AB"],
"key": "AB",
"size": 22,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["Kunnan"],
"key": "Kunnan",
"size": 5},
{ "colorCode" : "Exploration Actions",
"name": ["Ney Poovan"],
"key": "Ney Poovan",
"size": 7},
{ "colorCode" : "Exploration Actions",
"name": ["Others AB"],
"key": "Others AB",
"size": 10}
]},
{ "colorCode" : "Exploration Actions",
"name": ["AS"],
"key": "AS",
"size": 6}
]},
{ "colorCode" : "Exploration Actions",
"name": ["Triploids"],
"key": "Triploids",
"size": 762,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["AAA"],
"key": "AAA",
"size": 218,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["mutika/lujugira"],
"key": "mutika/lujugira",
"size": 76},
{ "colorCode" : "Exploration Actions",
"name": ["Cavendish"],
"key": "Cavendish",
"size": 51},
{ "colorCode" : "Exploration Actions",
"name": ["red"],
"key": "red",
"size": 10},
{ "colorCode" : "Exploration Actions",
"name": ["Gros Michel"],
"key": "Gros Michel",
"size": 9},
{ "colorCode" : "Exploration Actions",
"name": ["Ibota"],
"key": "Ibota",
"size": 7},
{ "colorCode" : "Exploration Actions",
"name": ["Orotava"],
"key": "Orotava",
"size": 3},
{ "colorCode" : "Exploration Actions",
"name": ["Rio"],
"key": "Rio",
"size": 3},
{ "colorCode" : "Exploration Actions",
"name": ["Ambon"],
"key": "Ambon",
"size": 1},
{ "colorCode" : "Exploration Actions",
"name": ["Ambon"],
"key": "Ambon",
"size": 1},
{ "colorCode" : "Exploration Actions",
"name": ["Others AAA"],
"key": "Others AAA",
"size": 58}
]},
{ "colorCode" : "Exploration Actions",
"name": ["AAB"],
"key": "AAB",
"size": 425,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["Plantain"],
"key": "Plantain",
"size": 291},
{ "colorCode" : "Exploration Actions",
"name": ["Silk"],
"key": "Silk",
"size": 24},
{ "colorCode" : "Exploration Actions",
"name": ["Mysore"],
"key": "Mysore",
"size": 10},
{ "colorCode" : "Exploration Actions",
"name": ["Laknao"],
"key": "Laknao",
"size": 7},
{ "colorCode" : "Exploration Actions",
"name": ["Maia maoli/Popoulu"],
"key": "Maia maoli/Popoulu",
"size": 7},
{ "colorCode" : "Exploration Actions",
"name": ["Pisang Kelat"],
"key": "Pisang Kelat",
"size": 5},
{ "colorCode" : "Exploration Actions",
"name": ["Pisang Raja"],
"key": "Pisang Raja",
"size": 4},
{ "colorCode" : "Exploration Actions",
"name": ["Iholena"],
"key": "Iholena",
"size": 2},
{ "colorCode" : "Exploration Actions",
"name": ["Pome hybrid"],
"key": " Pome hybrid",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Others AAB"],
"key": "Others AAB",
"size": 75}
]},
{ "colorCode" : "Exploration Actions",
"name": ["ABB"],
"key": "ABB",
"size": 110,
"children": [
{ "colorCode" : "Exploration Actions",
"name": ["Pisang Awak"],
"key": "Pisang Awak",
"size": 17},
{ "colorCode" : "Exploration Actions",
"name": ["Bluggoe"],
"key": "Bluggoe",
"size": 16},
{ "colorCode" : "Exploration Actions",
"name": ["Monthan"],
"key": "Monthan",
"size": 10},
{ "colorCode" : "Exploration Actions",
"name": ["Saba"],
"key": "Saba",
"size": 6},
{ "colorCode" : "Exploration Actions",
"name": ["Pelipita"],
"key": "Pelipita",
"size": 3},
{ "colorCode" : "Exploration Actions",
"name": ["Kalapua"],
"key": "Kalapua",
"size": 1},
{ "colorCode" : "Exploration Actions",
"name": ["Teparod"],
"key": "Teparod",
"size": 0},
{ "colorCode" : "Exploration Actions",
"name": ["Others ABB"],
"key": "Others ABB",
"size": 57}
]},
{"colorCode" : "Exploration Actions",
"name": ["AAT"],
"key": "AAT",
"size": 5},
{"colorCode" : "Exploration Actions",
"name": ["BBB"],
"key": "BBB",
"size": 4}
]},
{ "colorCode" : "Exploration Actions",
"name": ["Tetraploids"],
"key": "Tetraploids",
"size": 93,
"children":[
{"colorCode" : "Exploration Actions",
"name": ["AAAA"],
"key": "AAAA",
"size": 15},
{"colorCode" : "Exploration Actions",
"name": ["AAAB"],
"key": "AAAB",
"size": 73},
{"colorCode" : "Exploration Actions",
"name": ["AABB"],
"key": "AABB",
"size": 2},
{"colorCode" : "Exploration Actions",
"name": ["ABBB"],
"key": "ABBB",
"size": 1},
{"colorCode" : "Exploration Actions",
"name": ["ABBT"],
"key": "ABBT",
"size": 2}]}
]}]}]}
]}
]
}
],
"name" : "banana",
"size": 1546
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 19px sans-serif;
}
.link {
fill: none;
/*stroke: steelblue;*/
opacity: 0.9;
/*stroke-width: 1.5px;*/
}
#levels{
margin-left: 120px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script></script>
<button type="button" onclick="collapseAll()">Collapse All</button>
<button type="button" onclick="expandAll()">Expand All</button>
<div id="viz"></div>
<script>
// change here dimensions of the image
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 3500 - margin.right - margin.left,
height = 3500 - margin.top - margin.bottom;
var i = 0,
duration = 750,// animation duration
root;// stores the tree structure in json format
var tree = d3.layout.tree()
.size([height, width]);
var edge_weight = d3.scale.linear()
.domain([0, 100])
.range([0, 100]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
// adding the svg to the html structure
var svg = d3.select("div#viz").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//loading the json file
d3.json("data.json", function(error, flare) {
edge_weight.domain([0,flare.size]);
root = flare;
root.x0 = height / 2;
root.y0 = 0;
root.children.forEach(collapse);
update(root);
});
d3.select(self.frameElement).style("height", "800px");
/**
* Updates the node.
* cloppases and expands the node bases on the structure of the source
* all 'children' nodes are expanded and '_children' nodes collapsed
* @param {json structure} source
*/
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth. increased to 300 depth of node
nodes.forEach(function(d) { d.y = d.depth * 350; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.key; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", function(d){ return edge_weight(d.size/2);})
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("stroke-width", function(d){
return 1;
})
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.attr("stroke", function(d){
return linkColor(d.target.colorCode);});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", function(d){
/* calculating the top shift */
var source = {x: d.source.x - edge_weight(calculateLinkSourcePosition(d)), y: d.source.y};
var target = {x: d.target.x, y: d.target.y};
return diagonal({source: source, target: target});
})
.attr("stroke-width", function(d){
return edge_weight(d.target.size);
});
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
/**
* Calculates the source y-axis position of the link.
* @param {json structure} link
*/
function calculateLinkSourcePosition(link) {
targetID = link.target.id;
var childrenNumber = link.source.children.length;
var widthAbove = 0;
for (var i = 0; i < childrenNumber; i++)
{
if (link.source.children[i].id == targetID)
{
// we are done
widthAbove = widthAbove + link.source.children[i].size/2;
break;
}else {
// keep adding
widthAbove = widthAbove + link.source.children[i].size
}
}
return link.source.size/2 - widthAbove;
}
/*
* Toggle children on click.
* @param {node} d
*/
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
/*
* Collapses the node d and all the children nodes of d
* @param {node} d
*/
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
/*
* Collapses the node in the tree
*/
function collapseAll() {
root.children.forEach(collapse);
update(root);
}
/*
* Expands the node d and all the children nodes of d
* @param {node} d
*/
function expand(d) {
if (d._children) {
d.children = d._children;
d._children = null;
}
if (d.children) {
d.children.forEach(expand);
}
}
/*
* Expands all the nodes in the tree
*/
function expandAll() {
root.children.forEach(expand);
update(root);
}
/*
* dictionary of colors corresponding to the different color categories
* defaults to a generic blue if there are no defined color categories
* in the data set
*/
function linkColor(linkCode) {
switch (linkCode)
{
case 'Exploration Actions':
return '#ffe500';//yellow
break;
case 'Wild color':
return '#29AE40';//green
break;
case 'App Actions':
return '#FF0000';//red
break;
case 'Insight Actions':
return '#7F007F';//purple
break;
case 'Meta Actions':
return '#00FFFF';//cyan
break;
default:
return '#0950D0';//generic blue
break;
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment