Public
Edited
Oct 19, 2023
waPopulation = waPopulationRaw.map(d => {
return {
County: d.County,
Census2020: parseInt(d.Census2020),
Estimate2021: parseInt(d.Estimate2021),
Estimate2022: parseInt(d.Estimate2022),
COUNTYFP: d.CountyFP,
COUNTYNS: d.CountyNS,
GEOID_AFF: d.GEOID_AFF,
GEOID_TIGER: d.GEOID_TIGER
};
})
waPopulation
Type Table, then Shift-Enter. Ctrl-space for more options.
usData = await d3.json('https://d3js.org/us-10m.v2.json')
waData = topojson.feature(usData, usData.objects.states).features.filter((d) => d.id === "53");
waCountyIDs = waPopulation.map(c => c.GEOID_TIGER)
countiesData = topojson.feature(usData, usData.objects.counties).features.filter(d => waCountyIDs.indexOf(d.id) >= 0)
projection = d3.geoIdentity().fitSize([width, height], waData[0]);
chart = {
// create the SVG container
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// NOTE: you will need to use d3.geoPath() to
// create a d3 path object to help generate SVG objects!
// The projection variable above should help with this.
// draw WA state using waData
// [COMPLETE THE CODE BELOW]
// svg
// .selectAll(".state")
// .data(...)
// .join(...)
// .attr(...)
// .style(...) // set fill, stroke properties
// ...
//[FILL THIS IN WITH YOUR OWN CODE]
// 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();
};
// 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.
