Public
Edited
Apr 25
waPopulation = waPopulationRaw.map(d => {
return {
County: d.County,
Census2020: parseInt(d.Census2020),
Estimate2021: parseInt(d.Estimate2021),
Estimate2022: parseInt(d.Estimate2022),
GEOID_AFF: d.GEOID_AFF,
GEOID_TIGER: parseInt(d.GEOID_TIGER)
};
})
waPopulation
Type Table, then Shift-Enter. Ctrl-space for more options.
usData = await d3.json('https://cdn.jsdelivr.net/npm/vega-datasets@2.8.0/data/us-10m.json')
waData = topojson
.feature(usData, usData.objects.states) // parse TopoJSON to GeoJSON features for all states
.features // the features array has one entry per state
.filter((d) => d.id === 53); // filter to WA state (id 53)
waCountyIDs = waPopulation.map(c => c.GEOID_TIGER)
countiesData = topojson
.feature(usData, usData.objects.counties) // parse TopoJSON to GeoJSON for all counties
.features // the features array has one entry per county
.filter(d => waCountyIDs.indexOf(d.id) >= 0) // filter to only counties in WA state
width = 500
height = 500
vl.spec({
mark: { type: 'geoshape' },
data: { values: waData },
projection: { type: 'identity' },
width: width,
height: height
})
.render()
vl.spec({
mark: { type: 'geoshape',stroke: 'blue',strokeWidth: 0.8},
data: { values: countiesData },
projection: { type: 'mercator' },
width: width,
height: height
})
.render()
vl.spec({
transform: [
{
lookup: 'id'
,
from: {
data: {
values: waPopulation
}
,
key: 'GEOID_TIGER'
,
fields: [
'Estimate2022'
,
'County'
]
}
}
]
,
mark: { type: 'geoshape',stroke: 'blue',strokeWidth: 0.8},
data: { values: countiesData },
projection: { type: 'mercator' },
encoding: {
color: {
field:
'Estimate2022',
type:
'quantitative',
scale:
{
scheme: 'browns'
}
,
legend:
{
orient:
'top-left'
,
title: 'from. 2022'
}
}
,
tooltip: [
{
field: 'County'
,
type: 'nominal'
,
title: 'County'
}
,
{
field: 'Estimate2022',
type:
'quantitative',
title: '2022'
}
]
}
,
width: width,
height: height
})
.render()
topojson = require("topojson-client@3")
import {Legend} from "@d3/color-legend"
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.
