The avatar for @julesblm
Jules Blom
Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Sep 5, 2023
Fork of React Components Hierarchy as Nested Trees
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
rendered = eachBeforeTweaked(root)
Insert cell
// https://github.com/d3/d3-hierarchy/blob/75c84e80fe94f2aad4126fbcbc0e2975fd8f4b00/src/hierarchy/eachBefore.js
// https://observablehq.com/@d3/hierarchy-traversal-animated?collection=@d3/d3-hierarchy
async function* eachBeforeTweaked(node) {
var nodes = [node],
children,
i,
index = -1;

const elements = [];
const links = [];

while ((node = nodes.pop())) {
elements.push(node);

if (node.parent) {
links.push({ source: node.parent, target: node });
}

await Promises.delay(delay);

nestedTree.draw(elements, links);

yield { elements, links };

if ((children = node.children)) {
// if currentnode has children
for (i = children.length - 1; i >= 0; --i) {
nodes.push(children[i]); // add all children of that node to the nodes array, starting from end
// links.push({ source: node, target: children[i] });
}
}
}
return this;
}
Insert cell
mutable debug = {
}
Insert cell
Insert cell
Insert cell
Insert cell
function drawNode(enter) {
const node = enter
.append("g")
.attr("name", (d) => d.data.name)
.attr("transform", (d) => `translate(0,${d.index * nodeSize})`)
.attr("opacity", (d) => (!showOnlyDOM || d.data.isDOM ? 1 : 0)); // or filter?
// .on("click", onClick);

const nodeCircles = node
.append("circle")
.attr("r", 0)
.attr("cx", (d) => d.depth * nodeSize) // HOW TO UPDATE THIS?
.attr("fill", nodeCircleFill)
.attr("stroke", "black")
.transition()
.duration(450)
.attr("r", 3);

node
.append("text")
.attr("dy", "0.32em")
.attr("x", (d) => d.depth * nodeSize + 6) // HOW TO UPDATE THIS?
.attr("stroke", "white")
.attr("stroke-width", 0.2)
.attr("pain-order", "stroke")
.text((d) => `${d.data.name} (${d.data.id})`);

node.append("title").text((d) =>
d
.ancestors()
.reverse()
.map((d) => d.data.name)
.join("/")
);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chosenData = isGood ? wellComposed : illComposed
Insert cell
Insert cell
function arc({ x1, y1, x2, y2, r }) {

return `
M${x1},${y1}
A${r},${r} 0,0,${y1 < y2 ? 0 : 1} ${x2},${y2}`;
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
}
Insert cell
isLowercase = (string) => {
const firstLetter = string[0];

return firstLetter === firstLetter.toLowerCase();
}
Insert cell
function strokeDashOffset(d) {
return this.getTotalLength();
}
Insert cell
function strokeDashArray(d) {
const l = this.getTotalLength();
return `${l} ${l}`;
}
Insert cell
function linkPath(d) {
return `M${d.source.depth * nodeSize},${d.source.index * nodeSize}
V${d.target.index * nodeSize}
h${nodeSize}
`;
}
Insert cell
d3 = require("d3@7", "d3-interpolate-path@v2")
Insert cell

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.
Learn more