Plot.plot({
x: {
label: "Oct-Nov Precipitation (inches)",
},
y: {
label: "Wateryear (Oct-Sep) Precipitation (inches)",
},
marks: [
Plot.frame(),
// all years
Plot.dot(data, {
y: "y",
x: "x",
r: 4,
fill: "#ddd",
title: (d) => dateFormat(d.date),
}),
// highlight recent years 2000-2021
Plot.dot(data.filter(({ date }) => date.getUTCFullYear() >= 2000), {
y: "y",
x: "x",
r: 4,
stroke: "#888888",
title: (d) => dateFormat(d.date),
}),
Plot.text(data.filter(({ date }) => date.getUTCFullYear() >= 2000 && !elninoYears.includes(date.getUTCFullYear())), {
y: "y",
x: "x",
text: (d) => `${d.date.getUTCFullYear()}`,
dx: -6,
dy: -1,
fill: "#888888",
textAnchor: "end",
}),
// base period wateryear
Plot.ruleX([options.find(d => d.id === "octnov").base_value], {
stroke: "#377eb8",
strokeDasharray: 4,
}),
Plot.text([options.find(d => d.id === "octnov")], {
y: (d) => d.base_value,
text: (d) => `${d.base_period} Oct+Nov\nAverage ${d.base_value} inches`,
dx: -60,
dy: -15,
textAnchor: "start",
}),
// base period oct-nov
Plot.ruleY([options.find(d => d.id === "wateryear").base_value], {
stroke: "#377eb8",
strokeDasharray: 4,
}),
Plot.text([options.find(d => d.id === "wateryear")], {
y: (d) => d.base_value,
text: (d) => `${d.base_period} Wateryear\nAverage ${d.base_value} °F`,
dx: 285,
dy: -10,
textAnchor: "end",
}),
// El Nino years
Plot.dot(data.filter(({ date }) => elninoYears.includes(date.getUTCFullYear())), {
y: "y",
x: "x",
r: 4,
stroke: "blue",
}),
Plot.text(data.filter(({ date }) => elninoYears.includes(date.getUTCFullYear())), {
y: "y",
x: "x",
text: (d) => `${d.date.getUTCFullYear()}\nEl Nino`,
dx: -6,
dy: -1,
fill: "blue",
textAnchor: "end",
}),
// 95% Confidence Interval
Plot.areaY(intervalData, {
x: "x", y1: "left", y2: "right",
fill: "#a65628",
fillOpacity: 0.3,
}),
// Trend line
Plot.line(intervalData, {
x: "x",
y: d => predict(d.x),
stroke: "#a65628",
strokeWidth: 2,
}),
]
})
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.
