Public
Edited
Apr 24
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: 'equalEarth'},
width: width,
height: height
})
.render()
vl.spec({
mark: { type: 'geoshape', fill: '#2a1d0c', stroke: '#706545' },
data: { values: countiesData },
projection: { type: 'mercator', feature: 'counties'},
width: width,
height: height
})
.render()
projection = d3.geoIdentity().fitSize([width, height], waData[0]);
path = d3.geoPath(projection);
{
// create the SVG container
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
// NOTE: we need to use the path variable to generate SVG objects from GeoJSON!
// draw WA state using waData
svg
.selectAll(".state") // create an initial selection, empty at first
.data(waData) // populate selection with state data
.join("path") // create SVG path elements for each state
.attr("class", "state") // set the CSS class of each path element
.style("stroke", "none") // stroke (boundary) color of the SVG path
.style("fill", "steelblue") // fill (interior) color of the SVG path
.attr("d", path); // use the geo path helper to generate SVG path coordinates
return svg.node();
};
{
// create the SVG container
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
// NOTE: you will need to use the path variable to generate SVG objects from GeoJSON!
// draw the counties using countiesData
// svg
// .selectAll(".county")
// .data(...)
// .join(...)
// .attr(...)
// .style(...) // set fill, stroke properties
// ...
//[FILL THIS IN WITH YOUR OWN CODE]
return svg.node();
};
// copy your county-level visualization from above here and update it
vl.spec({
mark: { type: 'geoshape', stroke: '#aaa', strokeWidth: 0.25 },
data: { values: countiesData },
transform: [
{
lookup: 'id',
from: { data: { values: waPopulation }, key: 'GEOID_TIGER', fields: ['County', 'Estimate2022'] }
},
],
encoding: {
color: {
field: 'Estimate2022', type: 'Q',
scale: { scheme:'viridis', domain: [0, 3000000], clamp: true },
legend: { orient: "top-left" }
},
tooltip: {field: 'County', type: 'N' }
},
projection: { type: 'mercator', feature: 'counties'},
width: width,
height: height
})
.render()
// paste a copy of the chart code here
// and modify the code to also visualize population data
// You will want to write your own "lookup" data structure or "lookup" function
// where for a given county, we can use "lookup" to retrieve the population count from waPopulation.
// Using your lookup function/data structure may look something like this in the final code:
// .selectAll(".county")
// .data(...)
// .join(...)
// .attr(...)
// .style("fill", f => color(lookup[f.id].Estimate2022))
// ...
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.
