open web tools for creativity and community
chart = {
// Don't clone it, so changes leak out and we can inspect them
const root = treeData;
root.x0 = dy / 2;
root.y0 = 0;
const radius = (dx * .9) / 2;
const svg = d3
.create("svg")
.attr("viewBox", [-margin.left, -margin.top, svgWidth, dx])
.style("font", "12px sans-serif")
.style("user-select", "none");
const defs = svg
.append("defs")
.append("clipPath")
.attr("id", "avatar-clip")
.append("circle")
.attr("r", radius);
const gLink = svg
.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.25)
.attr("stroke-width", 1.5);
const gNode = svg
.append("g")
.attr("cursor", "pointer")
.attr("pointer-events", "all");
function update(source, duration = 250) {
const nodes = root.descendants().reverse();
const links = root.links();
// Compute the new tree layout.
tree(root);
let left = root;
let right = root;
root.eachBefore(node => {
if (node.x < left.x) left = node;
if (node.x > right.x) right = node;
});
const height = right.x - left.x + margin.top + margin.bottom;
const transition = svg
.transition()
.duration(duration)
.attr("viewBox", [-margin.left, left.x - margin.top, width, height])
.tween(
"resize",
window.ResizeObserver ? null : () => () => svg.dispatch("toggle")
);
// Update the nodes…
const node = gNode.selectAll("g").data(nodes, d => d.id);
// Enter any new nodes at the parent's previous position.
const nodeEnter = node
.enter()
.append("g")
.attr("transform", d => `translate(${source.y0},${source.x0})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0)
.on("click", d => {
const toggleOpen = !Boolean(d.children);
const slow = d3.event && d3.event.altKey;
const duration = slow ? 2500 : 250;
if (d3.event && d3.event.shiftKey && d.parent) {
// Toggle all siblings at this level
d.parent.children.forEach((node, i) => {
// TODO extract the data/state/view and use async stuff here?
setTimeout(() => {
node.children = toggleOpen ? node._children : null;
update(node, duration);
}, duration * i);
});
} else {
d.children = toggleOpen ? d._children : null;
update(d, duration);
}
});
nodeEnter
.append("circle")
.attr("r", radius)
.attr("fill", "#fff")
.attr("stroke", d => (d._children ? "#555" : "#999"))
.attr("stroke-width", 1);
nodeEnter
.append("svg:image")
.attr("xlink:href", function(d) {
return d.data.img;
})
.attr("x", function(d) {
return -radius;
})
.attr("y", function(d) {
return -radius;
})
.attr("height", radius * 2)
.attr("width", radius * 2)
.attr("clip-path", "url(#avatar-clip)");
const labelX = d => (d._children ? -radius * 1.2 : radius * 1.2);
// Name
nodeEnter
.append("text")
.attr("dy", "-0em")
.attr("x", labelX)
.attr("text-anchor", d => (d._children ? "end" : "start"))
.text(d => d.data.name)
.clone(true)
.lower()
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("stroke", "white");
// Title
nodeEnter
.append("text")
.attr("dy", "1em")
.attr("x", labelX)
.attr("text-anchor", d => (d._children ? "end" : "start"))
.attr("fill", "#999")
.style("font", "10px sans-serif")
.text(d => d.data.title)
.clone(true)
.lower()
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("stroke", "white")
.append("tspan")
.attr("dy", "0.3em");
// Show node's collapsed children count
// nodeEnter
// .append("circle")
// .attr("r", 2)
// .attr("cx", dx / 2 + 6)
// .attr("fill", "none")
// .attr("stroke", "#555")
// .attr("stroke-width", 1)
// .attr('opacity', d => (!d.children && d._children ? 100 : 0));
// Transition nodes to their new position.
const nodeUpdate = node
.merge(nodeEnter)
.transition(transition)
.attr("transform", d => `translate(${d.y},${d.x})`)
.attr("fill-opacity", 1)
.attr("stroke-opacity", 1);
// Transition exiting nodes to the parent's new position.
const nodeExit = node
.exit()
.transition(transition)
.remove()
.attr("transform", d => `translate(${source.y},${source.x})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0);
// Update the links…
const link = gLink.selectAll("path").data(links, d => d.target.id);
// Enter any new links at the parent's previous position.
const linkEnter = link
.enter()
.append("path")
.attr("d", d => {
const o = { x: source.x0, y: source.y0 };
return diagonal({ source: o, target: o });
});
// Transition links to their new position.
link
.merge(linkEnter)
.transition(transition)
.attr("d", diagonal);
// Transition exiting links to the parent's new position.
link
.exit()
.transition(transition)
.remove()
.attr("d", d => {
const o = { x: source.x, y: source.y };
return diagonal({ source: o, target: o });
});
// Stash the old positions for transition.
root.eachBefore(d => {
d.x0 = d.x;
d.y0 = d.y;
});
}
update(root);
return svg.node();
}
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
tree = d3.tree().nodeSize([dx, dy])
// Easier-to-read viz of the data
table(flatData)
// Note: treeData will be mutated by the main viz code on expand / collapse / layout
mutable treeData = {
const tree = d3
.stratify()
.id(d => d.id)
.parentId(d => d.manager)(flatData);
tree.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
});
return tree;
}
dx = 30
dy = Math.min(width / (treeData.height + 2), dx * 10)
//Math.max(Math.min(width / (treeData.height + 1), dx * 10), dx * 5)
svgWidth = Math.max(width, dy * (treeData.height + 1))
margin = ({ top: 16, right: dy, bottom: 16, left: dy })
md`# Libs`
d3 = require("d3@5")
import { table } from '@forresto/table'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
