Skip to content

Instantly share code, notes, and snippets.

@petergpython

petergpython/data.json

Last active June 17, 2020 17:19
Show Gist options
  • Save petergpython/2a154c4cae63ae804e376dc5f86f2f61 to your computer and use it in GitHub Desktop.
Save petergpython/2a154c4cae63ae804e376dc5f86f2f61 to your computer and use it in GitHub Desktop.
Download ZIP
bread_wheat3
Raw
data.json
{
"name": "Bread wheat landraces",
"key": ["Bread wheat landraces: 33487, 11853"],
"size": 55735,
"children": [{
"name": "Europe",
"key": ["Europe"],
"size": 2007,
"children": [{
"name": "Mediterranean Europe",
"key": ["Mediterranean Europe: 304, 1703"],
"size": 706,
"children": [{
"name": "Albania",
"key": ["Albania: 13, 3"],
"size": 16,
"children": []
}, {
"name": "Cyprus",
"key": ["Cyprus: 2, 12"],
"size": 3,
"children": []
}, {
"name": "Greece",
"key": ["Greece: 16, 152"],
"size": 186,
"children": []
}, {
"name": "Italy",
"key": ["Italy: 25, 122"],
"size": 147,
"children": []
}, {
"name": "Macedonia",
"key": ["Macedonia: 0, 634"],
"size": 634,
"children": []
}, {
"name": "Portugal",
"key": ["Portugal: 162, 567"],
"size": 729,
"children": []
}, {
"name": "Spain",
"key": ["Spain: 86, 213"],
"size": 299,
"children": []
}]
}, {
"name": "North West Europe",
"key": ["North West Europe: 204, 856"],
"size": 1060,
"children": [{
"name": "Austria",
"key": ["Austria: 8, 193"],
"size": 201,
"children": []
}, {
"name": "Belgium",
"key": ["Belgium: 0, 3"],
"size": 3,
"children": []
}, {
"name": "Denmark",
"key": ["Denmark: 9, 62"],
"size": 71,
"children": []
}, {
"name": "France",
"key": ["France: 16, 44"],
"size": 60,
"children": []
}, {
"name": "GBR-IRL",
"key": ["GBR-IRL: 8, 53"],
"size": 61,
"children": []
}, {
"name": "Germany",
"key": ["Germany: 52, 46"],
"size": 98,
"children": []
}, {
"name": "Holland",
"key": ["Holland: 9, 0"],
"size": 9,
"children": []
}, {
"name": "Norway",
"key": ["Norway: 1, 1"],
"size": 2,
"children": []
}, {
"name": "Poland",
"key": ["Poland: 70, 123"],
"size": 193,
"children": []
}, {
"name": "Sweden",
"key": ["Sweden: 5, 30"],
"size": 35,
"children": []
}, {
"name": "Switzerland",
"key": ["Switzerland: 26, 301"],
"size": 327,
"children": []
}]
}, {
"name": "Others europe",
"key": ["Others europe: 78, "],
"size": 78,
"children": []
}, {
"name": "South-Eastern Europe and Russia",
"key": ["South-Eastern Europe and Russia: 151,945 "],
"size": 1096,
"children": [{
"name": "Bosnia and Herzegovina",
"key": ["Bosnia and Herzegovina: 1, 175"],
"size": 176,
"children": []
}, {
"name": "Bulgaria",
"key": ["Bulgaria: 9, 147"],
"size": 156,
"children": []
}, {
"name": "Croatia",
"key": ["Croatia 1, 53"],
"size": 54,
"children": []
}, {
"name": "Hungary",
"key": ["Hungary: 20, 142"],
"size": 162,
"children": []
}, {
"name": "Romania",
"key": ["Romania: 2, 75 "],
"size": 77,
"children": []
}, {
"name": "Russia (except region near caucasus)",
"key": ["Russia (except region near caucasus): 110, 286"],
"size": 396,
"children": []
}, {
"name": "Ukraine",
"key": ["Ukraine: 8, 67"],
"size": 75,
"children": []
}]
}]
}, {
"name": "Africa",
"key": ["Africa: 841, 1982"],
"size": 2823,
"children": [{
"name": "Ethiopia",
"key": ["Ethiopia: 532, 994"],
"size": 1526,
"children": []
}, {
"name": "Nord Africa",
"key": ["Nord Africa: 243, 655"],
"size": 898,
"children": [{
"name": "Algeria",
"key": ["Algeria: 31, 180"],
"size": 211,
"children": []
}, {
"name": "Egypt",
"key": ["Egypt: 42, 179"],
"size": 221,
"children": []
}, {
"name": "Libya",
"key": ["Libya: 0, 2"],
"size": 2,
"children": []
}, {
"name": "Morocco",
"key": ["Morocco: 140, 169"],
"size": 309,
"children": []
}, {
"name": "Tunisia",
"key": ["Tunisia 30, 80"],
"size": 110,
"children": []
}]
}, {
"name": "Others africa",
"key": ["Others africa: 66, 461"],
"size": 527,
"children": []
}]
}, {
"name": "Asia",
"key": ["Asia: 13855, 13496"],
"size": 27321,
"children": [{
"name": "Central Asia",
"key": ["Central Asia: 112, 473"],
"size": 585,
"children": [{
"name": "Kazakhstan",
"key": ["Kazakhstan: 7, 180"],
"size": 187,
"children": []
}, {
"name": "Kyrgyzstan",
"key": ["Kyrgyzstan: 4, 3"],
"size": 7,
"children": []
}, {
"name": "Tajikistan",
"key": ["Tajikistan: 87, 570"],
"size": 657,
"children": []
}, {
"name": "Turkmenistan",
"key": ["Turkmenistan: 2, 248"],
"size": 335,
"children": []
}, {
"name": "Uzbekistan",
"key": ["Uzbekistan: 12, 36"],
"size": 48,
"children": []
}]
}, {
"name": "Eastern Asia",
"key": ["Eastern Asia: 1788, 1629"],
"size": 3417,
"children": [{
"name": "China",
"key": ["China: 1700, 1550"],
"size": 3250,
"children": []
}, {
"name": "Japan",
"key": ["Japan: 64, 50"],
"size": 114,
"children": []
}, {
"name": "Korea (South and North)",
"key": ["Korea (South and North): 0, 27"],
"size": 27,
"children": []
}, {
"name": "Mongolia",
"key": ["Mongolia: 24, 2"],
"size": 26,
"children": []
}, {
"name": "Others (Macao Taiwan)",
"key": ["Others (Macao Taiwan): 0, 0"],
"size": 0,
"children": []
}]
}, {
"name": "Others Asia",
"key": ["Others Asia: 5, 12"],
"size": 17,
"children": []
}, {
"name": "South Asia",
"key": ["South Asia 953, 2162"],
"size": 3115,
"children": [{
"name": "India",
"key": ["India: 317, 940"],
"size": 1257,
"children": []
}, {
"name": "Nepal",
"key": ["Nepal: 262, 302"],
"size": 564,
"children": []
}, {
"name": "Others (Bangladesh, Bhutan, Maldives, Sri Lanka)",
"key": ["Others (Bangladesh, Bhutan, Maldives, Sri Lanka): 0, 24"],
"size": 24,
"children": []
}, {
"name": "Pakistan",
"key": ["Pakistan: 374, 896"],
"size": 1270,
"children": []
}]
}, {
"name": "Turkey",
"key": ["Turkey: 3223, 2630"],
"size": 5853,
"children": []
}, {
"name": "Western Asia",
"key": ["Western Asia: 10967, 9220"],
"size": 20187,
"children": [{
"name": "Caucasus",
"key": ["Caucasus: 157, 198"],
"size": 355,
"children": [{
"name": "Armenia",
"key": ["Armenia: 29, 55"],
"size": 84,
"children": []
}, {
"name": "Azerbaijan",
"key": ["Azerbaijan: 11, 41"],
"size": 52,
"children": []
}, {
"name": "Georgia",
"key": ["Georgia: 117, 102"],
"size": 219,
"children": []
}, {
"name": "Part of southern russia",
"key": ["Part of southern russia: 0, 0"],
"size": 85,
"children": []
}]
}, {
"name": "Cluster I",
"key": ["Cluster I: 8876, 8841"],
"size": 17717,
"children": [{
"name": "Afghanistan",
"key": ["Afghanistan: 846, 1564"],
"size": 2410,
"children": []
}, {
"name": "Iran: 9260",
"key": ["Iran: 7983, 7201"],
"size": 15184,
"children": []
}, {
"name": "Iraq",
"key": ["Iraq: 47, 76"],
"size": 123,
"children": []
}]
}, {
"name": "Near East",
"key": ["Near East 1934, 181"],
"size": 2115,
"children": [{
"name": "Israel",
"key": ["Israel: 18, 9"],
"size": 27,
"children": []
}, {
"name": "Jordan",
"key": ["Jordan: 6, 11"],
"size": 17,
"children": []
}, {
"name": "Lebanon",
"key": ["Lebanon: 7, 12"],
"size": 19,
"children": []
}, {
"name": "Oman",
"key": ["Oman: 6, 55"],
"size": 61,
"children": []
}, {
"name": "Palestine",
"key": ["Palestine: 0, 0"],
"size": 0,
"children": []
}, {
"name": "Saudi Arabia",
"key": ["Saudi Arabia: 12, 30"],
"size": 42,
"children": []
}, {
"name": "Syria",
"key": ["Syria: 1884, 24"],
"size": 1908,
"children": []
}, {
"name": "Yemen",
"key": ["Yemen: 1, 40"],
"size": 41,
"children": []
}]
}]
}]
}, {
"name": "Mexico, Central and South America",
"key": ["Mexico, Central and South America: 14301, 825"],
"size": 15126,
"children": []
}, {
"name": "North America ",
"key": ["North America: 118, 150"],
"size": 268,
"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)) ? 3 : 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