310 lines
9.0 KiB
HTML
310 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hierarchical Tree Diagram - Iteration 4</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
#viz-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
padding: 30px;
|
|
}
|
|
|
|
h1 {
|
|
color: #2d3748;
|
|
margin-bottom: 10px;
|
|
font-size: 2em;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #718096;
|
|
margin-bottom: 30px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.chart-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.node circle {
|
|
fill: #71b280;
|
|
stroke: #134e5e;
|
|
stroke-width: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.node text {
|
|
font-size: 12px;
|
|
fill: #2d3748;
|
|
}
|
|
|
|
.link {
|
|
fill: none;
|
|
stroke: #cbd5e0;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
color: white;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
font-size: 13px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.attribution {
|
|
margin-top: 30px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #e2e8f0;
|
|
font-size: 0.85em;
|
|
color: #718096;
|
|
}
|
|
|
|
.attribution a {
|
|
color: #134e5e;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.attribution a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="viz-container">
|
|
<h1>Organizational Hierarchy Explorer</h1>
|
|
<p class="subtitle">Click nodes to expand/collapse departments</p>
|
|
|
|
<div class="chart-container"></div>
|
|
|
|
<div class="attribution">
|
|
<p><strong>Visualization inspired by:</strong> <a href="https://observablehq.com/@d3/collapsible-tree" target="_blank">D3 Collapsible Tree</a></p>
|
|
<p><strong>Data from:</strong> Organization API (simulated)</p>
|
|
<p><strong>Created:</strong> 2025-10-10T23:54:25Z</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata section (required for state tracking) -->
|
|
<div id="metadata" style="display:none;">
|
|
{
|
|
"iteration": 4,
|
|
"web_source": "https://observablehq.com/@d3/collapsible-tree",
|
|
"techniques_learned": [
|
|
"Hierarchical tree layout with d3.tree",
|
|
"Collapsible nodes with state tracking",
|
|
"Smooth transitions for expand/collapse"
|
|
],
|
|
"data_source": "https://api.example.com/org",
|
|
"created": "2025-10-10T23:54:25Z"
|
|
}
|
|
</div>
|
|
|
|
<div class="tooltip"></div>
|
|
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
|
|
<script>
|
|
/**
|
|
* Organizational Hierarchy Explorer - Iteration 4
|
|
*
|
|
* Web Source: https://observablehq.com/@d3/collapsible-tree
|
|
* Techniques Learned:
|
|
* 1. Hierarchical tree layout with d3.tree
|
|
* 2. Collapsible nodes with state tracking
|
|
* 3. Smooth transitions for expand/collapse
|
|
*
|
|
* Data Source: Organization API (simulated)
|
|
*
|
|
* Created: 2025-10-10T23:54:25Z
|
|
* Run ID: test_run_001
|
|
*/
|
|
|
|
const data = {
|
|
name: "CEO",
|
|
value: 1,
|
|
children: [
|
|
{
|
|
name: "Engineering",
|
|
value: 45,
|
|
children: [
|
|
{ name: "Frontend", value: 15 },
|
|
{ name: "Backend", value: 20 },
|
|
{ name: "DevOps", value: 10 }
|
|
]
|
|
},
|
|
{
|
|
name: "Product",
|
|
value: 20,
|
|
children: [
|
|
{ name: "Design", value: 8 },
|
|
{ name: "Research", value: 7 },
|
|
{ name: "Analytics", value: 5 }
|
|
]
|
|
},
|
|
{
|
|
name: "Sales",
|
|
value: 30,
|
|
children: [
|
|
{ name: "Enterprise", value: 15 },
|
|
{ name: "SMB", value: 15 }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
const margin = { top: 20, right: 120, bottom: 20, left: 120 };
|
|
const width = 800 - margin.left - margin.right;
|
|
const height = 500 - margin.top - margin.bottom;
|
|
|
|
const svg = d3.select('.chart-container')
|
|
.append('svg')
|
|
.attr('width', width + margin.left + margin.right)
|
|
.attr('height', height + margin.top + margin.bottom)
|
|
.append('g')
|
|
.attr('transform', `translate(${margin.left},${margin.top})`);
|
|
|
|
const tooltip = d3.select('.tooltip');
|
|
|
|
// Learned Technique 1: Hierarchical tree layout
|
|
const tree = d3.tree().size([height, width]);
|
|
const root = d3.hierarchy(data);
|
|
|
|
root.x0 = height / 2;
|
|
root.y0 = 0;
|
|
|
|
// Learned Technique 2: Collapsible state
|
|
root.children.forEach(collapse);
|
|
|
|
function collapse(d) {
|
|
if (d.children) {
|
|
d._children = d.children;
|
|
d._children.forEach(collapse);
|
|
d.children = null;
|
|
}
|
|
}
|
|
|
|
update(root);
|
|
|
|
function update(source) {
|
|
const treeData = tree(root);
|
|
const nodes = treeData.descendants();
|
|
const links = treeData.links();
|
|
|
|
nodes.forEach(d => { d.y = d.depth * 180 });
|
|
|
|
const node = svg.selectAll('g.node')
|
|
.data(nodes, d => d.id || (d.id = ++i));
|
|
|
|
// Learned Technique 3: Smooth transitions
|
|
const nodeEnter = node.enter()
|
|
.append('g')
|
|
.attr('class', 'node')
|
|
.attr('transform', d => `translate(${source.y0},${source.x0})`)
|
|
.on('click', click);
|
|
|
|
nodeEnter.append('circle')
|
|
.attr('r', 1e-6)
|
|
.style('fill', d => d._children ? '#134e5e' : '#71b280');
|
|
|
|
nodeEnter.append('text')
|
|
.attr('dy', '.35em')
|
|
.attr('x', d => d.children || d._children ? -13 : 13)
|
|
.attr('text-anchor', d => d.children || d._children ? 'end' : 'start')
|
|
.text(d => d.data.name);
|
|
|
|
const nodeUpdate = nodeEnter.merge(node);
|
|
|
|
nodeUpdate.transition()
|
|
.duration(500)
|
|
.attr('transform', d => `translate(${d.y},${d.x})`);
|
|
|
|
nodeUpdate.select('circle')
|
|
.attr('r', 10)
|
|
.style('fill', d => d._children ? '#134e5e' : '#71b280');
|
|
|
|
const nodeExit = node.exit()
|
|
.transition()
|
|
.duration(500)
|
|
.attr('transform', d => `translate(${source.y},${source.x})`)
|
|
.remove();
|
|
|
|
nodeExit.select('circle').attr('r', 1e-6);
|
|
nodeExit.select('text').style('fill-opacity', 1e-6);
|
|
|
|
const link = svg.selectAll('path.link')
|
|
.data(links, d => d.target.id);
|
|
|
|
const linkEnter = link.enter()
|
|
.insert('path', 'g')
|
|
.attr('class', 'link')
|
|
.attr('d', d => {
|
|
const o = { x: source.x0, y: source.y0 };
|
|
return diagonal(o, o);
|
|
});
|
|
|
|
const linkUpdate = linkEnter.merge(link);
|
|
|
|
linkUpdate.transition()
|
|
.duration(500)
|
|
.attr('d', d => diagonal(d.source, d.target));
|
|
|
|
link.exit()
|
|
.transition()
|
|
.duration(500)
|
|
.attr('d', d => {
|
|
const o = { x: source.x, y: source.y };
|
|
return diagonal(o, o);
|
|
})
|
|
.remove();
|
|
|
|
nodes.forEach(d => {
|
|
d.x0 = d.x;
|
|
d.y0 = d.y;
|
|
});
|
|
}
|
|
|
|
function click(event, d) {
|
|
if (d.children) {
|
|
d._children = d.children;
|
|
d.children = null;
|
|
} else {
|
|
d.children = d._children;
|
|
d._children = null;
|
|
}
|
|
update(d);
|
|
}
|
|
|
|
function diagonal(s, d) {
|
|
return `M ${s.y} ${s.x}
|
|
C ${(s.y + d.y) / 2} ${s.x},
|
|
${(s.y + d.y) / 2} ${d.x},
|
|
${d.y} ${d.x}`;
|
|
}
|
|
|
|
let i = 0;
|
|
</script>
|
|
</body>
|
|
</html>
|