Public
Edited
Apr 11
1 fork
// 2. Create interactive slider with 80% threshold as default
viewof First = Inputs.range([1, sortedData.length], {
step: 1,
label: `First (auto: ${count80} resources = 80% of total)`,
value: count80
});
// 1. Calculate the 80% threshold (auto-calculated "First" value)
count80 = {
const sorted = sortedData;
const totalAmount = d3.sum(sorted, d => d.Amount);
let cumulative = 0;
let count = 0;
for (const d of sorted) {
cumulative += d.Amount;
count++;
if (cumulative >= 0.8 * totalAmount) break;
}
return count;
};
// 3. Generate processed data with top N + Others
processedData = {
const top = sortedData.slice(0, First);
const others = sortedData.slice(First);
return others.length > 0 ? [
...top,
{
Resource: `Others (${others.length} more)`,
Quantity: d3.sum(others, d => d.Quantity),
Amount: d3.sum(others, d => d.Amount),
UnitMeasure: others[0]?.UnitMeasure || "—"
}
] : top;
}
// 4. Reactive plot using processedData
Plot.plot({
marginLeft: 200,
marginRight: 1,
marginTop: 30,
grid: true,
x: {
axis: "top",
domain: [-maxQuantity, maxAmount],
label: null
},
y: {
domain: processedData.map(d => d.Resource),
label: null
},
marks: [
Plot.barX(processedData, {
y: "Resource",
x1: -1500,
x2: d => -d.Quantity,
fill: "gray"
}),
Plot.barX(processedData, {
y: "Resource",
x1: 1500,
x2: "Amount",
fill: "yellow"
}),
Plot.text(["Quantity (←) | Amount (→)"], {
x: 0,
frameAnchor: "top",
dy: -30,
fontSize: 14,
fontWeight: "bold"
}),
Plot.ruleX([-1500, 1500], {
y: processedData.map(d => d.Resource),
y1: { band: 0 },
y2: { band: 1 },
strokeDasharray: "29,4"
}),
Plot.text(processedData, {
y: "Resource",
x: 0,
text: d => d.UnitMeasure,
})
]
})
maxAmount = Math.max(...processedData.map(d => d.Amount));
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.
