31:T4ce,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // svg.append("g").attr("transform", "translate(${height},20)"); // .append(() => legend({ ramp, title: data.title, width: 260 })); for (let item of demRamp) { // svg.insert(() => item); svg.call(item); } for (let item of repRamp) { // svg.insert(() => item); svg.call(item); } svg .append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", d => { let o = data2.get(d.id); if (o) { if (o.winner == "dem") return qDem(o.relative_diff).url(); return qRep(o.relative_diff).url(); } return q(0).url(); }) .attr("d", path) .append("title") .text(d => d.winner); // .text( // d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name} // ${format(data.get(d.id))}` // ); svg .append("path") .datum(topojson.mesh(us, us.objects.states)) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("d", path); return html`

${svg.node()}

`; }32:[{"id":"8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","href":"https://static.observableusercontent.com/files/8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","name":"unemployment.csv","type":"application/octet-stream","lastModified":1601949284037.636,"size":109820}] 2f:{"title":"Choropleth with Textures.js","cells":[{"id":0,"value":"md`# Choropleth with Textures.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"md`Democrat`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"legendDem = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 60]);\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 for (let t of demRamp) {\n svg.call(t);\n }\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(d3.range(0, 10).map(d => d / 10))\n .join(\"rect\")\n .attr(\"fill\", (d, i) => qDem(d).url())\n .attr(\"stroke\", \"#111\")\n .attr(\"width\", legendSize)\n .attr(\"height\", legendSize)\n .attr(\"x\", (d, i) => i * (legendSize + 5))\n .attr(\"y\", 5);\n\n return html`

${svg.node()}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"md`Republican`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"legendRep = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, 60]);\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 for (let t of repRamp) {\n svg.call(t);\n }\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(d3.range(0, 10).map(d => d / 10))\n .join(\"rect\")\n .attr(\"fill\", (d, i) => qRep(d).url())\n .attr(\"stroke\", \"#111\")\n .attr(\"width\", legendSize)\n .attr(\"height\", legendSize)\n .attr(\"x\", (d, i) => i * (legendSize + 5))\n .attr(\"y\", 5);\n\n return html`

${svg.node()}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"lineSize = 6","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"demOrientation = \"6/8\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":632,"value":"md`colors from https://www.color-hex.com/color-palette/4833 thanks @Fil`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"blue = \"#002868\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"red = \"#bf0a30\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":519,"value":"demRamp = [\n // textures\n // .paths()\n // .d(\"crosses\")\n // .size(lineSize * 0.75)\n // .lighter()\n // .thicker(),\n textures\n .lines()\n .stroke(blue)\n .orientation(demOrientation)\n .size(lineSize),\n textures\n .lines()\n .stroke(blue)\n .orientation(demOrientation)\n .size(lineSize)\n .heavier(1),\n textures\n .lines()\n .stroke(blue)\n .orientation(demOrientation)\n .size(lineSize)\n .heavier(2),\n textures\n .lines()\n .stroke(blue)\n .orientation(demOrientation)\n .size(lineSize)\n .heavier(3)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":537,"value":"repOrientation = \"2/8\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"repRamp = [\n // textures\n // .paths()\n // .d(\"crosses\")\n // .size(lineSize * 0.75)\n // .lighter()\n // .thicker(),\n textures\n .lines()\n .stroke(red)\n .orientation(repOrientation)\n .size(lineSize),\n textures\n .lines()\n .stroke(red)\n .orientation(repOrientation)\n .size(lineSize)\n .heavier(1),\n textures\n .lines()\n .stroke(red)\n .orientation(repOrientation)\n .size(lineSize)\n .heavier(2),\n textures\n .lines()\n .stroke(red)\n .orientation(repOrientation)\n .size(lineSize)\n .heavier(3)\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"ramp2 = [\n textures\n .lines()\n .size(lineSize)\n .lighter(),\n textures.lines().size(lineSize),\n textures\n .lines()\n .size(lineSize)\n .heavier(1),\n textures\n .lines()\n .size(lineSize)\n .heavier(2),\n textures\n .lines()\n .size(lineSize)\n .heavier(3)\n]\n// ramp2 = [\n// textures\n// .lines()\n// .size(18)\n// .lighter(),\n// textures\n// .lines()\n// .size(12)\n// .lighter(),\n// textures\n// .lines()\n// .size(7)\n// .lighter(),\n// textures\n// .lines()\n// .size(5)\n// .lighter(),\n// textures.lines().size(5),\n// textures.lines().heavier(3),\n// textures.lines().heavier(4)\n// ]\n// ramp2 = [\n// textures\n// .lines()\n// .size(18)\n// .lighter(),\n// textures.lines().size(5),\n// textures.lines().heavier(3)\n// ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"ramp2.map(t => t.url())","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"legendSize = 50","pinned":true,"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":382,"value":"processed = countyElectionResults.map(d => {\n return {\n ...d,\n combined_fips: d.combined_fips,\n relative_diff: +d.diff / +d.total_votes,\n dem: +d.votes_dem,\n rep: +d.votes_gop,\n total: +d.total_votes,\n winner: +d.votes_dem > +d.votes_gop ? \"dem\" : \"rep\"\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"countyElectionResults","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"processed.filter(d => d.winner == \"dem\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"data2 = new Map(processed.map(d => [d.combined_fips, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"diffExtent = d3.extent(countyElectionResults, d => +d.diff / +d.total_votes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"// q = d3.scaleQuantize([1, 10], ramp2)\nq = d3.scaleQuantize(diffExtent, ramp2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"// q = d3.scaleQuantize([1, 10], ramp2)\nqDem = d3.scaleQuantize(diffExtent, demRamp)","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"// q = d3.scaleQuantize([1, 10], ramp2)\nqRep = d3.scaleQuantize(diffExtent, repRamp)","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"qLegend = d3.scaleQuantize(diffExtent, d3.range(0, 10))","pinned":true,"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":true,"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":true,"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":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"},{"id":377,"value":"import { countyElectionResults } from '@codingwithfire/where-are-votes-at-risk'","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"textures = require(\"textures\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}