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', fill: '#d3e5ff', stroke: '#003366' },
data: { values: countiesData },
projection: { type: 'mercator' },
width: 500,
height: 400
}).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();
};
vl.spec({
width: 600,
height: 500,
data: { values: countiesData },
transform: [
{
lookup: "id", // GeoJSON county ID
from: {
data: { values: waPopulation },
key: "GEOID_TIGER",
fields: ["Estimate2022", "County"]
}
}
],
mark: {
type: "geoshape",
stroke: "white"
},
projection: { type: "mercator" },
encoding: {
color: {
field: "Estimate2022",
type: "quantitative",
title: "Population Estimate (2022)",
scale: { scheme: "tealblues" }
},
tooltip: [
{ field: "County", type: "nominal", title: "County" },
{ field: "Estimate2022", type: "quantitative", title: "Population (2022)" }
]
}
}).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.
