31:Td26,viewof cartogram = { const svg = d3.select( DOM.svg( width + margin.left + margin.right, height + margin.top + margin.bottom ) ); let node = svg.node(); node.value = counties[0]; const background = svg .append('rect') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .attr('fill', bgColor); const g = svg .attr('preserveAspectRatio', 'xMidYMid') .append('g') .attr( 'transform', `translate(${margin.left + margin.right}, ${margin.top - margin.bottom})` ); const states = g .selectAll('.states') .data(cartogram_data) .enter() .append('g') .attr('class', 'state-groups'); states.append("rect") .attr("x", d => axisPosition(d.column) - state_size/2) .attr("y", d => axisPosition(d.row) - state_size/2) .attr("width", d => state_size) .attr("height", d => state_size) .attr("fill", "none") .attr("stroke", d => { let res = nytPresStatesByAbbr.get(d.state_postal) if(res?.result == "winner") { let value = res?.leader_party_id; if(value == "republican") return red if(value == "democrat") return blue } return "none" }) .attr("stroke-width", 3) states .append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_column(d)})`) .each(function(d, i) { let stateFips = stateToFips[d.state_postal]; let stateCounties = counties.filter(d => d.fips.slice(0, 2) == stateFips); colorTreemap(d3.select(this), stateCounties, onClick); }); function onClick(event, d) { node.value = d; node.dispatchEvent(new CustomEvent("input", { bubbles: true })); } // states // .append('g') // .attr('transform', d => `translate(${x_column(d)}, ${y_column(d)})`); states .append('text') .attr('class', 'state-label') .attr('dominant-baseline', 'central') .attr('x', ({ column }) => axisPosition(column)) .attr('y', ({ row }) => axisPosition(row) +1) .attr('text-anchor', 'middle') .attr('font-size', 12) .attr('font-family', 'Helvetica') .attr('font-weight', 'bold') .attr('fill', d => { // return 'rgba(255, 255, 255, 0.8)' return 'rgba(5, 5, 5, 0.8)' }) .style("pointer-events", "none") .text(d => { let value = nytPresStatesByAbbr.get(d.state_postal)?.reporting_value; return d.state_postal + ": " + value; }); states .append('text') .attr('class', 'state-label') .attr('dominant-baseline', 'central') .attr('x', ({ column }) => axisPosition(column)) .attr('y', ({ row }) => axisPosition(row)) .attr('text-anchor', 'middle') .attr('font-size', 12) .attr('font-family', 'Helvetica') .attr('font-weight', 'bold') .attr('fill', d => { let res = nytPresStatesByAbbr.get(d.state_postal) if(res?.result == "winner") { if(res?.leader_party_id == "republican") return red if(res?.leader_party_id == "democrat") return blue } if(res?.eevp >= 90) { return "#fff" } return "#888" }) .style("pointer-events", "none") .text(d => { let value = nytPresStatesByAbbr.get(d.state_postal)?.reporting_value; return d.state_postal + ": " + value; }); return svg.node(); }32:T962,function colorTreemap(g, counties, onClick = function() {}) { let treemap = d3 .treemap() .tile(d3.treemapSquarify) .size([treemapSize, treemapSize]); // .padding(1); // .round(true) let data = { name: "counties", children: counties }; let root = d3 .hierarchy(data) .sum(d => (d.tot_exp_vote ? d.tot_exp_vote : d.votes2016)) .sort((a, b) => b.value - a.value); let tree = treemap(root); function enter(selection) { let group = selection.append("g").classed("color-tree-leaf", true); group.append("rect"); return group; } function update(selection) { return selection; } let leaf = g .selectAll("g.color-tree-leaf") .data(tree.leaves()) .join(enter, update) .attr("transform", d => `translate(${d.x0},${d.y0})`) .on("click", (event, d) => console.log(d)) .on("mousemove", (event, d) => { // let tt = nytPresCountiesByFIPS.get(d.id); // // https://observablehq.com/@jianan-li/basic-tooltip let tooltip = d3.select("#svg-tip"); tooltip .style("top", event.pageY - 50 + "px") .style("left", event.pageX + 20 + "px") .style("display", ""); tooltip.select(".county-name").text(d.data.name); tooltip.select(".county-value2020").text(d.data.value); tooltip.select(".county-votes2020").text(numformat(d.data.votes)); tooltip.select(".county-expected").text(numformat(d.data.tot_exp_vote)); tooltip.select(".county-votes2016").text(numformat(d.data.votes2016)); // console.log("tt", tooltip.node()); }) .on("mouseout", (event, d) => { let tooltip = d3.select("#svg-tip").style("display", "none"); }); leaf .select("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .attr("fill", d => { // return diffScale(1 - d.value); if (d.data.value <= 0) { if (d.data.leader_party_id == "republican") { return red; } else if (d.data.leader_party_id == "democrat") { return blue; } } if (view == "outstandingvs2016") { if (winners2016.get(d.data.fips) == "republican") { return lightred; } else if (winners2016.get(d.data.fips) == "democrat") { return lightblue; } } return "#fff"; }) .attr("fill-opacity", d => d.data.value + 0.4); }33:[{"id":"d6c111ad86bbf405aea4113aa0704532d1ae9359f205e9e5ae86e00481478639cc4bdcfa3fd50330d041a2553829e5840a9aa45d9e775d88bad130173c1ba657","href":"https://static.observableusercontent.com/files/d6c111ad86bbf405aea4113aa0704532d1ae9359f205e9e5ae86e00481478639cc4bdcfa3fd50330d041a2553829e5840a9aa45d9e775d88bad130173c1ba657","name":"allYearsFlat@1.csv","type":"text/csv","lastModified":1604453342582.934,"size":5953682},{"id":"e00fbbfbb8d3a442247d3f04f761e7b43c05e4529c9fa660dc5ca5be056c8c8bce9d2713a9540c0e14f0eb7fe4a0c98867be8f5440c2ae66f63092ee2835073c","href":"https://static.observableusercontent.com/files/e00fbbfbb8d3a442247d3f04f761e7b43c05e4529c9fa660dc5ca5be056c8c8bce9d2713a9540c0e14f0eb7fe4a0c98867be8f5440c2ae66f63092ee2835073c","name":"keyLables.json","type":"application/json","lastModified":1604453342582.934,"size":4448}] 2f:{"title":"Where Are Votes Outstanding 2020?","cells":[{"id":0,"value":"md`# Where Are Votes Outstanding 2020?\n\n### Percentage of expected votes not yet counted so far by county\n\nWIP - debugging the data\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"viewof view = select(views)","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"cartogram","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"bgColor = \"#888\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"red = \"#bf0a30\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":696,"value":"lightred = \"#ee448a\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"blue = \"#002868\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":694,"value":"lightblue = \"#52b2e8\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":647,"value":"opacityScale = d3\n .scaleLinear()\n .domain([0, 1])\n .range([0.4, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"nytPresStatesByAbbr.get(\"FL\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"winners2016 = new Map(\n countyElectionResults.map(d => {\n return [\n d.combined_fips,\n +d.votes_gop > +d.votes_dem ? \"republican\" : \"democrat\"\n ];\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"tooltip = html`

\nName: County
\n\n2020 Votes:
\n2020 Expected:
\n2016 Votes:
\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"counties = nytPresCounties.map(d => {\n let v = 1 - d.votes / (d.exp_tot_vote ? d.exp_tot_vote : d.votes2016);\n if (v < 0) v = 0;\n return {\n ...d,\n value: v\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"diffScale = d3\n .scaleSequential(d3.interpolateGreys)\n // .domain(diffExtent)\n // .domain([minCounty, 1])\n .domain([-0.3, 1.5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"numformat = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"cartogram","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"cartogram_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"md`https://gist.github.com/wavded/1250983/bf7c1c08f7b1596ca10822baeb8049d7350b0a4b#file-statecodetofips-json`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"stateToFips = d3.json(\n \"https://gist.githubusercontent.com/wavded/1250983/raw/bf7c1c08f7b1596ca10822baeb8049d7350b0a4b/stateCodeToFips.json\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"nytPresCounties","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"import {\n nytPresCounties,\n nytPresStatesByAbbr\n} from \"@codingwithfire/live-election-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"textColor = \"#fff\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"state_size = width / 13","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"margin = ({top: 140, right: 20, bottom: 20, left: 20})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"{\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", 200)\n .attr(\"height\", 200);\n\n let g = svg.append(\"g\");\n colorTreemap(g, counties.slice(0, 154));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"treemapSize = state_size","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 8 * state_size","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"legend({ color: diffScale })","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"import { cartogram_data, x_column, y_column, axisPosition } with {\n state_size,\n margin\n} from \"@aboutaaron/small-multiple-chart-cartogram\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"// md`\n// ${fips} - ${eav.Jurisdiction_Name}\n// Percent of votes counted:\n// **${format(calculatePercent(countySVG.id) * 100)}%**\n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"projection = d3.geoAlbersUsa().fitSize([width - 10, height - 30], countyShapes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"minCounty = d3.min(counties, d => 1 - d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"turf.centroid(countyShapes.features[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"center = d => {\n return projection(turf.centroid(d).geometry.coordinates) || [0, 0];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"allYearsFlat = FileAttachment(\"allYearsFlat@1.csv\").csv({ typed: false })","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"allYearsFlat.filter(d => d.State_Full == \"WISCONSIN\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"eavsByCounty = new Map(\n allYearsFlat.map(d => {\n let s = String(d.FIPSCode);\n return [s.slice(0, s.length - 5).padStart(5, \"0\"), d];\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"voteJitter = 5 // The amount added or subtracted from state percentage","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`voteByCounty is a stand-in for live election data. Pretend like this is how many votes have been cast in each county at X time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"countySVG","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"fips = countySVG ? countySVG.id : \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"eav = eavsByCounty.get(fips)","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"eav ? eav : \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"pop2016 = demographicsData[2016].get(fips)[\"B01003_001E\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"pop2018 = demographicsData[2018].get(fips)[\"B01003_001E\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"views = [\"outstanding\", \"outstandingvs2016\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"import { countyElectionResults } from '@codingwithfire/where-are-votes-at-risk'","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {\n demographicsData,\n selectedFields,\n niceLabel,\n countyShapes,\n stateShapes\n} from \"@enjalot/us-county-datasets\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"FileAttachment(\"keyLables.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"turf = require('https://bundle.run/turf@3.0.14')","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"import { twitch } from \"@codingwithfire/twitch\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"Chance = require(\"chance\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}