2a:null 2b:["$","title",null,{"children":"USA County Heat Map | Chris Daly | Observable"}] 30:[] 2e:{"id":"7846a86a39cdd4db","slug":"maps","title":"USA County Heat Map","thumbnail":"3f1f858b57927537ceb720dcebf0f602459f12de58d19dec31b05908590324ac","access_level":"public","create_time":"$D2019-04-08T11:06:37.812Z","update_time":"$D2019-04-15T15:58:41.050Z","view_time":null,"first_public_time":"$D2019-04-08T12:41:35.739Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9157d79500f6ac7e","login":"cd18","name":"Chris Daly","avatar_url":"https://avatars-next.observableusercontent.com/10209541ab45cb894b75778ca845c8c2ce043918e854f4256dbcb860b6aff512","tier":"starter_2024"},"version":630,"publish_version":630,"role":null,"authored":false,"authors":[{"type":"individual","id":"0edf2b03ce3ef36d","login":"cd18","name":"Chris Daly","avatar_url":"https://avatars-next.observableusercontent.com/10209541ab45cb894b75778ca845c8c2ce043918e854f4256dbcb860b6aff512","tier":null}],"members":[{"type":"individual","id":"0edf2b03ce3ef36d","login":"cd18","name":"Chris Daly","avatar_url":"https://avatars-next.observableusercontent.com/10209541ab45cb894b75778ca845c8c2ce043918e854f4256dbcb860b6aff512","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"98a964a057c43289","slug":"county-maps","title":"County Maps","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"USA County Heat Map","cells":[{"id":0,"value":"md`# USA County Heat Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`## Load Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`## Load Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@2/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"dataRaw = await d3.csv(\"https://raw.githubusercontent.com/chrisdaly/map-data/master/unemployment.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"md`## Process Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"data = new Map(dataRaw.map(i => [i.id, +i.rate]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"md`Extent is what we will set the upper and lower bounds for data being inputted into our scale. Usually we want to set this to the maximum and minimum of our data. However, there are times when manually changing this can lead to a clearer image.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":431,"value":"extent = d3.extent([...data.values()])\n// extent = [0, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"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":91,"value":"md`## Aesthetics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":588,"value":"schemes = [\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 {\n name: \"W2O\", \n colors: [\n \"#2FA4DD\", \"#002B3F\", \"#F15922\",\n \"#00C4AD\", \"#BFA87F\", \"#686060\",\n \"#FC3C3C\"\n ]\n }\n \n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"viewof palette = {\n const form = html`

`;\n form.i.selectedIndex = 1;\n form.oninput = () => form.value = schemes[form.i.selectedIndex].colors;\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"palette","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"color = d3.scaleQuantize(extent, palette) \n\n// color = d3.scaleLinear()\n// .domain(extent )\n// .range(['white', 'red'])\n// .interpolate(d3.interpolate);\n // [\"red\", \"blue\", \"green\"])\n // d3.schemeReds[9])\n// color = d3.scaleLinear(extent, d3.interpolateBrBG) \n // [\"red\", \"blue\", \"green\"])\n // d3.schemeReds[9])\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"getTickValues = color => {\n const tickValues = color.range().map(d => color.invertExtent(d)[0])\n const lastColor = color.range().slice(-1)[0]\n const lastTick = color.invertExtent(lastColor)[1]\n tickValues.push(lastTick)\n return tickValues \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"format = d => `${d}%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"// viewof n = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"async function toDataURL(url) {\n return new Promise(async(resolve, reject) => {\n const res = await fetch(url);\n if(!res.ok) return reject(`Error: ${res.status} ${res.statusText}`);\n const blob = await res.blob();\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => resolve(reader.result);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":616,"value":"font = await toDataURL('https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6M-Bp0u-.woff')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"md`## Rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"// await toDataURL('https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6M-Bp0u-.woff')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"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 .style(\"font-family\", font)\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(data.get(d.id)) != null ? color(data.get(d.id)) : \"lightgrey\")\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"},{"id":262,"value":"legend = g => {\n const x = d3.scaleLinear()\n .domain(d3.extent(color.domain()))\n .rangeRound([0, 260]);\n\n g.selectAll(\"rect\")\n .data(color.range().map(d => color.invertExtent(d)))\n .join(\"rect\")\n .attr(\"height\", 8)\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"fill\", d => color(d[0]));\n\n g.append(\"text\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", -6)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Unemployment Rate\");\n\n g.call(\n d3.axisBottom(x)\n .tickValues(getTickValues(color))\n )\n .select(\".domain\")\n .remove();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"