Published
Edited
Jun 7, 2020
3 stars
chart = {
const root = d3.hierarchy(data);
root.x0 = dy / 2;
root.y0 = 0;
root.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
if (d.depth && d.data.text !== "Never" && d.parent.data.text !== "Never") d.children = null; // pick some arbitrary set of nodes to show by default
});
const svg = d3.create("svg")
.attr("id", "chart")
.attr("viewBox", [-margin.left, -margin.top, width, dx])
.attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif')
.attr("font-size", 10)
.style("user-select", "none");
const gLink = svg.append("g")
.attr("id", "tree-links")
.attr("fill", "none")
.attr("stroke", "#202630")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5);
const gNode = svg.append("g")
.attr("id", "tree-nodes")
.attr("pointer-events", "all");
function update(source) {
const duration = d3.event && d3.event.altKey ? 1000 : 200;
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"));
svg.selectAll("#chart-title")
.transition(transition)
.attr("x", -margin.left)
.attr("y", left.x - margin.top)
.attr("dy", "1em");
svg.selectAll("#source")
.transition(transition)
.attr("x", -margin.left)
.attr("y", height + (left.x - margin.top))
.attr("dy", "-1em");
// Update the node data
const node = gNode.selectAll("g")
.data(nodes, d => d.id)
.join(
enter => { // Enter any new nodes at the parent's previous position.
const nodeEnter = enter.append("g")
.attr("class", "tree-nodes-dots")
.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 ? "#3c72d7" : "#fff")
.attr("stroke", d => d._children ? "#3c72d7" : "#949494")
.attr("stroke-width", 1)
.attr("cursor", d => d._children ? "pointer" : "default");
nodeEnter.append("text")
.attr("class", "tree-nodes-label")
.attr("dy", "0.31em")
.attr("x", d => d._children ? -6 : 6)
.attr("text-anchor", d => d._children ? "end" : "start")
.attr("font-size", d => d.depth === 0 ? 18: 10)
.attr("cursor", d => d._children ? "pointer" : "default")
.text(d => d.data.text)
.clone(true).lower()
.attr("aria-hidden", "true") // hide duplicate text from screen readers / assistive tech
.style("user-select", "none")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("stroke", "white");
return nodeEnter;
},
update => update,
exit => { // Transition exiting nodes to the parent's new position
exit.transition(transition).remove()
.attr("transform", d => `translate(${source.y},${source.x})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0);
return exit;
}
);
// Transition nodes to their new position
node.transition(transition)
.attr("transform", d => `translate(${d.y},${d.x})`)
.attr("fill-opacity", 1)
.attr("stroke-opacity", 1);
// Update the links
const link = gLink.selectAll("path")
.data(links, d => d.target.id)
.join(
enter => { // Enter any new links at the parent's previous position
const enterLink = enter.append("path")
.attr("d", d => {
const o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
return enterLink;
},
update => update,
exit => { // Transition exiting nodes to the parent's new position
exit.transition(transition).remove()
.attr("d", d => {
const o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
});
}
);
// Transition links to their new position
link.transition(transition)
.attr("d", diagonal);
// Stash the old positions for transition
root.eachBefore(d => {
d.x0 = d.x;
d.y0 = d.y;
});
}
svg.append("text")
.attr("id", "chart-title")
.attr("x", 0)
.attr("y", 0)
.attr("y", -margin.top)
.attr("dy", "-1em")
.attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif')
.attr("font-weight", 600)
.attr("font-size", 18)
.text(data.chartTitle);
svg.append("text")
.attr("id", "source")
.attr("x", -margin.left)
.attr("y", dx)
.attr("font-family", '"Work Sans", "Raleway", "Helvetica Neue", Helvetica, sans-serif')
.attr("font-weight", 400)
.attr("font-size", 10)
.text('Source: Wikipedia · Graphic: @DiDoesDigital');
update(root);
return svg.node();
}
text = FileAttachment("n_text-6 Jun 2020.json.json").json()
// text = fetch(`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=parse&prop=text&page=List_of_proverbial_phrases§ion=${section_number}`).then(response => response.json())
section_letter = "N";
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
tree = d3.tree().nodeSize([dx, dy])
dx = 10
dy = (width / 12) - margin.left - margin.right // adjusted for the depth of nodes and margins
// dy = (width / 12)
// dy = (width / 6)
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.
