30:[] 2e:{"title":"2018 change","cells":[{"id":0,"value":"md`# 2018 change`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof object = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"chart = {\n const path = d3.geoPath();\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", \"0 0 960 600\")\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg.append(\"g\")\n .attr(\"transform\", \"translate(600,40)\")\n .call(legend);\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(us, us.objects.counties).features)\n .join(\"path\")\n .attr(\"fill\", d => color(data2.get(d.id)))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}\n${format(data2.get(d.id))}`);\n\n svg.append(\"path\")\n .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"legend = g => {\n const width = 240;\n\n g.append(\"image\")\n .attr(\"width\", width)\n .attr(\"height\", 8)\n .attr(\"preserveAspectRatio\", \"none\")\n .attr(\"xlink:href\", ramp(color.interpolator()).toDataURL());\n\n g.append(\"text\")\n .attr(\"class\", \"caption\")\n .attr(\"y\", -6)\n .attr(\"fill\", \"#000\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"county total\");\n\n g.call(d3.axisBottom(d3.scaleLinear(color.domain(), [0, width / 2, width]))\n .ticks(6)\n .tickFormat(d => format(d))\n .tickSize(13))\n .select(\".domain\")\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"extent = d3.extent(Array.from(data2.values()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"Array.from(data2.values())","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`### Load data two years at a time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"data2 = {\n let json1 = await d3.json(\"https://pbogden.com/single/data/data\" + object.year + \".json\");\n let json2 = await d3.json(\"https://pbogden.com/single/data/data\" + (object.year - 1) + \".json\");\n let myMap = new Map();\n Object.keys(json).forEach((key) => myMap.set(key, json1[key] - json2[key]));\n return myMap;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"json = d3.json(\"https://pbogden.com/single/data/data2018.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = Object.assign(new Map(d3.zip(...await Promise.all([10, 11].map(fetchPopulation))).map(([[id2017, population2017], [id2018, population2018]]) => {\n if (id2017 !== id2018) throw new Error;\n return [id2017, Math.round((population2018 - population2017) / population2017 * 1000) / 1000];\n})), {title: \"Population change (%)\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"function fetchPopulation(date) {\n 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]));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"color = d3.scaleDiverging([ -22000, 0, 16000], d3.interpolateRdBu)","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"d3.interpolateRdBu","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"format = d3.format(\".2s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}