Explore Pennsylvania voting machines by county

31:Teb4,script = ` ${addCommas.toString()} const svg = document.querySelector('svg'); const allPaths = svg.querySelector('#paths'); // Grab the tooltips. const paTooltip = document.querySelector('#pa-tooltip'); const chartTooltip = document.querySelector('#chart-tooltip'); const chart = document.querySelector('#chart-elem'); // Grab PA tooltip stats. const population = paTooltip.querySelector('#population'); const registration = paTooltip.querySelector('#registration'); const county = paTooltip.querySelector('#county'); const countyPops = ${JSON.stringify(countyPops)}; const voterRegistration = ${JSON.stringify(voterRegistration)}; // Grab Chart tooltip stat elem. const registrationChart = chartTooltip.querySelector('#registration'); const paths = Array.from(allPaths.children); const map = new Map(); let responded = 0; const rest = new Set(); paths.forEach((path) => { map.set(path.id, path); }); const bars = Array.from(chart.querySelectorAll('.bar')); // Add tooltip events. let mouseIn = [false, false]; const modify = bars.concat(allPaths); const tooltips = [chartTooltip, paTooltip]; modify.forEach((thing, i) => { const subI = i == modify.length - 1 ? 1 : 0; thing.addEventListener('mouseenter', () => { tooltips[subI].style.display = 'inline-block'; mouseIn[subI] = true; }); thing.addEventListener('mouseleave', () => { tooltips[subI].style.display = 'none'; mouseIn[subI] = false; }); }); modify.forEach((entity, i) => { const isBars = i != modify.length - 1; const subI = i == modify.length - 1 ? 1 : 0; entity.addEventListener('mousemove', (e) => { if (!mouseIn[subI]) return; let offsetX, offsetY; const {clientX, clientY} = e; if (!isBars) { const {x, y, width: svgWidth, height: svgHeight} = svg.getBoundingClientRect(); const {width, height} = tooltips[subI].getBoundingClientRect(); [offsetX, offsetY] = [clientX - x, clientY - y]; offsetY -= height; if (offsetY > svgHeight / 2) { offsetY -= height + 20; } else { offsetY += 20; } if (offsetX < 120) { offsetX = 120; } else if (offsetX > svgWidth - 120) { offsetX = svgWidth - 120; } offsetY += height; } else { const {x, y, width: chartWidth, height: chartHeight} = chart.getBoundingClientRect(); const {width, height} = tooltips[subI].getBoundingClientRect(); [offsetX, offsetY] = [clientX - x + 120, clientY - y + 16]; } tooltips[subI].style.left = \`\${offsetX}px\`; tooltips[subI].style.top = \`\${offsetY}px\`; }); }); [paths, bars].forEach((entity, i) => { const styleStroke = i == 0; entity.forEach((path) => { path.addEventListener('mouseenter', () => { const pop = countyPops[path.id]; const voters = voterRegistration[path.id]; if (styleStroke) { const svgPath = map.get(path.id); svgPath.setAttribute('stroke', '${highlightEdgeColor}'); allPaths.appendChild(svgPath); county.textContent = path.id; population.textContent = addCommas(pop); registration.textContent = addCommas(voters); } else { path.style.border = 'solid 1px black'; registrationChart.textContent = addCommas(parseInt(path.dataset.pop)); } }); path.addEventListener('mouseleave', () => { if (styleStroke) { const svgPath = map.get(path.id); svgPath.setAttribute('stroke', '${edgeColor}'); } else { path.style.border = 'solid 1px transparent'; } }); }); }); `32:T427,styles = html` `33:T4cf,barStyles = html``34:T5bf,popBins = { // The main interactivity code. const svg = pennsylvania.querySelector('svg'); const allPaths = svg.querySelector('#paths'); const tooltip = pennsylvania.querySelector('.tooltip'); const population = tooltip.querySelector('#population'); const registration = tooltip.querySelector('#registration'); const county = tooltip.querySelector('#county'); const subtext = tooltip.querySelector('#subtext'); const paths = Array.from(allPaths.children); const map = new Map(); const colorMap = new Map(); const popBins = { goodNow: 0, goodMidterms: 0, good2020: 0, bad: 0, rest: 0, }; let responded = 0; const rest = new Set(); paths.forEach((path) => { map.set(path.id, path); colorMap.set(path.id, 'rest'); popBins.rest += voterRegistration[path.id]; path.setAttribute('fill', restColor); path.setAttribute('stroke', edgeColor); rest.add(path.id); }); [{name: 'goodNow', color: goodNowColor}, {name: 'goodMidterms', color: goodMidtermsColor}, {name: 'good2020', color: good2020Color}, {name: 'bad', color: badColor}].forEach(({name, color}) => { data[name].forEach((id) => { map.get(id).setAttribute('fill', color); rest.delete(id); colorMap.set(id, name); popBins[name] += voterRegistration[id]; popBins.rest -= voterRegistration[id]; if (name != 'goodNow') responded++; }); }); console.log(`Responded: ${responded}`); return popBins; }35:Tfea,{ // Grab the SVG and all its paths. const svg = pennsylvania.querySelector('svg'); const allPaths = svg.querySelector('#paths'); // Grab the tooltips. const paTooltip = pennsylvania.querySelector('#pa-tooltip'); const chartTooltip = chart.querySelector('#chart-tooltip'); // Grab PA tooltip stats. const population = paTooltip.querySelector('#population'); const registration = paTooltip.querySelector('#registration'); const county = paTooltip.querySelector('#county'); // Grab Chart tooltip stat elem. const registrationChart = chartTooltip.querySelector('#registration'); const paths = Array.from(allPaths.children); const map = new Map(); const colorMap = new Map(); let responded = 0; const rest = new Set(); paths.forEach((path) => { map.set(path.id, path); colorMap.set(path.id, 'rest'); path.setAttribute('fill', restColor); path.setAttribute('stroke', edgeColor); rest.add(path.id); }); [{name: 'goodNow', color: goodNowColor}, {name: 'goodMidterms', color: goodMidtermsColor}, {name: 'good2020', color: good2020Color}, {name: 'bad', color: badColor}].forEach(({name, color}) => { data[name].forEach((id) => { map.get(id).setAttribute('fill', color); rest.delete(id); colorMap.set(id, name); if (name != 'goodNow') responded++; }); }); const bars = Array.from(chart.querySelectorAll('.bar')); // Add tooltip events. let mouseIn = [false, false]; const modify = bars.concat(allPaths); const tooltips = [chartTooltip, paTooltip]; modify.forEach((thing, i) => { const subI = i == modify.length - 1 ? 1 : 0; thing.addEventListener('mouseenter', () => { tooltips[subI].style.display = 'inline-block'; mouseIn[subI] = true; }); thing.addEventListener('mouseleave', () => { tooltips[subI].style.display = 'none'; mouseIn[subI] = false; }); }); modify.forEach((entity, i) => { const isBars = i != modify.length - 1; const subI = i == modify.length - 1 ? 1 : 0; entity.addEventListener('mousemove', (e) => { if (!mouseIn[subI]) return; let offsetX, offsetY; const {clientX, clientY} = e; if (!isBars) { const {x, y, width: svgWidth, height: svgHeight} = svg.getBoundingClientRect(); const {width, height} = tooltips[subI].getBoundingClientRect(); [offsetX, offsetY] = [clientX - x, clientY - y]; if (offsetY > svgHeight / 2) { offsetY -= height; } else { offsetY += 40; } if (offsetX < 120) { offsetX = 120; } else if (offsetX > svgWidth - 120) { offsetX = svgWidth - 120; } offsetY += height; } else { const {x, y, width: chartWidth, height: chartHeight} = chart.getBoundingClientRect(); const {width, height} = tooltips[subI].getBoundingClientRect(); [offsetX, offsetY] = [clientX - x, clientY - y + 16]; } tooltips[subI].style.left = `${offsetX}px`; tooltips[subI].style.top = `${offsetY}px`; }); }); [paths, bars].forEach((entity, i) => { const styleStroke = i == 0; entity.forEach((path) => { path.addEventListener('mouseenter', () => { const mapping = colorMap.get(path.id); const pop = countyPops[path.id]; const voters = voterRegistration[path.id]; if (styleStroke) { const svgPath = map.get(path.id); svgPath.setAttribute('stroke', highlightEdgeColor); allPaths.appendChild(svgPath); county.textContent = path.id; population.textContent = addCommas(pop); registration.textContent = addCommas(voters); } else { path.style.border = 'solid 1px black'; } }); path.addEventListener('mouseleave', () => { if (styleStroke) { const svgPath = map.get(path.id); svgPath.setAttribute('stroke', edgeColor); } else { path.style.border = 'solid 1px transparent'; } }); }); }); }36:T432,data = ({ // Which counties have good voting machines, bad voting machines, and plan to have good ones in the future. goodNow: [ 'Adams', 'Centre', 'Franklin', 'Fulton', 'Huntingdon', 'Indiana', 'Juniata', 'Lackawanna', 'Mifflin', 'Montour', 'Snyder', 'Susquehanna', 'Wayne', 'Chester', 'Lancaster', 'Bedford', 'Fayette', ], goodMidterms: [ 'Montgomery', ], good2020: [ 'Blair', 'Greene', ], bad: [ 'Allegheny', 'Berks', 'Beaver', 'Bradford', 'Bucks', 'Cambria', 'Cameron', 'Carbon', 'Columbia', 'Clarion', 'Clearfield', 'Crawford', 'Cumberland', 'Dauphin', 'Elk', 'Erie', 'Forest', 'Jefferson', 'Lawrence', 'Lebanon', 'Lehigh', 'Lycoming', 'McKean', 'Mercer', 'Monroe', 'Northampton', 'Perry', 'Philadelphia', 'Pike', 'Potter', 'Somerset', 'Sullivan', 'Tioga', 'Union', 'Venango', 'Warren', 'Washington', 'Wyoming', ], })37:T5ab,countyPops = ({ // Populations of Pennsylvania counties. 'Adams': 101407, 'Allegheny': 1223348, 'Armstrong': 68941, 'Beaver': 170539, 'Bedford': 49762, 'Berks': 411442, 'Blair': 127089, 'Bradford': 62622, 'Bucks': 625249, 'Butler': 183862, 'Cambria': 143679, 'Cameron': 5085, 'Carbon': 65249, 'Centre': 153990, 'Chester': 498886, 'Clarion': 39988, 'Clearfield': 81642, 'Clinton': 39238, 'Columbia': 67295, 'Crawford': 88765, 'Cumberland': 235406, 'Dauphin': 268100, 'Delaware': 558979, 'Elk': 31946, 'Erie': 280566, 'Fayette': 136606, 'Forest': 7716, 'Franklin': 149618, 'Fulton': 14845, 'Greene': 38686, 'Huntingdon': 45913, 'Indiana': 88880, 'Jefferson': 45200, 'Juniata': 24636, 'Lackawanna': 214437, 'Lancaster': 519445, 'Lawrence': 91108, 'Lebanon': 133568, 'Lehigh': 349497, 'Luzerne': 320918, 'Lycoming': 116111, 'McKean': 43450, 'Mercer': 116638, 'Mifflin': 46682, 'Monroe': 169842, 'Montgomery': 799874, 'Montour': 18267, 'Northampton': 297735, 'Northumberland': 94528, 'Perry': 45969, 'Philadelphia': 1526006, 'Pike': 57369, 'Potter': 17457, 'Schuylkill': 148289, 'Snyder': 39702, 'Somerset': 77742, 'Sullivan': 6428, 'Susquehanna': 43356, 'Tioga': 41981, 'Union': 44947, 'Venango': 54984, 'Warren': 41815, 'Washington': 207820, 'Wayne': 52822, 'Westmoreland': 365169, 'Wyoming': 28276, 'York': 434972, })38:T57c,voterRegistration = ({ 'Adams': 66718, 'Allegheny': 924631, 'Armstrong': 42552, 'Beaver': 113598, 'Bedford': 34460, 'Berks': 259800, 'Blair': 77834, 'Bradford': 37649, 'Bucks': 460832, 'Butler': 129728, 'Cambria': 86848, 'Cameron': 3232, 'Carbon': 42228, 'Centre': 123341, 'Chester': 354459, 'Clarion': 24090, 'Clearfield': 53226, 'Clinton': 22303, 'Columbia': 40868, 'Crawford': 53386, 'Cumberland': 166965, 'Dauphin': 190301, 'Delaware': 412854, 'Elk': 20244, 'Erie': 190222, 'Fayette': 83852, 'Forest': 3330, 'Franklin': 93018, 'Fulton': 9187, 'Greene': 22590, 'Huntingdon': 29781, 'Indiana': 51853, 'Jefferson': 29926, 'Juniata': 13840, 'Lackawanna': 148104, 'Lancaster': 335791, 'Lawrence': 57049, 'Lebanon': 86878, 'Lehigh': 236081, 'Luzerne': 205332, 'Lycoming': 69764, 'McKean': 24911, 'Mercer': 77265, 'Mifflin': 25933, 'Monroe': 109247, 'Montgomery': 577418, 'Montour': 13098, 'Northampton': 211402, 'Northumberland': 56496, 'Perry': 28727, 'Philadelphia': 1102560, 'Pike': 40087, 'Potter': 11005, 'Schuylkill': 87989, 'Snyder': 22264, 'Somerset': 49693, 'Sullivan': 4404, 'Susquehanna': 26373, 'Tioga': 26592, 'Union': 24667, 'Venango': 32655, 'Warren': 30146, 'Washington': 138835, 'Wayne': 33683, 'Westmoreland': 246020, 'Wyoming': 16865, 'York': 295895, })39:Tbc6,chart = html` `3a:T8ecf,pennsylvania = html` `3b:[] 2f:{"title":"Pennsylvania voting machines","cells":[{"id":0,"value":"md`# Pennsylvania voting machines\n*This is a draft. Data may not be accurate and are prone to change*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"tmpHtml = html`\n

\n Explore Pennsylvania voting machines by county\n ${fontSheet}\n \n

\n ${viz}\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viz = html`\n

Explore Pennsylvania voting machines by county

Most Pennsylvania counties use a type of voting machines that does \nnot produce a paper trail. These direct-recording electronic machines (DREs) cannot be audited and are prone to hacking. Experts say they should be replaced.

\n${pennsylvania}\n

How many voters are affected?

\nMost registered voters in Pennsylvania live in counties with voting machines that do not record each individual vote on paper.

\n${chart}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof goodNowColor = color({value: '#2a69a8', title: 'Good now color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof goodMidtermsColor = color({value: '#76abcb', title: 'Good by midterms color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof good2020Color = color({value: '#d3e5ef', title: 'Good by 2020 color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof badColor = color({value: '#ef724d', title: 'Bad color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof restColor = color({value: '#fbdbca', title: 'Rest color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"responsiveStyles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"{\n render;\n const finalHtml = tmpHtml.innerHTML\n .replace('

', '')\n .replace('

', '');\n // let win = window.open();\n // win.document.body.innerHTML = finalHtml;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"viewof render = button({title: 'Render', value: 'Go'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"svgStyles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"fontSheet = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"allStyles = {\n let css = '';\n [styles, svgStyles, barStyles, responsiveStyles].forEach((style) => {\n css += style.innerHTML + '\\n';\n });\n return css;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"viewof extraChartPadding = slider({\n min: 0, \n max: 200, \n step: 1, \n value: 3, \n title: \"Extra chart padding\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"viewof populationLabelOffset = slider({\n min: 0, \n max: 1000, \n step: 1, \n value: 464, \n title: \"Population label offset\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"viewof populationLabelOffsetVert = slider({\n min: 0, \n max: 1000, \n step: 1, \n value: 0, \n title: \"Population label offset vertical\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof tickTextWidth = slider({\n min: 0, \n max: 300, \n step: 1, \n value: 250, \n title: \"Width of tick text box\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"viewof numTicks = slider({\n min: 1, \n max: 30, \n step: 1, \n value: 5, \n title: \"Number of legend ticks\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"viewof barNumberOffset = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 7, \n title: \"Bar number offset\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"viewof legendSquareWidth = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 0, \n title: \"Legend square width\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"viewof legendSquareColor = color({value: '#000000', title: 'Legend square color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"viewof barHeight = slider({\n min: 1, \n max: 300, \n step: 1, \n value: 30, \n title: \"Bar height\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"viewof barWidthMax = slider({\n min: 1, \n max: 800, \n step: 1, \n value: 460, \n title: \"Max bar width\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"viewof barMargin = slider({\n min: 0, \n max: 2, \n step: 0.05, \n value: 0.5, \n title: \"Bar margin\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"viewof showLegend = checkbox({\n options: [\n { value: 'legend', label: 'Show legend' }\n ],\n value: 'legend'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"viewof hideNumbers = checkbox({\n options: [\n { value: 'hide', label: 'Hide numbers' }\n ],\n value: 'hide',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md`

*Color palette (click around to change)*

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"viewof edgeColor = color({value: '#ffffff', title: 'Edge color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"viewof highlightEdgeColor = color({value: '#222222', title: 'Highlight edge color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof graphAxisColor = color({value: '#707070', title: 'Graph axis color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"viewof graphAxisTextColor = color({value: '#1b1e23', title: 'Graph axis text color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"viewof barTextColor = color({value: '#1b1e23', title: 'Bar text color'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"maxPopBin = {\n let max = 0;\n Object.getOwnPropertyNames(popBins).forEach((bin) => {\n const value = popBins[bin];\n if (value > max) max = value;\n });\n return max;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"function makeTicks(numTicks) {\n let s = '';\n for (let i = 1; i <= numTicks; i++) {\n s += `

${i}

`;\n }\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"function addCommas(number) {\n // from https://stackoverflow.com/a/2901298/1404888\n return `${number}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"import {color, slider, checkbox, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}