31:T19f5,{ const height = width const margin = {left: 40, top: 40, right: 40, bottom: 40} // start with scales // x, y, radius, gradient/color const xScale = d3.scaleLinear() .domain(d3.extent(data, d => d.margin)).nice() .range([margin.left, width - margin.right]) const x0 = xScale(0) const yScale = d3.scaleLinear() .domain(d3.extent(data, d => d.income)).nice() .range([height - margin.bottom, margin.top]) const medianIncome = d3.median(data, d => d.income) const medianY = yScale(medianIncome) // since we're using radius we need to use sqrt const radiusScale = d3.scaleSqrt() .domain(d3.extent(data, d => d.numPrecincts)) .range([5, 50]) const colorScale = chroma.scale(["#fcf76e", "#7a3a95"]) .mode('lch') .domain(d3.extent(data, d => d.delay)) // translate data to screen space const render = _.chain(groupedByFIPS) .map(d => { return { id: d.FIPS, group: d.state, x: xScale(d.margin), y: yScale(d.income), r: radiusScale(d.numPrecincts), color: colorScale(d.delay).css(), } }).sortBy(d => -d.r) .value() const lineGen = d3.line() let renderContours = _.chain(render) .groupBy('group') .filter((counties, state) => counties.length > 1 && _.includes(swingStates, state)) .value() renderContours = _.chain(renderContours) .map((counties, i) => { const {x, y, group} = counties[0] const points = _.chain(counties) .map(({x, y, r}) => { r += 8 const points = Math.ceil(2 * Math.PI * r) const perAngle = (2 * Math.PI) / points return _.times(points, i => [x + r * Math.cos(i * perAngle), y + r * Math.sin(i * perAngle)]) }).flatten().value() return { x, y, group, color: d3.interpolateRainbow(i / renderContours.length), path: lineGen(d3.polygonHull(points)), } }).flatten().value() console.log(renderContours) const arrowSize = 6 const svg = this ? d3.select(this).select('svg') : d3.select(html` `) const div = this ? d3.select(this).select('div') : d3.select(html`

median income

Democratic victory

Republican victory

higher income counties that voted Democratic in 2016

lower income counties that voted Democratic in 2016

higher income counties that voted Republican in 2016

lower income counties that voted Republican in 2016

`) // add in gradient for margin this || svg.select('defs').call(linearGradient, 'gradient', [ {color: colors.blue, opacity: 1}, {color: colors.white, opacity: 0.25}, {color: colors.red, opacity: 1}, // x1, x2, y1, y2 ], margin.left, width - margin.right, 0, 0) // add in arrow markers this || svg.select('defs').call(arrowMarker, [ {id: 'red', color: colors.red}, {id: 'blue', color: colors.blue}, {id: 'black', color: colors.black}, ], arrowSize) // animation const t = svg.transition().duration(250) // draw dots svg.select('#dots').selectAll('circle') .data(render, d => d.id).join('circle') .attr('transform', d => `translate(${d.x}, ${d.y})`) // .attr('fill-opacity', 0.85) // .style('mix-blend-mode', 'multiply') .transition(t) .attr('r', d => d.r) .attr('fill', d => d.color) .attr('stroke', d => d.color) // draw axes const fontSize = 12 let yAxis = svg.select('#yAxis') .attr('transform', `translate(${x0}, 0)`) yAxis.select('#up') // line going up .attr('y1', medianY - fontSize * 1.5) .attr('y2', margin.top) yAxis.select('#down') // line going down .attr('y1', medianY + fontSize * 1.5) .attr('y2', height - margin.bottom) // median div.select('#median') .style('left', `${x0}px`) .style('top', `${medianY}px`) .select('#income') .text(d3.format('$,')(_.round(medianIncome))) const xAxis = svg.select('#xAxis') .attr('transform', `translate(0, ${medianY})`) .attr('stroke', 'url(#gradient)') xAxis.select('#left') .attr('x1', x0 - fontSize * 5) .attr('x2', margin.left) xAxis.select('#right') .attr('x1', x0 + fontSize * 5) .attr('x2', width - margin.right) // labels div.selectAll('#dem, #rep') .style('top', `${medianY - 1.5 * fontSize}px`) div.select('#dem') .style('color', colors.blue) .style('left', `${margin.left + 1.25 * fontSize}px`) div.select('#rep') .style('color', colors.red) .style('right', `${margin.right + 1.25 * fontSize}px`) // contours // const states = svg.select('#contours').selectAll('g') // .data(renderContours).join('g') svg.select('#contours').selectAll('path') .data(renderContours).join('path') // states.append('path') .attr('id', d => `path${d.group}`) .attr('fill', colors.gray) .attr('fill-opacity', 0.1) .attr('stroke', colors.gray) .attr('stroke-opacity', 0.5) .attr('stroke-width', 2) .transition(t) .attr('d', d => d.path) // states.append('text') // .append('textPath') // .attr('href', d => `#path${d.group}`) // .attr('startOffset', 100) // // .attr('x', d => d.x) // // .attr('y', d => d.y) // .text(d => d.group) return html`

${svg.node()} ${div.node()}

` }32:T531,data = d3.csv(`https://docs.google.com/spreadsheets/d/1pfawvp_5cxehn9PyCl9dWHZ9ZBaDMKZqRbXhMrRvpwo/gviz/tq?tqx=out:csv&sheet=Data`) .then(data => { return _.chain(data) .map(d => { const FIPS = d['County FIPS'].toString().padStart(5, 0) const timeString = d['Time of occurrence (EST)'] const date = `11/3/2020 ${timeString} EST` const electionData = _.find(allElectionsData, d => d.FIPSCode === FIPS) const demoData = _.find(allDemographicsData, d => d.FIPSCode === FIPS) if (!electionData || !demoData) return const {repMargin, totalVotes} = electionData const {B19301_001E, B02001_003E, B01003_001E} = demoData const income = B19301_001E[demoYear] const blackPop = B02001_003E[demoYear] / B01003_001E[demoYear] const margin = repMargin[presYear] / totalVotes[presYear] return { state: d.State, county: d.County, FIPS, description: d['Voting problem description'], numPrecincts: +d['Precincts affected'] || 1, url: d['Article URL'], delay: +d['Delay duration (hours)'], type: d.Type, time: new Date(date), date, // demographic data margin, income, blackPop, } }).filter().value() })33:[] 2f:{"title":"[ARCHIVED] Voting problems on Election Day","cells":[{"id":0,"value":"md`\n# [ARCHIVED] Voting problems on Election Day\n\nThank you to the following people for contributing data 🥳:\n${\n_.map(contributors, ({Name, Website}) => {\n return `- [${Name}](${Website})\\n`\n})\n}\n\nFirst, group by county FIPS:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"groupedByFIPS = _.chain(data)\n .filter(d => time >= d.time.getTime())\n .groupBy('FIPS')\n .map((issues, FIPS) => {\n // extract state, county, sum the num precincts & delay\n // and add in demographics data from 2018 + election data from 2016\n const {state, county, income, blackPop, margin} = issues[0]\n \n return {\n state, county, FIPS,\n numPrecincts: _.sumBy(issues, 'numPrecincts'),\n delay: _.sumBy(issues, 'delay'),\n income, blackPop, margin,\n issues,\n }\n }).filter()\n .value()","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"groupedByState = _.chain(groupedByFIPS)\n .groupBy('state')\n .value()","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"swingStates = ['Arizona', 'Florida', 'Georgia', 'Iowa', 'Michigan', 'Minnesota', 'Nevada', 'New Hampshire', 'North Carolina', 'Ohio', 'Pennsylvania', 'Texas', 'Wisconsin']","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`\n# Voting Problems as of
${d3.timeFormat('%I:%M %p EST')(convertToEST(time))} Election Day\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"viewof time = slider({\n title: `time of occurrence, starting ${d3.timeFormat('%I:%M %p EST')(convertToEST(timeRange[0].getTime()))}`,\n min: timeRange[0].getTime(), \n max: timeRange[1].getTime(), \n step: 60000,\n format: d => d3.timeFormat('%I:%M %p EST')(convertToEST(d)),\n value: timeRange[0].getTime(),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"unusedCode = {\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`\n### # quick sketch with Vega-Lite:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"vl.markPoint()\n .data(groupedByFIPS)\n .encode(\n vl.x().fieldQ('margin'),\n vl.y().fieldQ('income'),\n vl.color().fieldQ('delay'),\n vl.size().fieldQ('numPrecincts'),\n ).render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"demoYear = 2018","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"presYear = 2016","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n## # data & imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"medianIncome = d3.median(allDemographicsData, d => d.B19301_001E[demoYear])","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"timeRange = {\n const sorted = _.sortBy(data, 'time')\n \n return [sorted[1].time, _.last(sorted).time]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"timezoneOffset = (new Date()).getTimezoneOffset()","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"convertToEST = (msec) => {\n var utc = msec + (timezoneOffset * 60000);\n\n // create new Date object for EST (-5 during standard time)\n return new Date(utc + (3600000*-5));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"_.filter(data, d => _.isNaN(d.time.getTime()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"new Date(\"11/3/2020 1:15 PM EST\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"contributors = d3.csv(`https://docs.google.com/spreadsheets/d/1pfawvp_5cxehn9PyCl9dWHZ9ZBaDMKZqRbXhMrRvpwo/gviz/tq?tqx=out:csv&sheet=Contributors`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"import {colors, linearGradient, arrowMarker} from '678eab71089ff43a'","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"import {allDemographicsData, allElectionsData} from '@sxywu/all-project-data-cached'","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"style = html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}