A Pen by Daniel Atkin on CodePen.
Last active
December 31, 2018 00:22
-
-
Save danielatkin/848d1e3fce75930ce7703f55ea3bbd20 to your computer and use it in GitHub Desktop.
D3 Interactive Tree Diagram
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"> | |
<html> | |
<head> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://code.jquery.com/jquery-latest.min.js"></script> | |
<style> | |
.node circle { | |
fill: none; | |
stroke: #c0392b; | |
stroke-width: 3px; | |
} | |
.bigText { | |
font-family: Sans-Serif; | |
font-size: 20px; | |
color: #e74c3c; | |
text-decoration: underline; | |
cursor: pointer; | |
font-style: bold; | |
} | |
.normalText { | |
font-family: Sans-Serif; | |
font-size: 13px; | |
color: #000000; | |
text-decoration: none; | |
font-style: normal; | |
} | |
.link { | |
fill: none; | |
stroke: #95a5a6; | |
stroke-width: 2px; | |
stroke-length: 1px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="heading"></div> | |
<div id="Instructions"></div> | |
<div id="Menu"></div> | |
<script> | |
</script> | |
</body> | |
</html> | |
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
/// Set the dimensions and margins of the diagram | |
var margin = {top: 20, right: 90, bottom: 30, left: 90}, | |
width = 1000 - margin.left - margin.right, | |
height = 400 - 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; | |
// declares a tree layout and assigns the size | |
var treemap = d3.tree().size([height, width]); | |
// Assigns parent, children, height, depth | |
d3.json("treedata.json", function(error, flare) { | |
root = flare; | |
root.x0 = height / 2; | |
root.y0 = 0; | |
function collapse(d) { | |
if (d.children) { | |
d.all_children = d.children; | |
d._children = d.children; | |
d._children.forEach(collapse); | |
d.children = null; | |
d.hidden = true; | |
} | |
} | |
root.all_children = root.children; | |
root.children.forEach(collapse); | |
root.children.forEach(function(d) { d.hidden = false; }); | |
root.hidden = false; | |
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 = treemap.nodes(root).filter(function(d) { return !d.hidden; }).reverse(), | |
links = treemap.links(nodes); | |
// Normalize for fixed-depth. | |
nodes.forEach(function(d){ d.y = d.depth * 200}); | |
// ****************** 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') | |
.attr('class', 'node') | |
.attr("transform", function(d) { | |
return "translate(" + source.y0 + "," + source.x0 + ")"; | |
}); | |
// Add Circle for the nodes | |
nodeEnter.append('circle') | |
.attr('class', 'node') | |
.attr('r', 1e-6) | |
.style("fill", function(d) { | |
return d._children ? "#bdc3c7" : "#fff"; | |
}) | |
.on('click', click); | |
// Add labels for the nodes | |
nodeEnter.append('text') | |
.attr("dy", ".30em") | |
.attr("x", function(d) { | |
return d.children || d._children ? -13 : 13; | |
}) | |
.attr("text-anchor", function(d) { | |
return d.children || d._children ? "end" : "start"; | |
}) | |
.text(function(d) { return d.data.name; }) | |
.attr('class','normalText') | |
.on('click', hyperclick) | |
.on('mouseover', function(d,i) { | |
d3.select(this) | |
.attr('class', 'bigText') | |
.style('fill','#c0392b') | |
;}) | |
.on('mouseout', function(d,i) { | |
d3.select(this) | |
.attr('class', 'normalText') | |
.style('fill','black') | |
;}); | |
//open clicked link in a new tab | |
function hyperclick(d) { | |
window.open(d.data.url); | |
} | |
// 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.y + "," + d.x + ")"; | |
}); | |
// Update the node attributes and style | |
nodeUpdate.select('circle.node') | |
.attr('r', 10) | |
.style("fill", function(d) { | |
return d._children ? "#bdc3c7" : "#fff"; | |
}) | |
.attr('cursor', 'pointer'); | |
// Remove any exiting nodes | |
var nodeExit = node.exit().transition() | |
.duration(duration) | |
.attr("transform", function(d) { | |
return "translate(" + source.y + "," + source.x + ")"; | |
}) | |
.remove(); | |
// On exit reduce the node circles size to 0 | |
nodeExit.select('circle') | |
.attr('r', 1e-6); | |
// On exit reduce the opacity of text labels | |
nodeExit.select('text') | |
.style('fill-opacity', 1e-6); | |
// ****************** 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.y} ${s.x} | |
C ${(s.y + d.y) / 2} ${s.x}, | |
${(s.y + d.y) / 2} ${d.x}, | |
${d.y} ${d.x}` | |
return path | |
} | |
// Toggle children on click. | |
function click(d) { | |
if (d.children) { | |
d._children = d.children; | |
d.children = null; | |
if (d._children) { | |
d._children.forEach(function(n) { n.hidden = true; }); | |
if (d.parent) { | |
d.parent.children = d.parent.all_children; | |
d.parent.children.forEach(function(n) { | |
n.hidden = false; | |
}); | |
} | |
} | |
} else { | |
d.children = d._children; | |
d._children = null; | |
if (d.children) { | |
d.children.forEach(function(n) { n.hidden = false; }); | |
if (d.parent) { | |
d.parent.children = [d,]; | |
d.parent.children.filter(function(n) { return n !== d; }).forEach(function(n) { | |
n.hidden = true; | |
}); | |
} | |
} | |
} | |
update(d); | |
} | |
} |
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script> |
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
var treeData = | |
{ | |
"name": "Board", "url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/SitePages/Home.aspx", | |
"children": [ | |
{ | |
"name": "Executive", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/SitePages/Home.aspx", | |
"children": [ | |
{ "name": "CEO's Office", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/CEO/SitePages/Home.aspx" | |
}, | |
{ "name": "Legal & Integrity", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/LI/SitePages/Home.aspx",}, | |
{ "name": "Communications & Stakeholder Relations", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/CGR/SitePages/Home.aspx",}, | |
{ "name": "People & Culture", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/PC/SitePages/Home.aspx", | |
"children": [ | |
{"name": "Health, Safety, Environment & Wellbeing", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/PC/HSEW/SitePages/Home.aspx" | |
}]}, | |
{"name": "Finance & Risk", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FR/SitePages/Home.aspx", | |
"children": [ | |
{"name":"Financial Risk Register", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FR/FIN/SitePages/Home.aspx"} | |
] | |
}, | |
{"name":"Volunteers & Strategy", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/VS/SitePages/Home.aspx"}, | |
{"name":"Infrastructure Services", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/IS/SitePages/Home.aspx"}, | |
{"name":"Fire & Emergency Management", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SitePages/Home.aspx", | |
"children":[ | |
{"name":"Bushfire Portfolio", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/BP/SitePages/Home.aspx"}, | |
{"name":"Capability & Growth Portfolio", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/CGP/SitePages/Home.aspx"}, | |
{"name":"Regional Services Portfolio", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/RSP/SitePages/Home.aspx", | |
"children":[ | |
{"name":"South West Region", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/SitePages/Home.aspx", | |
"children":[ | |
{"name":"District 04", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/D04/SitePages/Home.aspx"}, | |
{"name":"District 05", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/D05/SitePages/Home.aspx"}, | |
{"name":"District 06", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/D06/SitePages/Home.aspx"}, | |
{"name":"District 07", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SW/D07/SitePages/Home.aspx"}, | |
] | |
}, | |
{"name":"West Region", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/W/SitePages/Home.aspx", | |
"children":[ | |
{"name":"District 15", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/W/D15/SitePages/Home.aspx"}, | |
{"name":"District 16", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/W/D16/SitePages/Home.aspx"}, | |
{"name":"District 17", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/W/D17/SitePages/Home.aspx"}, | |
] | |
}, | |
{"name":"North West Region", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/SitePages/Home.aspx", | |
"children":[ | |
{"name":"District 02", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/D02/SitePages/Home.aspx"}, | |
{"name":"District 14", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/D14/SitePages/Home.aspx"}, | |
{"name":"District 18", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/D18/SitePages/Home.aspx"}, | |
{"name":"District 20", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NW/D20/SitePages/Home.aspx"}, | |
] | |
}, | |
{"name":"North East Region", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/SitePages/Home.aspx", | |
"children":[ | |
{"name":"District 12", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D12/SitePages/Home.aspx"}, | |
{"name":"District 13", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D13/SitePages/Home.aspx"}, | |
{"name":"District 22", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D22/SitePages/Home.aspx"}, | |
{"name":"District 23", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D23/SitePages/Home.aspx"}, | |
{"name":"District 24", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/NE/D24/SitePages/Home.aspx"}, | |
] | |
}, | |
{"name":"South East Region", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/SitePages/Home.aspx", | |
"children":[ | |
{"name":"District 08", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D08/SitePages/Home.aspx"}, | |
{"name":"District 09", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D09/SitePages/Home.aspx"}, | |
{"name":"District 10", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D10/SitePages/Home.aspx"}, | |
{"name":"District 11", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D11/SitePages/Home.aspx"}, | |
{"name":"District 27", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/SE/D27/SitePages/Home.aspx"}, | |
] | |
}, | |
]}, | |
{"name":"Training Portfolio", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/TP/SitePages/Home.aspx"}, | |
{"name":"Urban Portfolio", | |
"url":"https://viccfa.sharepoint.com/sites/services/RiskHub/Board/Executive/FEM/UP/SitePages/Home.aspx"}, | |
] | |
} | |
] | |
} | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment