Plot.plot({
color: { range: ["black", "grey"] },
marginLeft: 105,
height: 400,
style: { fontSize: 15 },
title:
"British-Palestinian Independent Leanne Mohamad narrowly loses to Labour's Wes Streeting*",
subtitle: "Vote count, Ilford North",
caption:
"*As a member of the cabinet, this is incredibly embarrassing for Streeting. This was so embarrassing that The Standard decided to omit Mohamad's result from their article",
x: { axis: null },
y: { label: null },
marks: [
Plot.barX(data, {
x: "count",
y: "party",
fill: "flag",
sort: { y: "x", reverse: true, limit: 10 }
}),
Plot.text(data, {
text: (d) => `${Math.floor(d.count)}`,
y: "party",
x: "count",
textAnchor: "end",
dx: -6,
fill: "white",
fontSize: 12
})
]
})
data = [
// https://en.m.wikipedia.org/wiki/Ilford_North_(UK_Parliament_constituency)
{ party: "Labour", count: 15647, flag: "a" },
{ party: "Independent", count: 15119, flag: "a" },
{ party: "Conservative", count: 9619, flag: "b" },
{ party: "Reform", count: 3621, flag: "b" },
{ party: "Green", count: 1794, flag: "b" },
{ party: "Lib Dem", count: 1088, flag: "b" }
]
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.
