chart = (dataset) => {
const data = dataset.data.filter(({ date }) => date.getUTCFullYear() >= filterYear);
return Plot.plot({
width,
marginBottom: 50,
color: {
legend: true,
type: dataset.colorType,
scheme: dataset.colorScheme,
reverse: dataset.colorReverse,
label: () => legendLabel(dataset),
},
x: {
label: "",
axis: "top",
// label every 12th bar, i.e. the bar corresponding to January for each year
ticks: data.map((d) => d.date).filter((d, i) => i % 12 === 0),
tickFormat: "%b\n%Y",
grid: true,
},
y: {
label: "",
grid: true,
},
marks: [
// 2012 -2016 drought
Plot.barX([0], {
// Droughts years are measured using water years (Oct-Sep)
x1: new Date(2011, 9, 1),
x2: new Date(2016, 8, 30),
fill: "#ddd",
fillOpacity: 0.4,
clip: true
}),
Plot.text(["2012-2016 Drought"], {
x: new Date(2014, 7, 1),
y: 4,
lineWidth: 6,
textAnchor: "middle",
clip: true,
fontSize: 12,
lineHeight: 1.5,
}),
// All data
Plot.barY(data, {
y: "anomaly",
x1: "date",
fill: "anomaly",
title: (d) => `${d3.timeFormat("%b %Y")(d.date)}: ${d.anomaly}`,
}),
Plot.ruleY([0]),
]
})
}
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.
