Public
Edited
Feb 28, 2024
seattleZipCodes = FileAttachment("zip-codes-2015.geojson").json()
seattleHousePricesByZipCode = FileAttachment("SeattleHousePricesByZipCode2017.csv").csv({typed: true})
seattleNeighborhoodsTopojson = FileAttachment("City_Clerk_Neighborhoods-1.topojson").json()
seattleCensusTracts2020 = FileAttachment("Census_2020_Tracts_with_PL_94-171_Redistricting__Data_for_1990-2020.topojson").json()
seattleNeighborhoodsGeojson = FileAttachment("City_Clerk_Neighborhoods.geojson").json()
// start here!
{
const zipCodeSelector = vl.selectPoint('selected_point')
.on('mouseover')
.clear('mousehover');
const map = vl.markGeoshape()
.data(vl.json(seattleZipCodes).property('features'))
.params(zipCodeSelector)
.project(vl.projection('identity').reflectY(true))
.encode(
vl.color().fieldO('properties.GEOID10').legend({column:3, title: "Seattle Zip Codes", symbolLimit: 100}),
vl.opacity().if(zipCodeSelector, vl.value(0.9)).value(0.1),
vl.tooltip().fieldN('properties.GEOID10')
)
.width(500).height(600)
return map.render()
}
// start here!
{
const interval = vl.selectInterval()
const hist = vl.markBar()
.data(vl.topojson(seattleCensusTracts2020).feature('collection'))
.encode(
vl.x().fieldQ('properties.F2020_PL_data_TOT_POP').bin({step:200}),
vl.y().aggregate('count')
)
.width(500).height(600);
const map = vl.markGeoshape()
.data(vl.topojson(seattleCensusTracts2020).feature('collection'))
.params(interval)
.project(vl.projection('mercator').reflectY(true))
.encode(
vl.color().fieldQ('properties.F2020_PL_data_TOT_POP').legend({columns:3, title: "Seattle Census", symbolLimit: 100}),
vl.opacity().if(interval, vl.value(1)).value(0.1)
)
.width(500).height(600)
return vl.hconcat(hist, map).render()
}
import {vl} from "@vega/vega-lite-api-v5"
import {toc} from "@jonfroehlich/collapsible-toc"
import {printVegaLiteJSON} from "@jonfroehlich/vega-lite-utilities"
import {printTable} from "@jonfroehlich/data-utilities"
import {printTableTypes} from "@jonfroehlich/data-utilities"
import {vegalite} from "@jonfroehlich/vega-lite-utilities"
// for later, ignore for now
// const sharedTransforms = [
// vl.calculate("geoCentroid(null, datum.geometry)").as('centroid'),
// vl.calculate("datum.centroid[0]").as('centroidX'),
// vl.calculate("datum.centroid[1] + random()/200").as('centroidY'), // also added y jitter
// vl.filter("datum.properties.S_HOOD != 'OOO' && length(trim(datum.properties.S_HOOD)) > 0")]; //filter out 'OOO' & empty neighborhoods
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.
