Created
June 14, 2019 17:55
-
-
Save bniedzie/91e0918a7de6875f34c37c9df43625c8 to your computer and use it in GitHub Desktop.
Test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="UTF-8"> | |
<style> | |
.node circle { | |
fill: #fff; | |
stroke: steelblue; | |
stroke-width: 3px; | |
} | |
.node text { | |
font: 12px sans-serif; | |
} | |
.link { | |
fill: none; | |
stroke: #ccc; | |
stroke-width: 2px; | |
} | |
.d3-tip { | |
line-height: 1; | |
font-weight: bold; | |
padding: 12px; | |
background: rgba(0, 0, 0, 0.8); | |
color: #fff; | |
border-radius: 2px; | |
} | |
/* Creates a small triangle extender for the tooltip */ | |
.d3-tip:after { | |
box-sizing: border-box; | |
display: inline; | |
font-size: 10px; | |
width: 100%; | |
line-height: 1; | |
color: rgba(0, 0, 0, 0.8); | |
content: "\25BC"; | |
position: absolute; | |
text-align: center; | |
} | |
/* Style northward tooltips differently */ | |
.d3-tip.n:after { | |
margin: -1px 0 0 0; | |
top: 100%; | |
left: 0; | |
} | |
</style> | |
<body> | |
<!-- load the d3.js library --> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script> | |
<script> | |
var treeData = | |
{ | |
"name": "PAPI4201 Papria (78)", | |
"id": "4201", | |
"bestPos": "", | |
"birthDate": "", | |
"deathDate": "159", | |
"closestAncestor": "none", | |
"icon": "https://github.com/dh-199-the-shape-of-roman-history/dh-199-the-shape-of-roman-history.github.io/blob/master/Standing_Woman.png?raw=true", | |
"children": [ | |
{ | |
"name": "PAPI4665 C. Papirius (57) C. f. L. n. Maso", | |
"id": "4665", | |
"bestPos": "Triumphator/Pontifex", | |
"birthDate": "275", | |
"deathDate": "213", | |
"closestAncestor": "", | |
"icon": "https://github.com/dh-199-the-shape-of-roman-history/dh-199-the-shape-of-roman-history.github.io/blob/master/Standing_Picta.png?raw=true", | |
"children": [ | |
] | |
}, | |
{ | |
"name": "AEMI1134 L. Aemilius (114) L. f. M. n. Paullus Macedonicus", | |
"id": "1134", | |
"bestPos": "praetor", | |
"birthDate": "228", | |
"deathDate": "160", | |
"closestAncestor": "", | |
"icon": "https://github.com/dh-199-the-shape-of-roman-history/dh-199-the-shape-of-roman-history.github.io/blob/master/Standing_Praetextra.png?raw=true", | |
"children": [ | |
{ | |
"name": "LIVI4755 M. Livius (A) Aemilianus", | |
"id": "4755", | |
"bestPos": "", | |
"birthDate": "", | |
"deathDate": "", | |
"closestAncestor": "", | |
"icon": "https://github.com/dh-199-the-shape-of-roman-history/dh-199-the-shape-of-roman-history.github.io/blob/master/Standing_Man.png?raw=true", | |
"children": [ | |
{ | |
"name": "CORN1504 P. Cornelius (335) P. f. P. n. Scipio Africanus Aemilianus", | |
"id": "1504", | |
"bestPos": "Triumphator", | |
"birthDate": "-225", | |
"deathDate": "-125", | |
"closestAncestor": "494 (Hyperaggressive)", | |
"icon": "https://github.com/dh-199-the-shape-of-roman-history/dh-199-the-shape-of-roman-history.github.io/blob/master/Standing_Picta.png?raw=true", | |
"children": [ | |
] | |
}, | |
{ | |
"name": "FABI1422 Q. Fabius (109) Q. f. Q. n. Maximus Aemilianus", | |
"id": "1422", | |
"bestPos": "", | |
"birthDate": "189", | |
"deathDate": "130", | |
"closestAncestor": "", | |
"icon": "https://github.com/dh-199-the-shape-of-roman-history/dh-199-the-shape-of-roman-history.github.io/blob/master/Standing_Praetextra.png?raw=true", | |
"children": [ | |
{ | |
"name": "FABI1594 Q. Fabius (110) Q. Aemiliani f. Q. n. Maximus Allobrogicus", | |
"id": "1594", | |
"bestPos": "Triumphator", | |
"birthDate": "164", | |
"deathDate": "100", | |
"closestAncestor": "", | |
"icon": "https://github.com/dh-199-the-shape-of-roman-history/dh-199-the-shape-of-roman-history.github.io/blob/master/Standing_Picta.png?raw=true", | |
"children": [ | |
] | |
} ] | |
} ] | |
} ] | |
} ] | |
}; | |
// Set the dimensions and margins of the diagram | |
var margin = {top: 120, right: 90, bottom: 30, left: 90}, | |
width = 1500 - margin.left - margin.right, | |
height = 3000 - margin.top - margin.bottom; | |
// append the svg object to the body of the page | |
// appends a 'group' element to 'svg' | |
// moves the 'group' element to the top left margin | |
var svg = d3.select("body").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 + ")"); | |
var i = 0, | |
duration = 750, | |
root; | |
var tip = d3.tip() | |
.attr('class', 'd3-tip') | |
.offset([-10, 0]) | |
.html(function(d) { | |
return "<span style='color:red'>" + d.data.name + "</span><br><strong>Born:</strong> <span style='color:red'>" + d.data.birthDate + "</span> <strong>Died:</strong> <span style='color:red'>" + d.data.deathDate + "</span><br><strong>Highest Position:</strong> <span style='color:red'>" + d.data.bestPos + "</span><br><strong>Closest Ancestor:</strong> <span style='color:red'>" + d.data.closestAncestor + "</span>"; | |
}) | |
svg.call(tip); | |
// declares a tree layout and assigns the size | |
var treemap = d3.tree().size([width, height]); | |
// Assigns parent, children, height, depth | |
root = d3.hierarchy(treeData, function(d) { return d.children; }); | |
update(root); | |
function update(source) { | |
// Assigns the x and y position for the nodes | |
var treeData = treemap(root); | |
// Compute the new tree layout. | |
var nodes = treeData.descendants(), | |
links = treeData.descendants().slice(1); | |
// Normalize for fixed-depth. | |
nodes.forEach(function(d){ d.y = d.depth * 100}); | |
// ****************** Nodes section *************************** | |
// Update the nodes... | |
var node = svg.selectAll('g.node') | |
.data(nodes, function(d) {return d.id || (d.id = ++i); }) | |
// Enter any new modes at the parent's previous position. | |
var nodeEnter = node.enter().append('g') | |
.append("image") | |
.attr('class', 'node') | |
.attr('x', -12) | |
.attr('y', -18) | |
.attr('height', 40) | |
.attr('width', 24) | |
.attr("xlink:href", function(d) { | |
return d.data.icon; | |
}) | |
.on('mouseover', tip.show) | |
.on('mouseout', tip.hide) | |
.on('click', function(d) { | |
window.open( | |
'http://romanrepublic.ac.uk/person/' + d.data.id + '/', | |
'_blank' | |
);}); | |
// UPDATE | |
var nodeUpdate = nodeEnter.merge(node); | |
// Transition to the proper position for the node | |
nodeUpdate.transition() | |
.duration(duration) | |
.attr("transform", function(d) { | |
return "translate(" + d.x + "," + d.y + ")"; | |
}); | |
// ****************** links section *************************** | |
// Update the links... | |
var link = svg.selectAll('path.link') | |
.data(links, function(d) { return d.id; }); | |
// Enter any new links at the parent's previous position. | |
var linkEnter = link.enter().insert('path', "g") | |
.attr("class", "link") | |
//.attr('d', function(d){ | |
// var o = {x: source.x0, y: source.y0} | |
// return diagonal(o, o) | |
//}); | |
// UPDATE | |
var linkUpdate = linkEnter.merge(link); | |
// Transition back to the parent element position | |
linkUpdate.transition() | |
.duration(duration) | |
.attr('d', function(d){ return diagonal(d, d.parent) }); | |
// Remove any exiting links | |
var linkExit = link.exit().transition() | |
.duration(duration) | |
.attr('d', function(d) { | |
var o = {x: source.x, y: source.y} | |
return diagonal(o, o) | |
}) | |
.remove(); | |
// Store the old positions for transition. | |
nodes.forEach(function(d){ | |
d.x0 = d.x; | |
d.y0 = d.y; | |
}); | |
// Creates a curved (diagonal) path from parent to the child nodes | |
function diagonal(s, d) { | |
path = `M ${s.x} ${s.y} | |
C ${(s.x + d.x) / 2} ${s.y}, | |
${(s.x + d.x) / 2} ${d.y}, | |
${d.x} ${d.y}` | |
return path | |
} | |
// Toggle children on click. | |
//function click(d) { | |
// if (d.children) { | |
// d._children = d.children; | |
// d.children = null; | |
// } else { | |
// d.children = d._children; | |
// d._children = null; | |
// } | |
// update(d); | |
//} | |
} | |
svg.append("text") | |
.attr("x", (1200 / 2) - 150) | |
.attr("y", -70) | |
.attr("text-anchor", "middle") | |
.style("font-size", "16px") | |
.text("Descendants of PAPI4201 Papria (78)-Hyperaggressive Model"); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment