https://twitter.com/unkleho
Public
Edited
May 16, 2023
Sunburst(data, {
label: (d) => d?.label, // display text
value: (d) => d?.total, // angle of each arc
title: (d, n) => d?.total?.toLocaleString(), // hover text
color: d3.schemeSet1,
width,
height: 720
})
viewof showTotals = Inputs.radio([true, false], {
label: "Show totals",
value: true
})
data = ({
label: "Birth date accuracy IAM",
children: Array.from(
d3.group(animalsCreatedByBirthDateAccuracy, (d) => d.BIRTHDATEACCURACY)
).map((d) => {
const accuracy = d[0];
const value = d[1];
const total = d3.sum(d[1], (d) => d.TOTAL);
return {
label: `${accuracyToLabel[accuracy]}${showTotals ? ` (${total})` : ""}`,
value,
children: Array.from(d3.group(value, (d) => d.SPECIES)).map((d) => {
const speciesLabel = d[0];
const speciesValue = d[1];
const total = d3.sum(d[1], (d) => d.TOTAL);
return {
label: `${speciesLabel}${showTotals ? ` (${total})` : ""}`,
children: Array.from(d3.group(speciesValue, (d) => d.SEX)).map(
(d) => {
const sexLabel = d[0];
const total = d3.sum(d[1], (d) => d.TOTAL);
return {
label: `${sexLabel}${showTotals ? ` (${total})` : ""}`,
total
};
}
)
};
})
};
})
})
import {Sunburst} from "@d3/sunburst"
Animals created by birth date accuracy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
animalsCreatedByBirthDateAccuracy
X
—
BIRTHDATEACCURACY
Y
TOTAL
Color
SPECIES
Size
—
Facet X
—
Facet Y
SEX
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Mobs created by birth date accuracy (1).csv
Type Table, then Shift-Enter. Ctrl-space for more options.
mobsData
X
birthDateAccuracy
Y
size
Color
species
Size
—
Facet X
species
Facet Y
sex
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Sunburst(mobsSunburstData, {
label: (d) => d?.label, // display text
value: (d) => d?.total, // angle of each arc
title: (d, n) => d?.total?.toLocaleString(), // hover text
color: d3.schemeSet1,
width,
height: 720
})
mobsSunburstData = ({
label: "Birth date accuracy Mob",
children: Array.from(d3.group(mobsData, (d) => d.birthDateAccuracy)).map(
(d) => {
const accuracy = d[0];
const value = d[1];
const total = d3.sum(d[1], (d) => d.total);
return {
label: accuracy,
// label: `${accuracyToLabel[accuracy]}${showTotals ? ` (${total})` : ""}`,
value,
children: Array.from(d3.group(value, (d) => d.species)).map((d) => {
const speciesLabel = d[0];
const speciesValue = d[1];
const total = d3.sum(d[1], (d) => d.total);
return {
label: `${speciesLabel}${showTotals ? ` (${total})` : ""}`,
children: Array.from(d3.group(speciesValue, (d) => d.sex)).map(
(d) => {
const sexLabel = d[0];
const total = d3.sum(d[1], (d) => d.total);
return {
label: `${sexLabel}${showTotals ? ` (${total})` : ""}`,
total
};
}
)
};
})
};
}
)
})
accuracyToLabel = ({
before_year: "Not tracked",
day: "Day",
week: "Week",
month: "Month",
year: "Year"
})
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.
