Public
Edited
May 20, 2023
seattleZipCodes = FileAttachment("zip-codes-2015.geojson").json()
vl.markGeoshape()
.data(vl.json(seattleZipCodes).property("features")) // one way to specify that the geometry is stored in 'features'
.render()
vl.markGeoshape()
.data(seattleZipCodes.features) // another way
.render()
vl.markGeoshape()
.data(vl.json(seattleZipCodes).property("features"))
.project(vl.projection('mercator')) // set mercator projection
.width(500).height(500).render()
vl.markGeoshape()
.data(vl.json(seattleZipCodes).property("features"))
.project(vl.projection('identity').reflectY(true)) // need to reflectY or it's upside down!
.width(500).height(500).render()
viewof selectProjectionZipCodes = Inputs.select(projections, {label: "Projection"})
vl.markGeoshape()
.data(vl.json(seattleZipCodes).property("features"))
.project(vl.projection(selectProjectionZipCodes))
.width(500).height(500).render()
viewof selectProjectionWorld = Inputs.select(projections, {label: "Projection"})
vl.markGeoshape()
// https://vega.github.io/vega-lite-api/api/topojson.html
// if argument is a string, assumes that we're passing a url
.data(vl.topojson("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json").feature('countries'))
.project(vl.projection(selectProjectionWorld))
.width(500).height(500).render()
vl.markGeoshape()
.data(vl.json(seattleZipCodes).property("features"))
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldO('properties.GEOID10')
.legend({columns: 3, symbolLimit: 50, title: "Zip Codes"})
).width(500).height(500).render()
{
const zipCodeSelector = vl.selectPoint('selected_point') // create our selection param
.on('mouseover') // mouse over for selection
.clear('mouseout') // move mouse out of vis to clear selection
.bind('legend'); // also support clicking on the legend
return vl.markGeoshape({tooltip: true})
.data(vl.json(seattleZipCodes).property("features"))
.params(zipCodeSelector)
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldO('properties.GEOID10')
.legend({columns: 3, symbolLimit: 50, title: "Zip Codes"}),
vl.opacity().if(zipCodeSelector, vl.value(1)).value(0.1),
vl.tooltip().fieldN('properties.GEOID10')
).width(500).height(500).render()
}
seattleHousePricesByZipCode = FileAttachment("SeattleHousePricesByZipCode2017.csv").csv({typed: true})
printTable(seattleHousePricesByZipCode.slice(0, 5))
printTableTypes(seattleHousePricesByZipCode)
vl.markGeoshape({stroke:'gray', strokewidth:1})
.data(vl.json(seattleZipCodes).property("features"))
.transform(
vl.lookup("properties.GEOID10").from(
vl.data(seattleHousePricesByZipCode).key("ZipCode").fields(["MedianHousePrice"])
)
)
.encode(
vl.color().fieldQ('MedianHousePrice').title("Median House Price"),
vl.tooltip([{field:'properties.GEOID10', type:'ordinal', title:'Zip Code'},
{field:'MedianHousePrice', type:'quantitative', title:'Median House Price'}])
)
.project(vl.projection('identity').reflectY(true))
.title("Median House Prices in Seattle by Zip Code")
.width(500)
.height(500)
.render()
seattleCensusTracts2020 = FileAttachment("Census_2020_Tracts_with_PL_94-171_Redistricting__Data_for_1990-2020.topojson").json()
vl.markGeoshape()
.data(vl.topojson(seattleCensusTracts2020).feature('collection'))
.project(vl.projection('mercator'))
.width(500).height(700).render()
vl.markGeoshape()
.data(vl.topojson(seattleCensusTracts2020).feature('collection'))
.encode(
vl.color().fieldQ('properties.F2020_PL_data_TOT_POP'),
)
.project(vl.projection('mercator')).width(500).height(500).render()
vl.markGeoshape()
.data(vl.topojson(seattleCensusTracts2020).feature('collection'))
.transform(
vl.calculate('datum.properties.F2020_PL_data_TOT_POP -datum.properties.F2010_PL_data_TOT_POP').as('diff')
)
.encode(
vl.color().fieldQ('diff').title('Population Change')
)
.project(vl.projection('mercator'))
.width(580).height(700).render()
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.
