2c:null 2d:["$","title",null,{"children":"Force Bubble Map with Textures.js | Coding with Fire | Observable"}] 32:T560,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(countyShapes) // .join("path") // .attr("fill", "none") // .attr("stroke", "#999") // .attr("d", path) // .append("title") // .text(d => d.winner); svg .append("g") .selectAll("circle") .data(circles) .join("circle") .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("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.p) .append("title") .text(d => d.winner); // 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()}

`; }33:[{"id":"8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","href":"https://static.observableusercontent.com/files/8a6057f29caa4e010854bfc31984511e074ff9042ec2a99f30924984821414fbaeb75e59654e9303db359dfa0c1052534691dac86017c4c2f992d23b874f9b6e","name":"unemployment.csv","type":"application/octet-stream","lastModified":1601952126612.617,"size":109820}] 30:{"id":"225a1355193059e9","slug":"force-bubble-map-with-textures-js","title":"Force Bubble Map with Textures.js","thumbnail":"c14436b0abe4545cb4aca7d097bd5bbd33fccd7449e36735fdea5038be2d9460","access_level":"public","create_time":"$D2020-10-06T02:42:06.612Z","update_time":"$D2022-01-10T17:29:21.437Z","view_time":null,"first_public_time":"$D2020-10-06T02:42:24.373Z","has_unpublished_edits":null,"fork":{"id":"f3b0839955a4036a","slug":"choropleth-with-textures-js","title":"Choropleth with Textures.js","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"stars":4,"starred":false,"owner":{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024"},"version":662,"publish_version":662,"role":null,"authored":false,"authors":[{"type":"individual","id":"beed161c3770e09c","login":"ejfox","name":"EJ Fox","avatar_url":"https://avatars-next.observableusercontent.com/b117d362b89a664de5bd3cb86aaeef7ed91e89e4ddbf29cf73c7bdb4279d7b4b","tier":null}],"members":[{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024","role":"editor"},{"type":"individual","id":"beed161c3770e09c","login":"ejfox","name":"EJ Fox","avatar_url":"https://avatars-next.observableusercontent.com/b117d362b89a664de5bd3cb86aaeef7ed91e89e4ddbf29cf73c7bdb4279d7b4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"f04fe829cdd37f61","slug":"coding-with-fire","title":"Season 1","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"type":"notebook","body":{"titling":"auto","title":"Force Bubble Map with Textures.js","cells":[{"id":0,"value":"md`# Force Bubble Map with Textures.js\n2016 Election results\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"rPopScale = d3\n .scaleSqrt()\n .domain(popExtent)\n .range([2, 25])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"// projection = d3.geoIdentity().scale(width / 975)\nprojection = d3\n .geoAlbersUsa()\n .translate([width / 2, height / 2])\n .scale([1150])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"circles = {\n let localNodes = shapesWithData\n .map(d => {\n let p = projection(d.centroid.geometry.coordinates) || [0, 0];\n return {\n ...d,\n p: rPopScale(d.population),\n cx: p[0],\n cy: p[1],\n x: p[0],\n y: p[1]\n };\n })\n .filter(d => !isNaN(d.population));\n // console.log(localNodes);\n\n let simulation = d3\n .forceSimulation(localNodes)\n .force(\n \"collide\",\n d3\n .forceCollide()\n // .radius(d => d.p) // for spacing by population\n .radius(d => d.p * 1.12) // for spacing by metric\n .strength(0.65)\n )\n .force(\n \"x\",\n d3.forceX(d => {\n return d.cx;\n })\n )\n .force(\n \"y\",\n d3.forceY(d => {\n return d.cy;\n })\n );\n\n simulation.tick(200);\n\n localNodes.sort((a, b) => a.metric - b.metric);\n return localNodes;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"md`Democrat`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"lineSize = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"demOrientation = \"6/8\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"repOrientation = \"2/8\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"ramp2.map(t => t.url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"legendSize = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"height = (610 / 975) * width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"viewof color = DOM.select(['black', 'red', 'blue', 'magenta'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"countyShapes = topojson.feature(us, us.objects.counties).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"shapesWithData = countyShapes.map(s => ({\n ...s,\n ...data2.get(s.id),\n population: pops.get(s.id),\n // state: statefips.get(s.id.slice(0, 2))[0].name,\n // population: pops.get(s.id),\n // metric: metrics.get(s.id),\n centroid: turf.centroid(s)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"import {\n pops,\n popExtent\n} from \"@codingwithfire/cmu-covidcast-api-bubbles-interactive-timelapse\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"processed = countyElectionResults.map(d => {\n return {\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"countyElectionResults","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"processed.filter(d => d.winner == \"dem\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"data2 = new Map(processed.map(d => [d.combined_fips, d]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"diffExtent = d3.extent(countyElectionResults, d => +d.diff / +d.total_votes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// q = d3.scaleQuantize([1, 10], ramp2)\nq = d3.scaleQuantize(diffExtent, ramp2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"// q = d3.scaleQuantize([1, 10], ramp2)\nqDem = d3.scaleQuantize(diffExtent, demRamp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"// q = d3.scaleQuantize([1, 10], ramp2)\nqRep = d3.scaleQuantize(diffExtent, repRamp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"qLegend = d3.scaleQuantize(diffExtent, d3.range(0, 10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"format = d => `${d}%`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"import { countyElectionResults } from '@codingwithfire/where-are-votes-at-risk'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"textures = require(\"textures\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"turf = require('https://bundle.run/turf@3.0.14')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"