Unlisted
Edited
Feb 17, 2023
Insert cell
Insert cell
chart("ellipsis")
Insert cell
presidents = FileAttachment("us-president-favorability.csv").csv({
typed: true
})
Insert cell
opinions = [
"Very Unfavorable %",
"Somewhat Unfavorable %",
"Don’t know %",
"Have not heard of them %",
"Somewhat Favorable %",
"Very Favorable %"
];
Insert cell
dates = new Map(presidents.map((p) => [p.Name, p["First Inauguration Date"]]))
Insert cell
chart("ellipsis", "monospace")
Insert cell
chart("clip")
Insert cell
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" })
]
})
Insert cell
Plot.barX(penguins, Plot.groupY({ x: "count" }, { y: "species" })).plot({
marginLeft: 80,
marks: Plot.axisY({ lineWidth: 4, textOverflow: "ellipsis" })
})
Insert cell
Plot.barY(penguins, Plot.groupX({ y: "count" }, { x: "species" })).plot({
marks: [Plot.axisX({ lineWidth: 2, textOverflow: "ellipsis" })]
})
Insert cell
Plot = FileAttachment("plot.umd.js").url().then(require)
Insert cell

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.
Learn more