Public
Edited
Feb 21, 2024
vl.markGeoshape()
.data(seattleZipCodes.features)
.render()
vl.markGeoshape()
.data(seattleZipCodes.features)
.project(vl.projection(select))
.render()
viewof select = Inputs.select(projections, {label: "Choose Projection Type"})
vl.markGeoshape()
.data(seattleZipCodes.features)
.project(vl.projection('identity').reflectY(true))
.render()
vl.markGeoshape()
.data(seattleZipCodes.features)
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldO('properties.GEOID10').scale({scheme: 'reds'}).title('Seattle Zip Code').legend({columns: 3, symbolLimit: 99})
)
.render()
vl.markGeoshape()
.data(vl.topojson(seattleNeighborhoods).feature('City_Clerk_Neighborhoods'))
.project(vl.projection('identity').reflectY(true))
.width(500).height(500)
.render()
vl.markGeoshape()
.data(vl.topojson(seattleNeighborhoods).feature('City_Clerk_Neighborhoods'))
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldN('properties.S_HOOD').title('City Clerk Neighborhoods').legend({columns: 3, symbolLimit: 99})
)
.width(500).height(500)
.render()
projections = ['naturalEarth1',
'albers',
'azimuthalEqualArea',
'azimuthalEquidistant',
'conicConformal',
'conicEqualArea',
'conicEquidistant',
'equirectangular',
'identity',
'gnomonic',
'mercator',
'orthographic',
'stereographic',
'transverseMercator']
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.
