30:[{"id":"8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","href":"https://static.observableusercontent.com/files/8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","name":"unemployment.csv","type":"application/octet-stream","lastModified":1572907210087.408,"size":109820}] 2e:{"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"},{"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"},{"id":362,"value":"height = (610 / 975) * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"viewof color = DOM.select(['black', 'red', 'blue', 'magenta'])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":69,"value":"q = d3.scaleQuantize([1, 10], ramp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"path = d3.geoPath().projection(d3.geoIdentity().scale(width / 975))","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"format = d => `${d}%`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}