chart = (textOverflow, monospace) =>
Plot.plot({
width: 500,
height: textOverflow ? 730 : 1100,
marginLeft: 95,
marginRight: 54,
x: { percent: true, label: "opinion (%)" },
y: { domain: Plot.valueof(presidents, "Name") },
color: { domain: opinions, scheme: "rdylbu" },
marks: [
Plot.axisX({ monospace }),
Plot.axisY({ lineWidth: monospace ? 9 : 6, textOverflow, monospace }),
Plot.axisY({
anchor: "right",
tickFormat: (name) => `${dates.get(name).getUTCFullYear()}`,
label: "First inauguration date",
tickSize: 0,
monospace
}),
Plot.barX(presidents, {
x: "share",
fill: "opinion",
y: "President",
title: (d) => d.opinion.replace("%", `${d.share}%`),
offset: "normalize",
transform: (data, facets) => ({
data: data.flatMap((p) =>
opinions.map((o) => ({
President: p.Name,
share: p[o],
opinion: o
}))
),
facets: facets.map((f) =>
Array.from(f, (i) =>
d3.range(i * opinions.length, (i + 1) * opinions.length)
).flat()
)
})
}),
Plot.tickX([0.5], { stroke: "white" })
]
})