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 19, 2023
1 fork
vl.markCircle()
.data(df)
.encode(
vl.x().fieldQ("Enrollment FY24")
)
.render()
vl
.markCircle({ opacity: 0.8 })
.data(df)
.encode(
vl.x().fieldQ("Change in Enrollment").axis({ tickCount: 5 }),
vl.y().fieldQ("Change from Prior Year Submitted").axis({ tickCount: 8 }),
vl.size().fieldQ("Enrollment FY24"),
vl.tooltip(["School Name", "Enrollment FY24"]),
vl
.color()
.fieldQ("Submitted Budget 2023")
.scale({ range: ["#FAA0D3", "#BA8BBC", "#80759C", "#4F5C78", "#284253"] })
)
.width(700)
.height(700)
.render({ renderer: "svg" }) // this option allows downloading SVGs as well as PNGs
vl.markCircle({ opacity: 0.8 })
.data(df)
.encode(
vl.x().fieldQ("Change in Enrollment").axis({ tickCount: 5 }),
vl.y().fieldQ("Change from Prior Year Submitted").axis({ tickCount: 8 }),
vl.size().fieldQ("Enrollment FY24"),
vl.tooltip().fieldN("School Name"),
vl.color().fieldQ("Submitted Budget 2023")
.scale({ range: ["#FAA0D3", "#BA8BBC", "#80759C", "#4F5C78", "#284253"]}),
vl.column().fieldN("Grade Level")
)
.width(200)
.height(200)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
vl.markCircle({ opacity: 0.5 })
.data(df)
.encode(
vl.x().fieldQ("Change in Enrollment").axis({ tickCount: 4 }),
vl.y().fieldQ("Change from Prior Year Submitted").axis({ tickCount: 4 }),
vl.size().fieldQ("Enrollment FY24"),
vl.tooltip().fieldN("School Name"),
vl.color().fieldN("Grade Level").scale({ scheme: "category10" }),
vl.column().fieldN("Ward")
)
.width(200)
.height(200)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
{
const pastLayer = vl.markCircle({ opacity: 1, color: "#eee" }).encode(
vl.x().fieldQ("Change in Enrollment").axis({ tickCount: 5 }),
vl.y().fieldQ("Initial School Allocation").axis({ tickCount: 8 }),
/* vl.color().fieldN("Grade Level").scale({ scheme: "category10" }), */
vl.size().fieldQ("Enrollment FY24"),
vl.tooltip().fieldN("School Name")
);
const barLayer = vl.markBar({ opacity: 1, color: "#eee", width: 3 }).encode(
vl.y().fieldQ("Initial School Allocation"),
vl.y2().fieldQ("Submitted Budget 2023"),
vl.x().fieldQ("Change in Enrollment"),
vl.tooltip().fieldN("School Name")
/* vl.color().fieldN("Grade Level").scale({ scheme: "category10" }) */
);
const circleLayer = vl
.markCircle({ opacity: 0.9 })
.encode(
vl.x().fieldQ("Change in Enrollment").axis({ tickCount: 5 }),
vl.y().fieldQ("Submitted Budget 2023").axis({ tickCount: 8 }),
vl.size().fieldQ("Enrollment FY24"),
vl.tooltip().fieldN("School Name"),
vl.color().fieldN("Grade Level").scale({ scheme: "category10" })
);
return vl
.layer(pastLayer, barLayer, circleLayer)
.data(df)
.height(600)
.width(600)
.render({ renderer: "svg" });
}
{
const triangleLayer = vl
.markPoint({ size: 400, shape: "wedge", filled: true, opacity: 0.9 })
.encode(
vl.x().fieldQ("Change in Enrollment").axis({ tickCount: 5 }),
vl.y().fieldQ("Change from Prior Year Submitted").axis({ tickCount: 8 }),
vl.color().fieldN("Grade Level").scale({ scheme: "category10" }),
vl.angle().fieldQ("Change in ELL FTE")
);
const circleLayer = vl
.markCircle({ opacity: 1 })
.encode(
vl.x().fieldQ("Change in Enrollment").axis({ tickCount: 5 }),
vl.y().fieldQ("Change from Prior Year Submitted").axis({ tickCount: 8 }),
vl.size().fieldQ("Enrollment FY24"),
vl.tooltip().fieldN("Change in ELL FTE"),
vl.color().fieldN("Grade Level").scale({ scheme: "category10" })
);
return vl
.layer(triangleLayer, circleLayer)
.data(df)
.height(400)
.width(400)
.render({ renderer: "svg" });
}
vl.markBar()
.data(df)
.encode(
vl.x().fieldQ("Enrollment FY24"),
vl.y().fieldN("School Name").sort(vl.fieldQ("Enrollment FY24")),
vl.color().fieldQ("Change in Enrollment").scale({ range: ["#f00", "#aab", "#00f"], domain: [-400, 400] }),
vl.tooltip().fieldQ("Change in Enrollment")
)
.render({renderer: 'svg'}) // this option allows downloading SVGs as well as PNGs
vl.markCircle()
.data(df)
.encode(
vl.x().fieldQ("Change in Enrollment"),
vl.y().fieldN("School Name").sort(vl.fieldQ("Enrollment FY24")),
vl.size().fieldQ("Enrollment FY24"),
vl.tooltip().fieldQ("Enrollment FY24")
)
.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.
