The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Feb 20, 2024
4 forks
6 stars
Plot.plot({
width,
height: 600,
y: { percent: true },
color: { type: "ordinal", scheme: "set2", legend: true },
marks: [
Plot.areaY(
members,
Plot.stackY({
x: "date",
y: "seats",
z: "state",
fill: "joined",
order: "joined",
title: (d) => `${d.state}\nJoined ${d.joined}`,
stroke: "#fff",
strokeOpacity: 0.3,
offset: "expand",
curve: "monotone-x"
})
),
Plot.text(
members,
Plot.selectLast(
Plot.stackY({
filter: (d) => d.date < new Date(2020, 0, 1),
x: "date",
y: "seats",
z: "state",
fill: "joined",
order: "joined",
text: "state",
textAnchor: "start",
dx: -17,
fill: "#000",
offset: "expand"
})
)
)
]
})
eu = FileAttachment("eu.csv").csv()
dates = eu.columns.slice(4)
dateParse = d3.utcParse("%b %Y")
members = Array.from(
aq.from(eu)
.fold(dates)
.rename({ key: "accession", value: "seats", Joined: "joined", State: "state" }),
(d) => ({ state: d.state, seats: d.seats, joined: d.joined, date: dateParse(d.accession) })
)
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.
