Published
Edited
May 15, 2022
Insert cell
Insert cell
Insert cell
aidToUkraine = [
{country : "United States", financial: 0, humanitarian: 3.235, military: 4.366 },
{country : "Poland", financial: 0.909, humanitarian: 0, military: 0.055 },
{country : "United Kingdom", financial: 0.0349, humanitarian: 0.4821, military: 0.204 },
]
Insert cell
Insert cell
vl.markBar()
.data(aidToUkraine)
.transform(
vl.fold("financial", "humanitarian", "military") // create the fold using the specified fields
).encode(
vl.x().fieldN('country'), // x-axis is countries
vl.y().fieldQ('value').title('Total Aid ($USD billions)'), // y-axis is the value of those fold fields
vl.color().fieldN('key') // color is the fold field names
).render();
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