Plot.plot({
x: {
label: null,
type: "point",
// the month values in the data are from 1-12
// to create a new Date object in JavaScript month argument should start from 0
// the year 2000 used to create a new Date object is random
tickFormat: (d) => d3.timeFormat("%b")(new Date(2000, d-1, 1)),
},
y: {
grid: true,
label: "↑ Precipitation (inches)"
},
marks: [
Plot.ruleY([0]),
// all years
Plot.line(data, {
...xyz,
stroke: "LightGray",
}),
// current year
Plot.line(data.filter(({ Year }) => Year === 2022), {
...xyz,
stroke: "black",
strokeWidth: 2,
}),
Plot.text(data.filter(({ Year }) => Year === 2022), Plot.selectLast({
...xyz,
...label,
fill: "black",
fontWeight: 600,
})),
// median
Plot.line(stats, {
x: "Month",
y: "Median",
stroke: "#9e6b90",
}),
Plot.text(stats, Plot.selectLast({
x: "Month",
y: "Median",
...label,
text: (d) => "Median",
fill: "#9e6b90",
})),
// wettest years
Plot.line(wettest, {
...xyz,
stroke: "#714dbf",
}),
Plot.text(wettest, Plot.selectLast({
...xyz,
...label,
fill: "#714dbf",
})),
// driest years
Plot.line(driest, {
...xyz,
stroke: "#cf9270",
}),
Plot.text(driest, Plot.selectLast({
...xyz,
...label,
fill: "#cf9270",
})),
]
})
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.
