The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
x: {
// map all dates to 2000 by removing n * 365.24 days; Feb 29 will not create a gap
transform: (d) => d3.utcDay.offset(d, (2000 - d.getUTCFullYear()) * 365.24),
tickFormat: "%b",
line: true
},
y: { nice: true, grid: true, zero: true },
marks: [
Plot.line(data, {
x: "date",
y: "extent",
stroke: ({ date }) => date.getUTCFullYear(), // z separates the lines
})
]
})
Plot.plot({
x: {
// map all dates to 2000 (a *leap-year*) by removing n years; Feb 29 will be skipped if missing
transform: (d) => d3.utcYear.offset(d, 2000 - d.getUTCFullYear()),
tickFormat: "%b",
line: true
},
y: { nice: true, grid: true, zero: true, label: "↑ ice extent" },
marks: [
Plot.line(data, {
x: "date",
y: "extent",
stroke: ({ date }) => date.getUTCFullYear()
})
]
})
data = FileAttachment("sea-ice-extent.csv").csv({ typed: true })
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.
