${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`}

29:null 2a:["$","title",null,{"children":"Household Internet Access by Population Density | Chris Henrick | Observable"}] 2f:T44c,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map(([i, j]) => svg` ${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`} `)} ${data.title[0]} ${data.title[1]} `; }30:[] 2d:{"id":"66df1d4c8511f5f5","slug":"household-internet-access-by-population-density","title":"Household Internet Access by Population Density","thumbnail":"c37380aebc3cf6e2008116e3992167a9e5bada133f1c3ed1c88e14af7749ec35","access_level":"public","create_time":"$D2019-04-25T17:25:18.576Z","update_time":"$D2019-05-23T16:48:18.409Z","view_time":null,"first_public_time":"$D2019-05-23T16:48:34.365Z","has_unpublished_edits":null,"fork":{"id":"8b1da0468b5f1e92","slug":"bivariate-choropleth","title":"Bivariate choropleth","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":8,"starred":false,"owner":{"type":"team","id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":"starter_2024"},"version":552,"publish_version":552,"role":null,"authored":false,"authors":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null}],"members":[{"type":"individual","id":"152f84cb3c7f97b6","login":"clhenrick","name":"Chris Henrick","avatar_url":"https://avatars-next.observableusercontent.com/d2bdcdbb972dc7a42dd08637fca131b9f4f8f7d26f2896497815c62952cbbabe","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"0f1b93b67af83521","slug":"maps","title":"maps and geo","owner":{"id":"38569aaf9cf67d70","login":"clhenrick","name":"Chris Henrick"}},"type":"notebook","body":{"title":"Household Internet Access by Population Density","cells":[{"id":0,"value":"md`# Household Internet Access by Population Density \n\nPercent of households without internet access and population density (persons per square kilometer), by county.\nData sourced from: U.S. Census [ACS 2017 5 Year Estimates](https://www.census.gov/newsroom/press-releases/2018/2013-2017-acs-5year.html).\n\nUse the dropdown below to change color palettes, generously provided by [Joshua Stevens](http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof colors = {\n const form = html`

`;\n form.i.selectedIndex = 0;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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(legend)\n .attr(\"transform\", \"translate(870,450)\");\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(data.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(data.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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"data = Object.assign(new Map(await d3.csv(\"https://gist.githubusercontent.com/clhenrick/5425a1f12f7de98c355099e2a3f40868/raw/cdf3289b2f3d413f4647624c5536d688c0ca94d3/acs_internet_access_pop_density.csv\", \n ({ geoid, ratio_without, ppl_sqkm}) => ([geoid, [+ppl_sqkm, +ratio_without]]))), \n { title: [\"ppl / sqkm\", \"% no internet\"] });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"// http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/\nschemes = [\n {\n name: \"RdBu\", \n colors: [\n \"#e8e8e8\", \"#e4acac\", \"#c85a5a\",\n \"#b0d5df\", \"#ad9ea5\", \"#985356\",\n \"#64acbe\", \"#627f8c\", \"#574249\"\n ]\n },\n {\n name: \"BuPu\", \n colors: [\n \"#e8e8e8\", \"#ace4e4\", \"#5ac8c8\",\n \"#dfb0d6\", \"#a5add3\", \"#5698b9\", \n \"#be64ac\", \"#8c62aa\", \"#3b4994\"\n ]\n },\n {\n name: \"GnBu\", \n colors: [\n \"#e8e8e8\", \"#b5c0da\", \"#6c83b5\",\n \"#b8d6be\", \"#90b2b3\", \"#567994\",\n \"#73ae80\", \"#5a9178\", \"#2a5a5b\"\n ]\n },\n {\n name: \"PuOr\", \n colors: [\n \"#e8e8e8\", \"#e4d9ac\", \"#c8b35a\",\n \"#cbb8d7\", \"#c8ada0\", \"#af8e53\",\n \"#9972af\", \"#976b82\", \"#804d36\"\n ]\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"labels = [\"low\", \"med\", \"high\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"x.quantiles()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"d3.extent(x.domain())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"yOld = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"d3.extent(y.domain())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"// y.quantiles()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"y = d3.scaleThreshold()\n .domain([0.21, 0.33])\n .range([0, 1, 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"format = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n const formatter = d3.format(\".2f\");\n return `${Math.round(a)} ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${formatter(b * 100)} ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"