Skip to content

Instantly share code, notes, and snippets.

@petergpython

petergpython/data.json

Last active June 18, 2020 09:38
Show Gist options
  • Save petergpython/13d680a6ac6dad3c2f074f37253fd2a3 to your computer and use it in GitHub Desktop.
Save petergpython/13d680a6ac6dad3c2f074f37253fd2a3 to your computer and use it in GitHub Desktop.
Download ZIP
pea
Raw
data.json
{
"name": ["Entire genepool"],
"key": "Entire genepool",
"size": 33530,
"contributors": ["Ambrose, Michael (Independent consultant)", "Smýkal, Petr (Palacky University )", "Giovannini, Peter (Global Crop Diversity Trust)"],
"children": [{
"name": ["GP1"],
"key": "GP1",
"size": 32845,
"children": [{
"name": ["Pisum sativum L."],
"key": "Pisum sativum L.",
"size": 32845,
"children": [{
"name": ["Pisum sativum L. subsp. sativum"],
"key": "Pisum sativum L. subsp. sativum",
"size": 32845,
"children": [{
"name": ["Cultivars"],
"key": "Cultivars",
"size": 19143,
"children": []
}, {
"name": ["Landraces"],
"key": "Landraces",
"size": 13702,
"children": [{
"name": ["Africa"],
"key": "Africa",
"size": 3929,
"children": [{
"name": ["East Africa"],
"key": "East Africa",
"children": [{
"name": ["Ethiopia (ETH)"],
"key": "ETH",
"size": 3228,
"children": []
}, {
"name": ["Kenya (KEN)"],
"key": "KEN",
"size": 2,
"children": []
}, {
"name": ["Malawi (MWI)"],
"key": "MWI",
"size": 0,
"children": []
}, {
"name": ["Other East Africa"],
"key": "others",
"size": 65,
"children": []
}, {
"name": ["Tanzania TZA)"],
"key": "TZA",
"size": 28,
"children": []
}, {
"name": ["Uganda (UGA)"],
"key": "UGA",
"size": 48,
"children": []
}, {
"name": ["Zambia (ZMB)"],
"key": "ZMB",
"size": 27,
"children": []
}]
}, {
"name": ["South Africa (ZAF)"],
"key": "ZAF",
"size": 19,
"children": []
}, {
"name": ["All Other Africa"],
"key": "All Others",
"size": 512,
"children": []
}]
}, {
"name": ["Americas"],
"key": "Americas",
"size": 380,
"children": [{
"name": ["Central America"],
"key": "Central America",
"size": 57,
"children": [{
"name": ["Mexico (MEX)"],
"key": "MEX",
"size": 57,
"children": []
}]
}, {
"name": ["South America"],
"key": "South America",
"size": 323,
"children": [{
"name": ["Argentina (ARG)"],
"key": "ARG",
"size": 25,
"children": []
}, {
"name": ["Bolivia (BOL)"],
"key": "BOL",
"size": 101,
"children": []
}, {
"name": ["Chile (CHL)"],
"key": "CHL",
"size": 48,
"children": []
}, {
"name": ["Colombia (COL)"],
"key": "COL",
"size": 21,
"children": []
}, {
"name": ["Peru (PER)"],
"key": "PER",
"size": 48,
"children": []
}]
}, {
"name": ["All Other Americas"],
"key": "All Others",
"size": 80,
"children": []
}]
}, {
"name": ["Asia"],
"key": "Asia",
"size": 3630,
"children": [{
"name": ["Caucasus"],
"key": "Caucasus",
"size": 390,
"children": [{
"name": ["Armenia (ARM)"],
"key": "ARM",
"size": 35,
"children": []
}, {
"name": ["Azerbaijan (AZE)"],
"key": "AZE",
"size": 7,
"children": []
}, {
"name": ["Georgia (GEO)"],
"key": "GEO",
"size": 348,
"children": []
}]
}, {
"name": ["Central Asia"],
"key": "Central Asia",
"size": 486,
"children": [{
"name": ["Kazakhstan (KAZ)"],
"key": "KAZ",
"size": 88,
"children": []
}, {
"name": ["Tajikistan (TJK)"],
"key": "TJK",
"size": 317,
"children": []
}, {
"name": ["Turkmenistan (TKM)"],
"key": "TKM",
"size": 6,
"children": []
}, {
"name": ["Uzbekistan (UZB)"],
"key": "UZB",
"size": 74,
"children": []
}]
}, {
"name": ["China (CHN)"],
"key": "China",
"size": 292,
"children": [{
"name": ["East and South China (predominantly winter type)"],
"key": "East & South China",
"size": 143,
"children": []
}, {
"name": ["Inner Mongolia"],
"key": "Inner Mongolia",
"size": 22,
"children": []
}, {
"name": ["NE and NW China (mostly spring type)"],
"key": "NE & NW China",
"size": 79,
"children": []
}, {
"name": ["Sha'anxi"],
"key": "Sha'anxi",
"size": 48,
"children": []
}]
}, {
"name": ["East Asia"],
"key": "East Asia",
"size": 26,
"children": [{
"name": ["Japan (JPN)"],
"key": "JPN",
"size": 11,
"children": []
}, {
"name": ["Korea, Democratic People's Republic of (PRK)"],
"key": "PRK",
"size": 15,
"children": []
}, {
"name": ["Korea, Republic of (KOR)"],
"key": "KOR",
"size": 0,
"children": []
}]
}, {
"name": ["South Asia"],
"key": "South Asia",
"size": 2650,
"children": [{
"name": ["Afghanistan (AFG)"],
"key": "AFG",
"size": 512,
"children": [{
"name": ["Afghan type"],
"key": "Afghan type",
"size": 512,
"children": []
}, {
"name": ["all others"],
"key": "all others",
"size": 0,
"children": []
}]
}, {
"name": ["India (IND)"],
"key": "IND",
"size": 1375,
"children": []
}, {
"name": ["Iran (IRN)"],
"key": "IRN",
"size": 41,
"children": []
}, {
"name": ["Nepal (NPL)"],
"key": "NPL",
"size": 308,
"children": []
}, {
"name": ["Others"],
"key": "Others",
"size": 66,
"children": []
}, {
"name": ["Pakistan (PAK)"],
"key": "PAK",
"size": 348,
"children": []
}]
}, {
"name": ["South-Eastern Asia"],
"key": "South-Eastern Asia",
"size": 0,
"children": [{
"name": ["Cambodia (KHM)"],
"key": "KHM",
"size": 0,
"children": []
}, {
"name": ["Indonesia (IDN)"],
"key": "IDN",
"size": 0,
"children": []
}, {
"name": ["Philippines (PHL)"],
"key": "PHL",
"size": 0,
"children": []
}, {
"name": ["Vietnam (VNM)"],
"key": "VNM",
"size": 0,
"children": []
}]
}]
}, {
"name": ["Europe (excluded mediterranean)"],
"key": "Europe (ex. med.)",
"size": 218,
"children": [{
"name": ["Belarus (BLR)"],
"key": "BLR",
"size": 29,
"children": []
}, {
"name": ["Bulgaria (BGR)"],
"key": "BGR",
"size": 185,
"children": []
}, {
"name": ["North Macedonia"],
"key": "MKD",
"size": 4,
"children": []
}, {
"name": ["Northern Europe"],
"key": "Northern Europe",
"size": 1247,
"children": [{
"name": ["Denmark (DNK)"],
"key": "DNK",
"size": 35,
"children": []
}, {
"name": ["Estonia (EST)"],
"key": "EST",
"size": 11,
"children": []
}, {
"name": ["Finland (FIN)"],
"key": "FIN",
"size": 65,
"children": []
}, {
"name": ["Latvia (LVA)"],
"key": "LVA",
"size": 63,
"children": []
}, {
"name": ["Lithuania (LTU)"],
"key": "LTU",
"size": 17,
"children": []
}, {
"name": ["Norway (NOR)"],
"key": "NOR",
"size": 13,
"children": []
}, {
"name": ["Sweden (SWE)"],
"key": "SWE",
"size": 749,
"children": []
}, {
"name": ["United Kingdom (GBR)"],
"key": "GBR",
"size": 294,
"children": []
}]
}, {
"name": ["Remainder of Europe"],
"key": "Others",
"size": 233,
"children": []
}, {
"name": ["Romania (ROU)"],
"key": "ROU",
"size": 222,
"children": []
}, {
"name": ["Serbia (SRB)"],
"key": "SRB",
"size": 7,
"children": []
}, {
"name": ["Slovenia (SVN)"],
"key": "SVN",
"size": 0,
"children": []
}]
}, {
"name": ["Mediterranean"],
"key": "Mediterranean",
"size": 2806,
"children": [{
"name": ["East Mediterranean"],
"key": "East Mediterranean",
"size": 957,
"children": [{
"name": ["Albania (ALB)"],
"key": "ALB",
"size": 58,
"children": []
}, {
"name": ["Bosnia and Herzegovina (BIH)"],
"key": "BIH",
"size": 0,
"children": []
}, {
"name": ["Croatia (HRV)"],
"key": "HRV",
"size": 25,
"children": []
}, {
"name": ["Egypt (EGY)"],
"key": "EGY",
"size": 72,
"children": []
}, {
"name": ["Greece (GRE)"],
"key": "GRE",
"size": 295,
"children": []
}, {
"name": ["Libya (LBY)"],
"key": "LBY",
"size": 23,
"children": []
}, {
"name": ["Montenegro (MNE)"],
"key": "MNE",
"size": 0,
"children": []
}, {
"name": ["Turkey (TUR)"],
"key": "TUR",
"size": 438,
"children": []
}, {
"name": ["Others East Mediterranean"],
"key": "Others",
"size": 22,
"children": []
}]
}, {
"name": ["West Mediterranean"],
"key": "West Mediterranean",
"size": 1838,
"children": [{
"name": ["Algeria (DZA)"],
"key": "DZA",
"size": 41,
"children": []
}, {
"name": ["Italy (ITA)"],
"key": "ITA",
"size": 355,
"children": []
}, {
"name": ["Morocco (MAR)"],
"key": "MAR",
"size": 117,
"children": []
}, {
"name": ["Others"],
"key": "Others",
"size": 0,
"children": []
}, {
"name": ["Portugal (PRT)"],
"key": "PRT",
"size": 396,
"children": []
}, {
"name": ["Spain (ESP)"],
"key": "ESP",
"size": 905,
"children": []
}, {
"name": ["Tunisia (TUN)"],
"key": "TUN",
"size": 24,
"children": []
}]
}]
}, {
"name": ["Middle East"],
"key": "Middle East",
"size": 136,
"children": [{
"name": ["Iraq (IRQ)"],
"key": "IRQ",
"size": 3,
"children": []
}, {
"name": ["Israel (ISR)"],
"key": "ISR",
"size": 20,
"children": []
}, {
"name": ["Jordan (JOR)"],
"key": "JOR",
"size": 5,
"children": []
}, {
"name": ["Lebanon (LBN)"],
"key": "LBN",
"size": 8,
"children": []
}, {
"name": ["Others (Yemen , United Arab Emirates, Saudi Arabia. Oman, Bahrain, Kuwait)"],
"key": "Others",
"size": 22,
"children": []
}, {
"name": ["Palestine (PSE)"],
"key": "PSE",
"size": 8,
"children": []
}, {
"name": ["Syria (SYR)"],
"key": "SYR",
"size": 65,
"children": []
}]
}, {
"name": ["Russia (RUS)"],
"key": "RUS",
"size": 835,
"children": []
}]
}]
}, {
"name": ["Pisum sativum subsp. elatius"],
"key": "Pisum sativum subsp. elatius",
"size": 310,
"children": [{
"name": ["Asia"],
"key": "Asia",
"size": 109,
"children": [{
"name": ["Caucasus"],
"key": "Caucasus",
"size": 54,
"children": [{
"name": ["Armenia (ARM)"],
"key": "ARM",
"size": 22,
"children": []
}, {
"name": ["Azerbaijan (AZE)"],
"key": "AZE",
"size": 21,
"children": []
}, {
"name": ["Georgia (GEO)"],
"key": "GEO",
"size": 11,
"children": []
}]
}, {
"name": ["Iran (IRN)"],
"key": "IRN",
"size": 0,
"children": []
}, {
"name": ["Turkey (TUR)"],
"key": "TUR",
"size": 55,
"children": [{
"name": ["Centre"],
"key": "Centre",
"size": 22,
"children": []
}, {
"name": ["East"],
"key": "East",
"size": 19,
"children": []
}, {
"name": ["West"],
"key": "West",
"size": 14,
"children": []
}]
}]
}, {
"name": ["Europe"],
"key": "Europe",
"size": 94,
"children": [{
"name": ["Balkans"],
"key": "Balkans",
"size": 8,
"children": []
}, {
"name": ["Cyprus (CYP)"],
"key": "CYP",
"size": 22,
"children": []
}, {
"name": ["France (FRA)"],
"key": "FRA",
"size": 1,
"children": []
}, {
"name": ["Greece (GRE)"],
"key": "GRE",
"size": 26,
"children": []
}, {
"name": ["Italy (ITA)"],
"key": "ITA",
"size": 12,
"children": []
}, {
"name": ["Portugal (PRT)"],
"key": "PRT",
"size": 4,
"children": []
}, {
"name": ["Spain (ESP)"],
"key": "ESP",
"size": 21,
"children": []
}]
}, {
"name": ["Middle East"],
"key": "Middle East",
"size": 67,
"children": [{
"name": ["Israel (ISR)"],
"key": "ISR",
"size": 34,
"children": []
}, {
"name": ["Jordan (JOR)"],
"key": "JOR",
"size": 0,
"children": []
}, {
"name": ["Lebanon (LBN)"],
"key": "LBN",
"size": 16,
"children": []
}, {
"name": ["Palestine (PSE)"],
"key": "PSE",
"size": 11,
"children": []
}, {
"name": ["Syria (SYR)"],
"key": "SYR",
"size": 6,
"children": []
}]
}, {
"name": ["North Africa"],
"key": "North Africa",
"size": 1,
"children": [{
"name": ["Algeria (DZA)"],
"key": "DZA",
"size": 0,
"children": []
}, {
"name": ["Morocco (MAR)"],
"key": "MAR",
"size": 1,
"children": []
}, {
"name": ["Others"],
"key": "Others",
"size": 0,
"children": []
}, {
"name": ["Tunisia (TUN)"],
"key": "TUN",
"size": 0,
"children": []
}]
}, {
"name": ["Russia (RUS)"],
"key": "RUS",
"size": 39,
"children": []
}]
}]
}]
}, {
"name": ["GP2"],
"key": "GP2",
"size": 373,
"children": [{
"name": ["Pisum abyssinicum"],
"key": "P. abyssinicum",
"size": 214,
"children": []
}, {
"name": ["Pisum fulvum"],
"key": "P. fulvum",
"size": 159,
"children": [{
"name": ["Israel (ISR)"],
"key": "ISR",
"size": 71,
"children": []
}, {
"name": ["Jordan (JOR)"],
"key": "JOR",
"size": 20,
"children": []
}, {
"name": ["Lebanon (LBN)"],
"key": "LBN",
"size": 15,
"children": []
}, {
"name": ["Palestine (PSE)"],
"key": "PSE",
"size": 5,
"children": []
}, {
"name": ["Syria (SYR)"],
"key": "SYR",
"size": 41,
"children": []
}, {
"name": ["Turkey (TUR)"],
"key": "TUR",
"size": 7,
"children": []
}]
}]
}, {
"name": ["GP3"],
"key": "GP3",
"size": 2,
"children": [{
"name": ["Vavilovia formosa"],
"key": "Vavilovia formosa",
"size": 2,
"children": []
}]
}]
}
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: 40px sans-serif;
}
.link {
fill: none;
/*stroke: steelblue;*/
opacity: 0.9;
/*stroke-width: 1.5px;*/
}
#levels{
margin-left: 120px;
}
</style>
<body>
<script src="https://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: 300},
width = 5200 - margin.right - margin.left,
height = 5000 - margin.top - margin.bottom;
var i = 0,
duration = 750,// animation duration
root;// stores the tree structure in json format
var tree = d3.layout.tree()
.separation(function(a, b) { return ((a.parent == root) && (b.parent == root)) ? 5 : 1; }) // PG: I added this line to better separate nodes
.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 * 300; });
// 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 'wild-cultivated':
return '#3498DB';//brown
break;
case 'AA':
return '#783f04';//brown
break;
case 'Wild color':
return '#29AE40';//green
break;
case 'AB':
return '#7f6000';//
break;
case 'AS':
return '#b45f06';//
break;
case 'AT':
return '#ff9900';//
break;
case 'AAA':
return '#f1c232';//
break;
case 'AAB':
return '#ffd966';//
break;
case 'ABB':
return '#ffff00';//
break;
case 'AAT':
return '#ffff00';//
break;
case 'AAAA':
return '#660000';//
break;
case 'AAAB':
return '#990000';//
break;
case 'AABB':
return '#cc4125';//
break;
case 'ABBB':
return '#ff0000';//
break;
case 'ABBT':
return '#dd7e6b';//
break;
case 'fe':
return '#ff00ff';//
break;
default:
return '#190707';//generic black
break;
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment