Plot.plot({
color: {
legend: true,
type: "linear",
scheme: "orrd",
label: "Average Temperature from 2000-2021",
},
x: {
label: "Average Temperature (°F)",
nice: true,
},
y: {
label: "Precipitation (inches)",
nice: true,
},
marks: [
Plot.frame(),
// all years
Plot.dot(data, {
y: "pr",
x: "tavg",
r: 4,
fill: "#ddd",
title: (d) => dateFormat(d.date),
}),
// color data between 2000-2021
Plot.dot(data.filter(({ date }) => date.getUTCFullYear() >= 2000), {
y: "pr",
x: "tavg",
r: 4,
fill: "tavg",
title: (d) => dateFormat(d.date),
}),
// base period temperature
Plot.ruleX([options.find(d => d.id === "tavg").base_value], {
stroke: "steelblue",
strokeDasharray: 4,
}),
Plot.text([options.find(d => d.id === "pr")], {
y: (d) => d.base_value,
text: (d) => `${d.base_period} Average\n Precipitation ${d.base_value} inches`,
dx: 285,
dy: -15,
textAnchor: "end",
}),
// base period precipitation
Plot.ruleY([options.find(d => d.id === "pr").base_value], {
stroke: "steelblue",
strokeDasharray: 4,
}),
Plot.text([options.find(d => d.id === "tavg")], {
x: (d) => d.base_value,
text: (d) => `${d.base_period} Average\nTemperature ${d.base_value} °F`,
dx: 10,
dy: -160,
textAnchor: "start",
}),
// El Nino years
Plot.dot(data.filter(({ date }) => elninoYears.includes(date.getUTCFullYear())), {
y: "pr",
x: "tavg",
r: 4,
stroke: "blue",
}),
Plot.text(data.filter(({ date }) => elninoYears.includes(date.getUTCFullYear())), {
y: "pr",
x: "tavg",
text: (d) => `${d.date.getUTCFullYear()}`,
dx: -6,
dy: -1,
fill: "blue",
textAnchor: "end",
}),
]
})
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.
