The end-to-end solution for building and hosting better data apps, dashboards, and reports.
animals = Plot.plot({
width: 610,
height: 380,
marginLeft: 60,
marginRight: 100,
marginTop: 30,
y: {label: null},
fy: {paddingInner: 0.27, label: null},
marks: [
Plot.text(data, {
frameAnchor: "left",
fontSize: 40,
text: (d) => `${emoji[d.animal]} `.repeat(Math.round(d.count / 1e6)),
dx: 20,
y: "animal",
fy: "country"
}),
Plot.axisFy({ fontSize: 18, frameAnchor: "top", dy: -18 })
],
caption: "Live stock (millions)"
})
emoji = ({ cattle: "🐄", sheep: "🐑", pigs: "🐖" })
// This dataset is purely made up.
data = [
{ animal: "pigs", country: "Great Britain", count: 1354979 },
{ animal: "cattle", country: "Great Britain", count: 3962921 },
{ animal: "sheep", country: "Great Britain", count: 10931215 },
{ animal: "pigs", country: "United States", count: 6281935 },
{ animal: "cattle", country: "United States", count: 9917873 },
{ animal: "sheep", country: "United States", count: 7084151 }
]
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.
