Public
Edited
Jun 17, 2023
Plot.plot({
inset: 4,
x: { ticks: "month", label: "Date", tickFormat: "%b" },
y: { label: "Temperature (°C)", ticks: 10, grid: true },
color: {
type: "linear",
scheme: "OrRd",
legend: true,
tickFormat: "d"
},
marks: [
Plot.frame({ anchor: "bottom", stroke: "#bbb" }),
Plot.line(data[region], {
x: "yearAgnosticDate",
y: "temp",
z: "year",
filter: (d) =>
d.year !== 2023 &&
d.temp !== null && // interpolate through Feb 29 when needed
d.year >= yearInterval[0] &&
d.year <= yearInterval[1],
stroke: "year",
strokeWidth: 1
}),
Plot.line(data[region], {
...y2023LineAttrs,
stroke: "white",
strokeWidth: 3
}),
Plot.line(data[region], {
...y2023LineAttrs,
stroke: "black",
strokeWidth: 1.25
})
]
})
y2023LineAttrs = ({
x: "yearAgnosticDate",
y: "temp",
z: "year",
filter: (d) => d.year === 2023 && d.temp !== null // interpolate through Feb 29 when needed
})
maxYear = d3.max(data["World"], (d) => d.year)
minYear = d3.min(data["World"], (d) => d.year)
regions = [
["World", "world"],
["Northern Hemisphere", "nh"],
["Southern Hemisphere", "sh"],
["Arctic", "arctic"],
["Antarctic", "antarctic"],
["Tropics", "tropics"]
]
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.
