graph = {
let current = 0,
N = chaos.descendants().length;
const view = d3.create("div").style("user-select", "none");
function draw(node) {
view
.html("")
.node()
.appendChild(
digraph(
chaos.copy()[order]((d, i) => {
d.label = `${d.data.id} ${i === 0 ? "*" : ""}`;
d.style = i === current ? "filled" : "";
return d;
})
)
);
}
const increment = () => draw((current = ++current % N));
view.on("click", increment);
d3.select(document.body).on("keyup", increment);
draw();
return view.node();
}
function digraph(hierarchy) {
const id = new Map(hierarchy.descendants().map((node, i) => [node, i]));
return dot`digraph {
rankdir = TB;
node [fontname="var(--sans-serif)" fontsize=12];
${hierarchy
.descendants()
.map(
node =>
`"${id.get(node)}" [label="${node.label}"] [style="${node.style}"]`
)
.join("; ")}
${hierarchy
.links()
.map(({ source, target }) => `"${id.get(source)}" -> "${id.get(target)}"`)
.join("; ")}
}`;
}
dot = require("@observablehq/graphviz@0.2")
import {chaos} from "@d3/visiting-a-d3-hierarchy"
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.
