Public
Edited
Feb 23, 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)
populationData = new Map(waPopulation.map(d => [d.GEOID_TIGER, d.Census2020]))
projection = d3.geoIdentity().fitSize([width, height], waData[0]);
path = d3.geoPath().projection(projection);
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 the counties
const g = svg.append('g')
// creates wa state outline
g.append('g')
.selectAll('path')
.data(waData)
.join('path')
.attr('class', 'state')
.attr('d', path)
.attr('id', 'state')
.attr("stroke-width", 1)
.attr("stroke", 'black')
.attr("fill", 'white')
// creates counties outline
g.append('g')
.attr('class', 'counties')
.selectAll('path')
.data(countiesData)
.join('path')
.attr('clip-path', 'url(#clip-state)')
.attr('class', 'county')
.attr('d', path)
.attr("stroke-width", 0.4)
.attr("stroke", 'darkgray')
.attr("fill", 'white')
return svg.node();
};
chart2 = {
const color = d3.scaleQuantize([20000, 2500000], d3.schemeBlues[9])
// ok makes sense
// i dont think its scale has to be the exact population because it said it wasnt iterable, im guessing it has to refer to the array?? im not sure
// const waPopMap = new Map();
// waPopulation.forEach((obj) => {
// waPopMap.set(obj.GEOID_TIGER, obj.Census2020);
// });
// 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.
const g = svg.append('g')
// creates wa state outline
g.append('g')
.selectAll('path')
.data(waData)
.join('path')
.attr('class', 'state')
.attr('d', path)
.attr('id', 'state')
.attr("stroke-width", 1)
.attr("stroke", 'black')
.attr("fill", 'white')
// creates counties outline
g.append('g')
.attr('class', 'counties')
.selectAll('path')
.data(countiesData)
.join('path')
.attr('clip-path', 'url(#clip-state)')
.attr('class', 'county')
.attr('d', path)
.attr("stroke-width", 0.4)
.attr("stroke", 'darkgray')
.attr("fill", d => color(populationData.get(d.id)))
// its not a dict so no "get"
// im trying to filter it somehow its close but not yet
// .attr("fill", d => {
// var datum = waPopulation.filter(dd => d.GEOID_TIGER === d.GEOID_TIGER)[0];
// return color(datum.Census2020);
// });
// .attr("fill", d => color(waPopulation.filter(dd => d.GEOID_TIGER === dd.GEOID_TIGER).Census2020))
// .attr("fill", d => color(waPopulation.get(d.properties.Census2020)))
return svg.node();
};
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.
