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: 'identity' },
width: width,
height: height
})
.render()
vl.spec({
mark: { type: 'geoshape' },
data: { values: waData },
projection: { type: 'identity' },
width: width,
height: height
})
.render()
// copy code from above and modify it to show WA county data here!
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.features) // 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({
mark: { type: 'geoshape' },
width: width,
height: height,
data: { values: countiesData }, // GeoJSON features
transform: [
{
lookup: "id", // ID from GeoJSON (countiesData)
from: {
data: { values: waPopulation }, // your population dataset
key: "GEOID_TIGER", // join key
fields: ["Estimate2021"] // value(s) to add
}
}
],
projection: { type: "mercator" },
encoding: {
color: {
field: "Estimate2021",
type: "quantitative",
scale: { scheme: "blues", count: 20 },
legend: { title: "Population (2021)" }
},
tooltip: [
{ field: "Estimate2021", title: "Population 2021" }
]
}
})
.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.
