Unlisted
Edited
Jun 18, 2024
vc_data = await FileAttachment("vc_data_anon.csv").text()
vc_data_parsed = d3.csvParse(vc_data)
hierarchy = d3.stratify()
.id(d => d.name)
.parentId(d => d.parent ? d.parent : null)
(vc_data_parsed);
viewof valuechainTree = {
const width = 928;
const marginTop = 20;
const marginRight = 10;
const marginBottom = 20;
const marginLeft = 80;
const dx = 15;
const dy = (width - marginRight - marginLeft) / (1 + hierarchy.height);
const tree = d3.tree().nodeSize([dx, dy]);
const diagonal = d3
.linkHorizontal()
.x((d) => d.y)
.y((d) => d.x);
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", dx)
.attr("viewBox", [-marginLeft, -marginTop, width, dx])
.attr(
"style",
"max-width: 100%; height: auto; font: 10px sans-serif; user-select: none;"
);
const gLink = svg
.append("g")
.attr("fill", "none")
.attr("stroke", "#FFA500")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 5);
const gNode = svg
.append("g")
.attr("cursor", "pointer")
.attr("pointer-events", "all");
function update(event, source) {
const duration = event?.altKey ? 2500 : 250;
const nodes = hierarchy.descendants().reverse();
const links = hierarchy.links();
tree(hierarchy);
let left = hierarchy;
let right = hierarchy;
hierarchy.eachBefore((node) => {
if (node.x < left.x) left = node;
if (node.x > right.x) right = node;
});
const height = right.x - left.x + marginTop + marginBottom;
const transition = svg
.transition()
.duration(duration)
.attr("height", height)
.attr("viewBox", [-marginLeft, left.x - marginTop, width, height])
.tween(
"resize",
window.ResizeObserver ? null : () => () => svg.dispatch("toggle")
);
const node = gNode.selectAll("g").data(nodes, (d) => d.id);
const nodeEnter = node
.enter()
.append("g")
.attr("transform", (d) => `translate(${source.y0},${source.x0})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0)
.on("click", (event, d) => {
d.children = d.children ? null : d._children;
update(event, d);
});
nodeEnter
.append("circle")
.attr("r", 2.5)
.attr("fill", (d) => (d._children ? "#555" : "#999"))
.attr("stroke-width", 10);
nodeEnter
.append("text")
.attr("dy", ".31em")
.attr("x", (d) => (d._children ? -6 : 6))
.attr("text-anchor", (d) => (d._children ? "end" : "start"))
.text((d) => d.data.name)
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("stroke", "white")
.attr("paint-order", "stroke");
const nodeUpdate = node
.merge(nodeEnter)
.transition(transition)
.attr("transform", (d) => `translate(${d.y},${d.x})`)
.attr("fill-opacity", 1)
.attr("stroke-opacity", 1);
const nodeExit = node
.exit()
.transition(transition)
.remove()
.attr("transform", (d) => `translate(${source.y},${source.x})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0);
const link = gLink.selectAll("path").data(links, (d) => d.target.id);
const linkEnter = link
.enter()
.append("path")
.attr("d", (d) => {
const o = { x: source.x0, y: source.y0 };
return diagonal({ source: o, target: o });
});
link.merge(linkEnter).transition(transition).attr("d", diagonal);
link
.exit()
.transition(transition)
.remove()
.attr("d", (d) => {
const o = { x: source.x, y: source.y };
return diagonal({ source: o, target: o });
});
hierarchy.eachBefore((d) => {
d.x0 = d.x;
d.y0 = d.y;
});
}
hierarchy.x0 = dy / 2;
hierarchy.y0 = 0;
hierarchy.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
if (d.depth && d.data.name !== "Value chains") d.children = null;
});
update(null, hierarchy);
return svg.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.