Published
Edited
Jul 8, 2019
extent = d3.extent(Array.from(data2.values()))
Array.from(data2.values())
data2 = {
let json1 = await d3.json("https://pbogden.com/single/data/data" + object.year + ".json");
let json2 = await d3.json("https://pbogden.com/single/data/data" + (object.year - 1) + ".json");
let myMap = new Map();
Object.keys(json).forEach((key) => myMap.set(key, json1[key] - json2[key]));
return myMap;
}
json = d3.json("https://pbogden.com/single/data/data2018.json")
data = Object.assign(new Map(d3.zip(...await Promise.all([10, 11].map(fetchPopulation))).map(([[id2017, population2017], [id2018, population2018]]) => {
if (id2017 !== id2018) throw new Error;
return [id2017, Math.round((population2018 - population2017) / population2017 * 1000) / 1000];
})), {title: "Population change (%)"})
function fetchPopulation(date) {
return d3.json("https://api.census.gov/data/2018/pep/population?get=POP&for=county:*&DATE_CODE=" + date).then(rows => rows.slice(1).sort((a, b) => a[2].localeCompare(b[2]) || a[3].localeCompare(b[3])).map(([population,, state, county]) => [state + county, +population]));
}
color = d3.scaleDiverging([ -22000, 0, 16000], d3.interpolateRdBu)
d3.interpolateRdBu
format = d3.format(".2s")
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = d3.json("https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json")
topojson = require("topojson-client@3")
d3 = require("d3@5")
import {ramp} from "@mbostock/color-ramp"
import {form} from "@mbostock/form-input"
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.
