David Ramos is a designer and researcher, working in Washington, D.C. He uses visual tools—maps, images, websites, and events—to help us understand landscapes, past and future.
Public
Edited
Feb 22, 2023
{
const baseLayer = vl
.markCircle({ size: 300 })
.encode(
vl.x().fieldN("ay"),
vl.y().fieldN("course"),
vl.tooltip().count(),
vl.color().count().scale({ scheme: "tealblues" })
);
const textLayer = vl
.markText({ color: "#fff" })
.encode(vl.x().fieldN("ay"), vl.y().fieldN("course"), vl.text().count());
return vl.layer(baseLayer, textLayer).data(df).render({ renderer: "svg" }); // this option allows downloading SVGs as well as PNGs
}
{
const baseLayer = vl.markRect().encode(
vl.x().fieldN("ay"),
vl.y().fieldN("short_title").sort(vl.fieldN("course")),
vl.tooltip("course"),
vl
.color()
.count()
.scale({ range: ["#E1FE72", "#8BE68A", "#44C8A1", "#2AA5A8"] })
);
const textLayer = vl
.markText({ color: "#000", opacity: "0.5" })
.encode(
vl.x().fieldN("ay"),
vl.y().fieldN("short_title").sort(vl.fieldN("course")),
vl.text().count()
);
return vl.layer(baseLayer, textLayer).data(df).render({ renderer: "svg" }); // this option allows downloading SVGs as well as PNGs
}
/* appears you can't do a beeswarm plot in Vega-Lite because jitter isn't implemented */
vl
.markCircle({ color: "#000", opacity: "0.25" })
.data(df)
.transform(vl.calculate("random()").as("course"))
.encode(vl.x().fieldN("ay"), vl.y().fieldN("course").bin({ maxbins: 5 }))
.render({ renderer: "svg" }) // this option allows downloading SVGs as well as PNGs
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.
