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",
ticks: data.map((d) => d.date).filter((d, i) => i % 12 === 0),
tickFormat: "%b\n%Y",
grid: true,
},
y: {
label: "",
grid: true,
},
marks: [
Plot.barX([0], {
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,
}),
Plot.barY(data, {
y: "anomaly",
x1: "date",
fill: "anomaly",
title: (d) => `${d3.timeFormat("%b %Y")(d.date)}: ${d.anomaly}`,
}),
Plot.ruleY([0]),
]
})
}