chart = {
const data = d3.hierarchy(rawdata);
data.x0 = data.hspace / 2; // previous position
data.y0 = 0; // previous position
data.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
if (d.depth && d.data.name.length != 7) d.children = null;
});
const datatree = d3.tree().nodeSize([dx, width / (data.height + 1)]);
const svg = d3
.create("svg")
.attr("viewBox", [-margin.left, -margin.top, width, dx]) // [0, 0, width, x1-x0 + tree.dx * 2], [0 0 width, height], [-w/2, h/2, w, h]
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.style("max-width", "100%")
.style("margin", "5px")
.style("user-select", "none");
const gLink = svg
.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5);
const gNode = svg
.append("g")
.attr("cursor", "pointer")
.attr("pointer-events", "all");
function update(source) {
const duration = d3.event && d3.event.altKey ? 2500 : 250;
const nodes = data.descendants().reverse();
const links = data.links();
// Compute the new tree layout.
datatree(data);
let left = data;
let right = data;
data.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 => {
d.children = d.children ? null : d._children;
update(d);
});
nodeEnter
.append("circle")
.attr("r", 2.5)
.attr("fill", d => (d._children ? "#555" : "#999"))
.attr("stroke-width", 10);
nodeEnter
.append("text")
.attr("dy", "0.31em")
.attr("x", d => (d._children ? -6 : 6))
.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");
// 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 nodes 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.
data.eachBefore(d => {
d.x0 = d.x;
d.y0 = d.y;
});
}
update(data);
return svg.node();
}
function autoBox() {
const { x, y, width, height } = this.getBBox();
return [x, y, width, height];
}
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
format = d3.format(",d")
color10 = d3.scaleOrdinal(d3.schemeCategory10)
colorhue = d3.scaleOrdinal(
d3.quantize(d3.interpolateRainbow, rawdata.children.length + 1)
)
colormagma = d3.scaleSequential([8, 0], d3.interpolateMagma)
dx = 20
margin = ({ top: 40, right: 40, bottom: 40, left: 40 })
rawdata = FileAttachment("ncbi_taxonomy3.json").json()
d3 = require("d3@5")
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.
