Published
Edited
Mar 30, 2019
Fork of Tree-o-Matic
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
viewof algorithm = html`<select>
<option selected value="tree">Tree
<option value="cluster">Cluster
<option value="cluster-no-separation">Cluster (no separation)
</select>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = cstParseRows(sourceWithHeader, ([name, crosslinks, url]) => ({name, crosslinks, url})).children[1]
Insert cell
tree = data => {
const root = d3.hierarchy(data);
root.dx = 20;
root.dy = width / (root.height + 1);
let layout;
switch (algorithm) {
case "cluster": layout = d3.cluster(); break;
case "cluster-no-separation": layout = d3.cluster().separation(() => 1); break;
case "tree": layout = d3.tree(); break;
}
return layout.nodeSize([root.dx, root.dy])(root);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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