data = [
{instance: 1, fi: 0, cf:0 },
{instance: 2, fi: 0, cf:0 },
{instance: 3, fi: 1, cf:0 },
{instance: 4, fi: 1, cf:0 },
{instance: 5, fi: 0, cf:0 },
{instance: 6, fi: 1, cf:0 },
{instance: 7, fi: 1, cf:0 },
{instance: 8, fi: 0, cf:0 },
]
group = d3.group(data, d => d.nation, d => d.sport)
hierarchy = d3.hierarchy(group)
hierarchy.height
hierarchy.data // root, has the undefined key
hierarchy.children[0].data // nation
hierarchy.children[0].children[0].data // sport
hierarchy.children[0].children[0].children[0].data // athlete
md`${hierarchy.descendants().map(
d => `${"> ".repeat(d.depth)} ${d.data[0] || d.data["name"] || "root"} / \n`
)}`
hierarchy.count().value // count athletes in the hierarchy; equal to the original data.length
sums = hierarchy.copy().sum(d => d.earnings)
sums.value // total earnings, equal to d3.sum(data, d => d.earnings)
sums.find(d => d.data[0] === "United States").value // total earnings of athletes in the US
hierarchy.leaves().map(d => d.data)
Soccer = hierarchy.find(d => d.data[0] === "Soccer")
Federer = hierarchy.find(d => d.data.name === "Roger Federer")
Soccer.path(Federer).map(d => d.data[0] || d.data.name || "^root")
hierarchy.copy().sort((a, b) => d3.ascending(a.data[0], b.data[0])).children.map(d => d.data[0])
rollup = d3.rollup(
data,
v => d3.sum(v, d => d.earnings),
d => d.nation,
d => d.sport
)
R = d3.hierarchy(rollup)
R.leaves().map(d => [d.parent.data[0], ">", ...d.data].join(" "))
{
const names = [];
R.copy().sum(d => d[1]).eachBefore((d, index) =>
names.push(" ".repeat(d.depth) + `${d.depth}: ${d.data[0] || "All"}, ${d.value} (${index})`)
);
return html`<pre style="max-height: 15em; overflow-y: scroll;">${names.join(
"\n"
)}`;
}
{
const names = [];
R.copy().sum(d => d[1]).eachAfter((d, i) =>
names.push(" ".repeat(d.depth) + `${d.depth}: ${d.data[0] || "All"}, ${d.value} (${i})`)
);
return html`<pre style="max-height: 15em; overflow-y: scroll;">${names.join(
"\n"
)}`;
}
d3.median(hierarchy, d => d.data.earnings)
d3.extent(hierarchy, d => d.children && d.children.length)
d3 = require("d3@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.
