2c:null 2d:["$","title",null,{"children":"B&W Choropleth | Tom MacWright | Observable"}] 32:[{"id":"8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","href":"https://static.observableusercontent.com/files/8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","name":"unemployment.csv","type":"application/octet-stream","lastModified":1572907210087.408,"size":109820}] 30:{"id":"bd63937fc9640bfc","slug":"b-w-choropleth","title":"B&W Choropleth","thumbnail":"926b12b1d10295a0a4cf20c5080cc79fb4828e5d615d98e43a43c49a427cd167","access_level":"public","create_time":"$D2019-09-24T19:14:41.173Z","update_time":"$D2019-11-04T22:40:14.609Z","view_time":null,"first_public_time":"$D2019-09-24T19:37:40.274Z","fork":{"id":"2695158caff5fb0c","slug":"choropleth","title":"Choropleth","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":38,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":376,"publish_version":376,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":14,"collection":{"id":"6bc6860a04a990e5","slug":"b-w","title":"B&W","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"type":"notebook","body":{"title":"B&W Choropleth","cells":[{"id":0,"value":"md`# B&W Choropleth\n\nUnemployment rate by county, August 2016. Data: [Bureau of Labor Statistics](http://www.bls.gov/lau/#tables)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n // svg.append(\"g\").attr(\"transform\", \"translate(${height},20)\");\n // .append(() => legend({ ramp, title: data.title, width: 260 }));\n\n for (let item of ramp) {\n svg.insert(() => item);\n }\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(us, us.objects.counties).features)\n .join(\"path\")\n .attr(\"fill\", d => q(data.get(d.id) || 0))\n .attr(\"d\", path)\n .append(\"title\")\n .text(\n d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}\n${format(data.get(d.id))}`\n );\n\n svg\n .append(\"path\")\n .datum(topojson.mesh(us, us.objects.states))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n return html`

${svg.node()}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"height = (610 / 975) * width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"viewof color = DOM.select(['black', 'red', 'blue', 'magenta'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"ramp = [\n makePattern(svg`\n `),\n makePattern(svg`\n \n `),\n makePattern(svg`\n \n `),\n // makePattern(svg`\n // \n // `),\n makePattern(svg`\n \n `)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"makePattern = defs => {\n let id = DOM.uid();\n defs.querySelector('pattern').id = id.id;\n defs.toString = () => id.toString();\n return defs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"data = Object.assign(\n new Map(\n await d3.csv(\n await FileAttachment(\"unemployment.csv\").url(),\n ({ id, rate }) => [id, +rate]\n )\n ),\n { title: \"Unemployment rate (%)\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"q = d3.scaleQuantize([1, 10], ramp)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"path = d3.geoPath().projection(d3.geoIdentity().scale(width / 975))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"format = d => `${d}%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"