2d:null 2e:["$","title",null,{"children":"Mapping every US census variable | Logan Williams | Observable"}] 33:T625,chart = { const width = 960; const height = 680; const path = d3.geoPath(); const colorScale = d3.interpolateInferno; const populationScale = (opts.includes("Logarithmic")) ? d3.scaleLog().domain([min, max]).range([0,1]) : d3.scaleLinear().domain([min, max]).range([0,1]) const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); svg.append("text") .attr("x", (width / 2)) .attr("y", 24) .attr("text-anchor", "middle") .style("font-size", "16px") .text(label); svg.append("g") .attr("transform", `translate(0,80)`) .selectAll("path") .data(topojson.feature(us, us.objects.counties).features).enter() .append("path") .attr("fill", (d) => { return census[d.id] ? (opts.includes("Normalize") ? colorScale(populationScale(census[d.id][censusField] / census[d.id]["S0101_C01_001E"])) : colorScale(populationScale(census[d.id][censusField]))) : "#666" }) .attr("stroke-width", 1.0) .attr("stroke", (d) => { return census[d.id] ? (opts.includes("Normalize") ? colorScale(populationScale(census[d.id][censusField] / census[d.id]["S0101_C01_001E"])) : colorScale(populationScale(census[d.id][censusField]))) : "#666" }) .attr("stroke-linejoin", "round") .attr("d", path); svg.append("g") .attr("transform", `translate(20,60)`) .call(colorAxisTop(colorScale, populationScale) .range([0, width-20])); return svg.node(); }34:T72c,function colorAxisTop(colorScale, scale) { var rampSteps = 64, rampSize = 24, x = scale, x0 = 0, x1 = 1, xAxis = d3.axisTop(x); function colorAxis(selection) { var domain = scale.domain(), context = DOM.context2d(rampSteps, 1, 1); // Render the axis. x.domain([domain[0], domain[domain.length - 1]]).range([x0, x1]); selection.call(xAxis); // Render the color ramp. x.range([0, 1]); for (var i = 0; i < rampSteps; ++i) { context.fillStyle = colorScale(i / (rampSteps - 1)); context.fillRect(i, 0, 1, 1); } var image = selection.selectAll("image") .data([null]); image = image.enter().insert("image", "*") .attr("preserveAspectRatio", "none") .merge(image); image .attr("x", x0) .attr("width", x1 - x0 + 1) .attr("height", rampSize) .attr("xlink:href", context.canvas.toDataURL()); } colorAxis.range = function(_) { return arguments.length ? (x0 = +_[0], x1 = +_[1], colorAxis) : [x0, x1]; }; colorAxis.scale = function(_) { return arguments.length ? (scale = _, colorAxis) : scale; }; colorAxis.rampSteps = function(_) { return arguments.length ? (rampSteps = +_, colorAxis) : rampSteps; }; colorAxis.rampSize = function(_) { return arguments.length ? (rampSize = +_, colorAxis) : rampSize; }; function extendAxis(method) { colorAxis[method] = function() { var result = xAxis[method].apply(xAxis, arguments); return result === xAxis ? colorAxis : result; }; } extendAxis("ticks"); extendAxis("tickArguments"); extendAxis("tickValues"); extendAxis("tickFormat"); extendAxis("tickSize"); extendAxis("tickSizeInner"); extendAxis("tickSizeOuter"); extendAxis("tickPadding"); return colorAxis; }35:[] 31:{"id":"40eaf2126f9910b7","slug":"census-importer","title":"Mapping every US census variable","thumbnail":"e6fb5fc4401c3f17f6c68f45498e3bb50a6171dbd61ba3692f95a4af6168deec","access_level":"public","create_time":"$D2018-03-23T21:08:50.141Z","update_time":"$D2020-04-21T23:20:51.445Z","view_time":null,"first_public_time":"$D2018-03-23T23:10:16.188Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"76569a751ffe62bb","login":"loganwilliams","name":"Logan Williams","avatar_url":"https://avatars-next.observableusercontent.com/d7ec953364b254e9fd4909cfdd38e76601b12e8052fcdbb3378bc22c6141383d","tier":"starter_2024"},"version":657,"publish_version":657,"role":null,"authored":false,"authors":[{"type":"individual","id":"01c9aa269b19afc3","login":"loganwilliams","name":"Logan Williams","avatar_url":"https://avatars-next.observableusercontent.com/d7ec953364b254e9fd4909cfdd38e76601b12e8052fcdbb3378bc22c6141383d","tier":null}],"members":[{"type":"individual","id":"01c9aa269b19afc3","login":"loganwilliams","name":"Logan Williams","avatar_url":"https://avatars-next.observableusercontent.com/d7ec953364b254e9fd4909cfdd38e76601b12e8052fcdbb3378bc22c6141383d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Mapping every US census variable","cells":[{"id":0,"value":"md`# Mapping every US census variable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`There are number of [Census data APIs available](https://www.census.gov/data/developers/data-sets.html). The decennial census is more geographically complete, but contains fewer questions.\n\nIn this notebook, we'll look at data from the [American Community Survey](https://en.wikipedia.org/wiki/American_Community_Survey). Fewer households are required to complete the ACS, so the data has higher error margins and less geographic fidelity, but there are more sophisticated questions about everything from driving habits to income to household structure.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md`## Making a map of the US`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`There's a helpful source for the shapes of every county and state in the US in this [Github repo](https://github.com/topojson/us-atlas) provided by Mike Bostock. We can load that into a variable in our notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"md`It's in a format called topojson, which in this case essentially means two things: the projection is already baked into the data, and it achieves a smaller data size by only storing one copy of overlapping paths.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`I'm importing things as we need them in order to make the explanation more clear, but really the order we're importing things doesn't matter at all -- there isn't a notion of state in an Observable notebook. Let's bring in d3 and draw a map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"blank_map = {\n const width = 960;\n const height = 600;\n const path = d3.geoPath();\n\n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,0)`)\n .selectAll(\"path\")\n .data(topojson.feature(us, us.objects.counties).features).enter()\n .append(\"path\")\n .attr(\"fill\", \"#eee\")\n .attr(\"stroke-width\", 0.2)\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"md`Look at those counties!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"md`## Getting the census data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"md`We can obtain ACS data from the census API with a standard JS fetch command.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"census_csvson = await fetch(`https://api.census.gov/data/2015/acs/acs5/subject?get=${censusField},S0101_C01_001E,NAME&for=county:*&key=dcda6ea4589077efb86dedacad36295d79e43b36`).then((r) => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"md`It's in this kind of \"interesting\" format that's not quite JSON, not quite CSV. I'm calling it CSVSON, and it's my goal to put it in a sensible Javascript object as quickly as possible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"census_list = census_csvson.slice(1, census_csvson.length).map((c) => {\n let d = {}\n for (let i = 0; i < c.length; i++) {\n d[census_csvson[0][i]] = c[i]\n }\n return d\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"census = census_list.reduce((accumulator, next) => {\n accumulator[next.state + next.county] = next\n return accumulator}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`But wait, how did we know what fields to request in the fetch command above? There's a \"censusField\" variable spliced into the URL request, but what does it refer to?\n\nRemember that Observable notebooks don't have an order or state. \"censusField\" is defined below!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"censusFields = await fetch(\"https://api.census.gov/data/2015/acs/acs5/subject/variables.xml\").then((r) => r.text())\n .then(str => (new window.DOMParser()).parseFromString(str, \"text/xml\"))\n\t\t.then(data => {\n return data})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"variables = Array.from(censusFields.querySelector(\"vars\").childNodes).filter((d) => d.localName === \"var\").map((v) => {\n return {\"id\": v.attributes[\"xml:id\"] ? v.attributes[\"xml:id\"].textContent : \"\",\n \"label\": v.attributes[\"label\"] ? v.attributes[\"label\"].textContent : \"\",\n \"concept\": v.attributes[\"concept\"] ? v.attributes[\"concept\"].textContent : \"\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"concepts = variables.map(v => v.concept)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"unique_concepts = variables.map(v => v.concept).filter((c, i) => concepts.indexOf(c) === i).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"available_variables = variables.filter(v => v.concept.split(\" \")[0] === selected_concept)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`Cool, now we have a list of variable categories, and a way to dynamically request variables within a category. It would be nice to have UI elements for selecting among these, and Observable notebooks make this pretty easy with HTML!\n\nUnfortunately, the variable names provided by the US Census can be a little esoteric.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"viewof selected_concept = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"viewof censusField = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"viewof opts = checkbox([\"Logarithmic\", \"Normalize by population\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"md`And there you have it! Quick, easy maps of anything in the census.\n\nThanks to [James Conkling](https://github.com/jameslaneconkling) and [Robert Honig](https://github.com/roberthoenig) for pairing with me on this at the [Recurse Center](https://recurse.com).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"min = d3.min(census_list, (d) => Math.max(max/1e3, parseFloat(opts.includes(\"Normalize\") ? d[censusField] / d[\"S0101_C01_001E\"] : d[censusField])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"max = d3.max(census_list, (d) => parseFloat(opts.includes(\"Normalize\") ? d[censusField] / d[\"S0101_C01_001E\"] : d[censusField]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"label = {\n const censusVariable = censusFields.querySelector(`[*|id=${censusField}]`)\n return censusVariable.getAttribute(\"concept\") + \" (\" + censusVariable.getAttribute(\"label\") + \")\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"