Public
Edited
May 19, 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)
{
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({stroke: 'grey', tooltip: true})
.data(vl.json(seattleZipCodes).property("features"))
.transform(
vl.lookup("properties.GEOID10").from(
vl.data(seattleHousePricesByZipCode)
.key("ZipCode").fields(["MedianHousePrice"])
)
)
.params(zipCodeSelector)
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldQ('MedianHousePrice')
.legend({color: {type: "gradient"}, title: "House Price"}),
vl.opacity().if(zipCodeSelector, vl.value(1)).value(0.1),
vl.tooltip().fieldN('MedianHousePrice')
).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'))
.project(vl.projection('mercator'))
.encode(
vl.color().fieldQ("properties.F2020_PL_data_TOT_POP")
)
.width(500).height(700).render()
vl.markGeoshape()
.data(vl.topojson(seattleCensusTracts2020).feature('collection'))
.project(vl.projection('mercator'))
.transform(vl.calculate('datum.properties.F2020_PL_data_TOT_POP - datum.properties.F2010_PL_data_TOT_POP').as('populationDiff'))
.encode(
vl.color().fieldQ('populationDiff')
)
.width(500).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.
