The avatar for @jonfroehlich
Jon E. Froehlich
UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
Public
CSE412 Spr'23
Edited
May 18, 2023
Fork of Vega-Lite Observable Template
•
50 forks
3
CSE412 Spr'23
Observable PlaygroundUsing p5js in ObservableIntro to Vega-LiteCSE412 Sp'23: Deceptive Visualization ExercisesCSE412 Sp'23: JSON vs. JavaScript Vega-Lite APICSE 412 Sp'23: Basic Interaction with Vega-Lite
CSE412: Cartographic Exercises
Insert cell
Insert cell
Insert cell
seattleZipCodes = FileAttachment("zip-codes-2015.geojson").json()
Insert cell
Insert cell
Insert cell
vl.markGeoshape()
.data(seattleZipCodes.features)
.render();
Insert cell
// Now let's play with projection
vl.markGeoshape()
.data(seattleZipCodes.features)
.project(vl.projection('mercator'))
.render();
Insert cell
projections
Insert cell
viewof selectZipcodeProjection = Inputs.select(projections, {label: "Projection:"})
Insert cell
vl.markGeoshape()
.data(seattleZipCodes.features)
.project(vl.projection(selectZipcodeProjection))
.render();
Insert cell
// select the identity projection
vl.markGeoshape()
.data(seattleZipCodes.features)
.project(vl.projection('identity').reflectY(true))
.render();
Insert cell
// Now color-code region by ZIP CODE :)
vl.markGeoshape()
.data(seattleZipCodes.features)
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldO('properties.GEOID10')
).render();
Insert cell
vl.markGeoshape()
.data(seattleZipCodes.features)
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldO('properties.GEOID10')
.legend({columns: 3, symbolLimit: 50})
.title("Seattle Zip Codes")
).render();
Insert cell
Insert cell
seattleNeighborhoodsTopojson = FileAttachment("City_Clerk_Neighborhoods.topojson").json()
Insert cell
Insert cell
vl.markGeoshape()
.data(vl.topojson(seattleNeighborhoodsTopojson).feature('City_Clerk_Neighborhoods'))
.project(vl.projection('identity').reflectY(true))
.width(500).height(500).render()
Insert cell
vl.markGeoshape()
.data(vl.topojson(seattleNeighborhoodsTopojson).feature('City_Clerk_Neighborhoods'))
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldN('properties.S_HOOD')
).width(500).height(500).render()
Insert cell
Insert cell
seattleCensusTracts2020 = FileAttachment("Census_2020_Tracts_with_PL_94-171_Redistricting__Data_for_1990-2020.topojson").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
projections = ['naturalEarth1',
'albers',
'azimuthalEqualArea',
'azimuthalEquidistant',
'conicConformal',
'conicEqualArea',
'conicEquidistant',
'equirectangular',
'identity',
'gnomonic',
'mercator',
'orthographic',
'stereographic',
'transverseMercator']
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