The avatar for @dakoop
dakoop
Published
Edited
Oct 13, 2020
Fork of d3.hierarchy
1 star
Insert cell
Insert cell
Insert cell
family = d3.hierarchy({
name: "8",
children: [
{name: "4", children: [{name: "2", children: [{name: "1"}, {name: "3"}]},
{name: "6", children: [{name: "5"}, {name: "7"}]}]},
{name: "12", children: [{name: "10", children: [{name: "9"}, {name: "11"}]},
{name: "14", children: [{name: "13"}, {name: "15"}]}]}]
})
Insert cell
Insert cell
Insert cell
d3.hierarchy(familyChart)
Insert cell
Insert cell
Insert cell
arrays = d3.hierarchy([
[
"leaf #1",
[
"leaf #2",
"leaf #3",
"leaf #4"
]
]
], d => Array.isArray(d) ? d : undefined)
Insert cell
arrays = d3.hierarchy([
[
8,
[
6,
"leaf #3",
"leaf #4"
]
]
], d => Array.isArray(d) ? d : undefined)
Insert cell
Insert cell
Insert cell
parsed = d3.hierarchy(
"This is not proper parsing. But certainly fun!",
id => {
for (const split of [/[^\w\s]/, /\s/]) {
const children = id && id.split(split).filter(id => id.length > 0);
if (children.length > 1) return children;
}
}
)
Insert cell
Insert cell
Insert cell
chaos = d3.stratify()([
{id: "Chaos"},
{id: "Gaia", parentId: "Chaos"},
{id: "Eros", parentId: "Chaos"},
{id: "Erebus", parentId: "Chaos"},
{id: "Tartarus", parentId: "Chaos"},
{id: "Mountains", parentId: "Gaia"},
{id: "Pontus", parentId: "Gaia"},
{id: "Uranus", parentId: "Gaia"}
])
Insert cell
Insert cell
chaos instanceof d3.hierarchy
Insert cell
Insert cell
chaos.data
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
gaia = chaos.children[0]
Insert cell
pontus = chaos.children[0].children[1]
Insert cell
tartarus = chaos.children[3]
Insert cell
Insert cell
tartarus.children
Insert cell
Insert cell
Insert cell
Insert cell
gaia.ancestors()
Insert cell
Insert cell
pontus.ancestors()
Insert cell
Insert cell
Insert cell
gaia.descendants()
Insert cell
Insert cell
Insert cell
gaia.leaves()
Insert cell
Insert cell
Insert cell
tartarus.path(pontus)
Insert cell
Insert cell
gaia.links()
Insert cell
Insert cell
Insert cell
gaia.copy()
Insert cell
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
dx = 40
Insert cell
dy = 30
Insert cell
tree = d3.tree().nodeSize([dx, dy])
Insert cell
Insert cell
function graph(root, {
label = d => d.data.id,
highlight = () => false,
marginLeft = 40
} = {}) {
root = tree(root);

let x0 = Infinity;
let x1 = -x0;
root.each(d => {
if (d.x > x1) x1 = d.x;
if (d.x < x0) x0 = d.x;
});

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, x1 - x0 + dx * 2])
.style("overflow", "visible");
const g = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("transform", `translate(${dx - x0}, ${marginLeft})`);
const link = g.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("stroke", d => highlight(d.source) && highlight(d.target) ? "red" : null)
.attr("stroke-opacity", d => highlight(d.source) && highlight(d.target) ? 1 : null)
.attr("d", treeLink);
const node = g.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.x},${d.y})`);

node.append("circle")
.attr("fill", "white")
.attr("stroke", d => highlight(d) ? "red" : "#999")
.attr("r", 10);

node.append("text")
.attr("fill", d => highlight(d) ? "red" : null)
.attr("dy", "0.31em")
.attr("x", 0)
.attr("y", 0)
.attr("text-anchor", "middle")
.text(label)
.clone(true).lower()
.attr("stroke", "white");
return svg.node();
}
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