Unlisted
Edited
Oct 25, 2023
Insert cell
Insert cell
Plot.plot({
y: { grid: true },
fy: { tickFormat: "%Y" },
x: { tickFormat: "%b", ticks: 12 },
marks: [
Plot.rectY(
crimea,
Plot.stackY({
// see also: https://observablehq.com/@observablehq/plot-cyclical-time-scale
// see also: https://observablehq.com/@nachocab/weight#cell-878
// x: d => d3.utcDay.offset(new Date("1970-01-01"), d3.utcDay.count(d3.utcYear(d.date), d.date)),
x: (d) => +d.date - +d3.utcYear(d.date),

// x: "date",
y: "deaths",
fy: (d) => d3.utcYear(d.date),
interval: "month",
fill: "cause",
tip: true
})
),
Plot.ruleY([0])
]
})
Insert cell
// adapted from https://observablehq.com/@mayagans/from-ggplot2-to-plot
scalefreeY = (options) =>
Plot.initializer(options, (data, facets, channels, scales, dimensions) => {
const {
y2: { value: Y, scale }
} = channels;
for (const index of facets) {
const y = d3
.scaleBand(d3.sort(Array.from(index, (i) => Y[i])), [
dimensions.marginTop,
dimensions.height - dimensions.marginBottom
])
.padding(0.5);
for (const i of index) Y[i] = y(Y[i]);
}
return { data, facets, channels: { y: { value: Y } } };
})
Insert cell
//adapted from https://observablehq.com/@mayagans/from-ggplot2-to-plot
scalefreeX = (options) =>
Plot.initializer(options, (data, facets, channels, scales, dimensions) => {
const {
x1: { value: X1 },
x2: { value: X2 }
} = channels;
for (const index of facets) {
const x = d3.scaleUtc(
d3.extent(Array.from(index, (i) => [X1[i], X2[i]]).flat()),
[dimensions.marginLeft, dimensions.width - dimensions.marginRight]
);
for (const i of index) (X1[i] = x(X1[i])), (X2[i] = x(X2[i]));
}
return { data, facets, channels: { x1: { value: X1 }, x2: { value: X2 } } };
})
Insert cell
crimea = {
const data = await FileAttachment("crimean-war.csv").csv({ typed: true });
return data.columns.slice(2)
.flatMap((cause) => data.map(({ date, [cause]: deaths }) => ({ date, cause, deaths })));
}
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