32:T8da,renderData = { // const width = 1080 / 2 // const height = (1350 - 80) / 3 // const margin = {left: 60, top: 80, right: 0, bottom: 0} const height = 450 const margin = {left: 36, top: 20, right: 0, bottom: 30} // x-axis const xDomain = ['start', 'earlyRatio', 'dayOfRatio', 'end'] const xScale = d3.scalePoint().domain(xDomain) .range([margin.left, width - margin.right]) // y-axis const yScale = d3.scaleLinear() .domain([0, Math.max(maxDayOfRatio, maxEarlyRatio)]) .range([height - margin.bottom, margin.top]) // line generator const lineGen = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveMonotoneX) const render = _.chain(showData) .map(d => { const points = _.map(xDomain, type => { return {x: xScale(type), y: yScale(d[type] || 0)} }) // either both our default or it falls under both const highlight = highlightEarly[0] <= d.earlyRatio && d.earlyRatio <= highlightEarly[1] && highlightDayOf[0] <= d.dayOfRatio && d.dayOfRatio <= highlightDayOf[1] const find = _.includes(findMultiple, d.id) return { id: d.id, text: `${d.label} (${_.round(d.times, 1)}x)`, highlight, find, // stroke: find ? colors.highlight : (highlight ? 'url(#gradient)' : colors.gray), // blend: find ? 'normal' : 'multiply', stroke: !highlight ? colors.gray : 'url(#gradient)', strokeWidth: find ? 5 : 1.5, opacity: find ? 1 : (highlight ? 0.75 : 0.1), points, path: lineGen(points), texts: _.reduce(['early', 'dayOf'], (obj, type) => { obj[type] = d3.format(',')(_.round(d[type + 'Ratio'])) return obj }, {}) } }).sortBy(d => d.find) .value() const xAxisLabels = [{type: 'earlyRatio', label: 'Early Voting'}, {type: 'dayOfRatio', label: 'Election Day'}] _.each(xAxisLabels, d => Object.assign(d, {x: xScale(d.type)})) const yAxis = d3.axisLeft().scale(yScale).ticks(4).tickSizeOuter(0) const yAxisLabel = 'Number of People at a Polling Station on Any Given Day' const median = _.map([meanEarlyRatio, meanDayOfRatio], d => { return {y: yScale(d)} }) return {width, height, margin, render, xAxisLabels, yAxis, yAxisLabel, median} }33:T1244,lineChart = { const {width, height, margin, render, xAxisLabels, yAxis, yAxisLabel, median} = renderData const div = this ? d3.select(this).select('div') : d3.select(html` `) const svg = this ? d3.select(this).select('svg') : d3.select(html` `) // const svg = this ? d3.select(this).select('svg') : d3.select(html` // // `) // create transition animation localized to svg selection const t = svg.transition().duration(500) // gradient this || svg.call(linearGradient, 'gradient', [ {color: colorScale(0)}, {color: colorScale(0.5)}, {color: colorScale(1)}, ], 0, 0, margin.top, height - margin.bottom) const fontSize = 14 // draw lines const highlightedLine = svg.select('#highlightedLine') .attr('d', '') .attr('fill', 'none') .attr('stroke', colors.highlight) .attr('stroke-width', 10) .attr('opacity', 0.5) const lines = svg.select('#lines') .selectAll('path.line').data(render, d => d.id) lines.exit().transition(t) .attr('opacity', 0).remove() const enter = lines.enter().append('path') .classed('line', true) .attr('stroke-linecap', 'round') .attr('fill', 'none') .attr('d', d => d.path) .on('mouseenter', event => { const data = event.target.__data__ if (data && data.highlight) { div.style('display', 'block') div.select('.name').text(data.text) div.select('.early').text(data.texts.early) div.select('.dayOf').text(data.texts.dayOf) highlightedLine.attr('d', data.path) } else { div.style('display', 'none') highlightedLine.attr('d', '') } }) lines.merge(enter).transition(t) .attr('d', d => d.path) .attr('stroke', d => d.stroke) .attr('opacity', d => d.opacity) .attr('stroke-width', d => d.strokeWidth) .style('mix-blend-mode', d => d.blend) .style('pointer-events', d => d.highlight ? 'auto' : 'none') // draw x-axes const axisPadding = 10 const xAxis = svg.select('#xAxis') .selectAll('g') .data(xAxisLabels, d => d.type).enter().append('g') .attr('transform', d => `translate(${d.x}, ${height - margin.bottom})`) xAxis.append('line') .attr('y2', -height + margin.top + margin.bottom) .attr('stroke', colors.gray) .attr('stroke-dasharray', '10 5') .attr('opacity', 0.5) .style('mix-blend-mode', 'multiply') .style('pointer-events', 'none') xAxis.append('line') .attr('y2', axisPadding) .attr('stroke', colors.black) xAxis.append('text') .attr('y', axisPadding + fontSize / 2) .attr('dy', '.35em') .attr('text-anchor', 'middle') .style('font-size', fontSize) .style('font-weight', 'bold') .text(d => d.label) // draw y-axis svg.select('#yAxis') .attr('transform', `translate(${margin.left}, 0)`) .transition(t).call(yAxis) .select('path').remove() svg.select('#yLabel') .attr('transform', `translate(${2}, ${margin.top})`) .attr('y', -fontSize) .attr('dy', '.35em') .style('font-size', fontSize) .style('font-weight', 'bold') .text(yAxisLabel) // FIND jurisdictions svg.select('#find') .selectAll('text') .data(_.filter(renderData.render, 'find')).join('text') .attr('transform', ({points}) => { const {x, y} = points[2] return `translate(${x}, ${y})` }) .attr('dy', '.35em') .attr('text-anchor', 'middle') .style('font-size', fontSize) .style('pointer-events', 'none') .text(d => d.text) // // median ratios // svg.append('g').attr('id', 'mean') // .selectAll('circle') // .data(median).join('circle') // .attr('transform', d => `translate(0, ${d.y})`) // .attr('r', 3) return html`

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

` }34:[{"id":"784a2778b7f0b321ea9b1f685645bcfa537f22d5ead150286ec80bd488e0e76e4d6b63196248497b1418f356a489c06d2628761fbd2974aeb0e60476f28d56f4","href":"https://static.observableusercontent.com/files/784a2778b7f0b321ea9b1f685645bcfa537f22d5ead150286ec80bd488e0e76e4d6b63196248497b1418f356a489c06d2628761fbd2974aeb0e60476f28d56f4","name":"statesData2018.csv","type":"text/csv","lastModified":1603425136761.074,"size":3386},{"id":"47c380dc7b76b268fbe8c9709a1a37b5b5ad842b82609d7636424c2cb86097e2f178a31350eff3435dc6b8654610922177cc7a4a83665254eef7893b16f47174","href":"https://static.observableusercontent.com/files/47c380dc7b76b268fbe8c9709a1a37b5b5ad842b82609d7636424c2cb86097e2f178a31350eff3435dc6b8654610922177cc7a4a83665254eef7893b16f47174","name":"countiesData2018.csv","type":"text/csv","lastModified":1603425136893.921,"size":204620},{"id":"08fd81bddb4c63036ca9645becf4bff1c06514e4e10d775d1cb9354ee39046110facc1231aa1d16e1c621382ef8843f44e04c93768762c1f35dcaf295fb5333c","href":"https://static.observableusercontent.com/files/08fd81bddb4c63036ca9645becf4bff1c06514e4e10d775d1cb9354ee39046110facc1231aa1d16e1c621382ef8843f44e04c93768762c1f35dcaf295fb5333c","name":"statesData.csv","type":"text/csv","lastModified":1603329186800.191,"size":3596},{"id":"c85edd93ad4c8ce7dcfa75fdf1ef6106137093b3b948d5705a61dabef5b99a0645aac97c6736c6b8e08642748df708517b31f9888d4ccb41d996111981154536","href":"https://static.observableusercontent.com/files/c85edd93ad4c8ce7dcfa75fdf1ef6106137093b3b948d5705a61dabef5b99a0645aac97c6736c6b8e08642748df708517b31f9888d4ccb41d996111981154536","name":"countiesData.csv","type":"text/csv","lastModified":1603329186800.191,"size":226358},{"id":"1040086eeccd3a7bd1d339d28a6685eba70acceafa05479565cdcce67f47671741d6d495fff0d363563c7dc8182f7cf894387dbb4573654bdef1fe7865ee2b29","href":"https://static.observableusercontent.com/files/1040086eeccd3a7bd1d339d28a6685eba70acceafa05479565cdcce67f47671741d6d495fff0d363563c7dc8182f7cf894387dbb4573654bdef1fe7865ee2b29","name":"statesData (1).csv","type":"text/csv","lastModified":1603337281477.147,"size":2452},{"id":"3ad9a1b7501a6473c5e6a86e153df585541b567e834db47ac01de164f06c297c60484380b09358df3e22a9a1fa371c30a386977b4461d34af4362eca5213ea3e","href":"https://static.observableusercontent.com/files/3ad9a1b7501a6473c5e6a86e153df585541b567e834db47ac01de164f06c297c60484380b09358df3e22a9a1fa371c30a386977b4461d34af4362eca5213ea3e","name":"countiesData (1).csv","type":"text/csv","lastModified":1603337310782.36,"size":153740},{"id":"e863f6d2a71028d8e0f08929a0d664f5c53cf71d70776cf5eb7118e2914b8d897f0da8272d4f3ebc32882eb50d0bff4264ef2fae3a1fed9cf09d0b710ccd9544","href":"https://static.observableusercontent.com/files/e863f6d2a71028d8e0f08929a0d664f5c53cf71d70776cf5eb7118e2914b8d897f0da8272d4f3ebc32882eb50d0bff4264ef2fae3a1fed9cf09d0b710ccd9544","name":"countiesData2018@1.csv","type":"text/csv","lastModified":1603433485047.591,"size":204426},{"id":"206ff885af9c7eeda70ea0ecee3018abb1fea4522821bd30b9e38b2f347e5d0452a22f4516d0c490fd2791c91a5371398583eb20a05865e7fc77c5c3bb8573c0","href":"https://static.observableusercontent.com/files/206ff885af9c7eeda70ea0ecee3018abb1fea4522821bd30b9e38b2f347e5d0452a22f4516d0c490fd2791c91a5371398583eb20a05865e7fc77c5c3bb8573c0","name":"countiesData2016@2.csv","type":"text/csv","lastModified":1603433505782.105,"size":103332},{"id":"99a4f6727112cf9f980f3e4e900fa6cbdbe29830b787c65eec4c24e01047b4ee883be368c027d2d3a629519e418c45e51246a2c1b32d1cedee0eb36e5d42ee5f","href":"https://static.observableusercontent.com/files/99a4f6727112cf9f980f3e4e900fa6cbdbe29830b787c65eec4c24e01047b4ee883be368c027d2d3a629519e418c45e51246a2c1b32d1cedee0eb36e5d42ee5f","name":"statesData2018@2.csv","type":"text/csv","lastModified":1603433744084.629,"size":3358},{"id":"5b20a5937648a135b59648b73d3b05e2c998b77db743944a5ea39848388a918ab2cf52f93c437d4f3bd570adb862e24fe4c43c63f71aadb2d257f6c6811b3f85","href":"https://static.observableusercontent.com/files/5b20a5937648a135b59648b73d3b05e2c998b77db743944a5ea39848388a918ab2cf52f93c437d4f3bd570adb862e24fe4c43c63f71aadb2d257f6c6811b3f85","name":"countiesData2016@1.csv","type":"text/csv","lastModified":1603425136841.276,"size":103512},{"id":"331b4981204bb4ecd36f5b526e2be1365fd572c806874efbd8652bc2e219b9d26fbae0732e9dd2fd847771fe9d425b17815f5be1a1c3b22eedf1c45ca9813c6a","href":"https://static.observableusercontent.com/files/331b4981204bb4ecd36f5b526e2be1365fd572c806874efbd8652bc2e219b9d26fbae0732e9dd2fd847771fe9d425b17815f5be1a1c3b22eedf1c45ca9813c6a","name":"statesData2016@1.csv","type":"text/csv","lastModified":1603425136531.343,"size":2089},{"id":"206ff885af9c7eeda70ea0ecee3018abb1fea4522821bd30b9e38b2f347e5d0452a22f4516d0c490fd2791c91a5371398583eb20a05865e7fc77c5c3bb8573c0","href":"https://static.observableusercontent.com/files/206ff885af9c7eeda70ea0ecee3018abb1fea4522821bd30b9e38b2f347e5d0452a22f4516d0c490fd2791c91a5371398583eb20a05865e7fc77c5c3bb8573c0","name":"countiesData2016@3.csv","type":"text/csv","lastModified":1603433734295.993,"size":103332}] 30:{"title":"3b. Number of people at a polling location on a given day in 2018, early voting vs. Election Day","cells":[{"id":0,"value":"md`\n# 3b. Number of people at a polling location on a given day in 2018, early voting vs. Election Day\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"year = +select1.year","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"filter = select2.filter","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"filteredState = _.find(statesData, d => d.id === filter)","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"showData = {\n let render = statesData\n if (filteredState) {\n render = _.filter(countiesData, d => d.stateID === filter)\n } else if (filter === 'early') {\n render = _.filter(statesData, d => d.early)\n } else if (filter == 'noearly') {\n render = _.filter(statesData, d => !d.early)\n }\n \n return _.sortBy(render, d => -d.times)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"highlightEarly = highlights.early.map(d => normalizeEarly(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1482,"value":"highlightDayOf = highlights.dayOf.map(d => normalizeDayOf(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"maxEarlyRatio = _.ceil(d3.max(showData, d => d.earlyRatio), -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1342,"value":"medianEarlyRatio = d3.median(showData, d => d.earlyRatio)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1358,"value":"meanEarlyRatio = d3.mean(showData, d => d.earlyRatio)","pinned":true,"hidden":false,"mode":"ojs"},{"id":699,"value":"maxDayOfRatio = _.ceil(d3.max(showData, d => d.dayOfRatio), -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1348,"value":"medianDayOfRatio = d3.median(showData, d => d.dayOfRatio)","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"meanDayOfRatio = {\n// let dayOfTotal = 0\n// let totalTotal = 0\n// _.each(masterData, ({F1b, F1a}) => {\n// const dayOf = F1b[year]\n// const total = F1a[year]\n// if (!dayOf || !total) return\n// dayOfTotal += dayOf\n// totalTotal += total\n// })\n \n// return dayOfTotal / totalTotal\n \n // return d3.median(masterData, ({F1b, F1a}) => {\n // const dayOf = F1b[year]\n // const total = F1a[year]\n // if (!dayOf || !total) return 0\n // return dayOf / total\n // })\n \n // return d3.median(statesData, ({dayOf, total}) => {\n // if (!dayOf || !total) return 0\n // return dayOf / total\n // })\n \n return d3.mean(showData, d => d.dayOfRatio)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"maxTimes = _.ceil(d3.max(showData, d => d.times))","pinned":true,"hidden":false,"mode":"ojs"},{"id":718,"value":"meanTimes = d3.mean(showData, d => d.times)","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"medianTimes = d3.median(showData, d => d.times)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1258,"value":"minPOC = d3.min(showData, d => d.poc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1321,"value":"medianPOC = d3.median(showData, d => d.poc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1276,"value":"maxPOC = d3.max(showData, d => d.poc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"title = md`\n# In ${year}, ${_.round(meanTimes, 1)}x more people voted at a polling station on Election Day than during Early Voting${filteredState ? ` in ${filteredState.label}` : ''}*.\n^{*on average}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"viewof select1 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"viewof select2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"md`\n

\nFind ${findMultiple[0] ? '**' + _.map(findMultiple, id => _.find(showData, d => d.id === id).label.split(',')[0]).join('**, **') + '**' :\n filteredState ? 'jurisdictions' : 'states'}:\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"viewof findMultiple = {\n const options = _.chain(showData)\n .map(d => {\n return {label: d.label, value: d.id}\n }).sortBy('label').value()\n options.unshift({label: '—', value: ''})\n return select({\n description: `CTRL or CMD+click to select multiple ${filteredState ? 'jurisdictions' : 'states'}`,\n options,\n multiple: true\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"viewof highlights = inputsGroup(\n [\n [\n html`Highlight Early Voting: `,\n rangeSlider({name: 'early', format: '.0%', separator: ' — '}),\n ],\n [\n html`Highlight Election Day: `,\n rangeSlider({name: 'dayOf', format: '.0%', separator: ' — '}),\n ],\n ],\n [\n ['', 'early'],\n ['', 'dayOf'],\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"afterGraphText = md`\nThe pandemic has made this election difficult and dangerous. If you are able to, help **flatten the curve**—make a plan to **vote early**\nin person or by mail.\n\n

\n**Source**: Election Administration and Voting Survey, U.S. Election Assistance Council \n2016 & 2018 Early Voting, Ballotpedia\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"colors = new Object({\n gray: '#AEA2B1',\n black: '#2D1832',\n highlight: '#FFED6B',\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"colorScale = chroma.scale([\"#ff8464\", \"#41c6fa\"].map(color => chroma(color).saturate(2))).mode('lch')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1163,"value":"alternateColorScale = chroma.scale([\"#ffeaf9\", \"#1b0050\"].map(color => chroma(color).saturate(0))).mode('lch')","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"linearGradient = (selection, id, colors, x1, x2, y1, y2) => {\n selection.append('defs')\n .append('linearGradient')\n .attr('id', id)\n .attr('gradientUnits', 'userSpaceOnUse')\n .attr('x1', x1).attr('x2', x2)\n .attr('y1', y1).attr('y2', y2)\n .selectAll('stop')\n .data(colors).join('stop')\n .attr('offset', (d, i) => `${Math.floor(i * 100 / (colors.length - 1))}%`)\n .attr('stop-color', d => d.color)\n .attr('stop-opacity', d => d.opacity > -1 ? d.opacity : 1)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"normalizeEarly = d3.scaleLinear().range([0, maxEarlyRatio])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1320,"value":"normalizeDayOf = d3.scaleLinear().range([0, maxDayOfRatio])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1435,"value":"vl.markPoint()\n .data(showData)\n .encode(\n vl.x().fieldQ('times'),\n vl.y().fieldQ(vl.repeat('repeat')),\n // vl.color().fieldN('highlight').scale({domain: [true, false], range: [colors.highlight, '#cfcfcf']})\n ).repeat(['income', 'poc'])\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`\n## # Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1113,"value":"years = [2016, 2018]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"data = new Object({\n counties: {\n 2018: cleanData(await FileAttachment(\"countiesData2018@1.csv\").csv()),\n 2016: cleanData(await FileAttachment(\"countiesData2016@2.csv\").csv()),\n },\n states: {\n 2018: cleanData(await FileAttachment(\"statesData2018@2.csv\").csv()),\n 2016: cleanData(await FileAttachment(\"countiesData2016@3.csv\").csv()),\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":653,"value":"cleanData = (data) => {\n _.each(data, d => {\n _.each([\n 'early', 'dayOf', 'earlyRatio', 'dayOfRatio',\n 'dayOfPoll', 'earlyPoll', 'earlyDuration',\n 'income', 'inequality', 'poc',\n ], key => {\n d[key] = +d[key] || 0\n })\n \n d.times = d.dayOfRatio / d.earlyRatio\n })\n \n return _.filter(data, d => d.earlyDuration && d.earlyRatio)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"countiesData = data.counties[year]","pinned":true,"hidden":false,"mode":"ojs"},{"id":647,"value":"statesData = data.states[year]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1366,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"import {scrollSVG} from '@sxywu/utility-functions'","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":972,"value":"import {select, autoSelect} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"import {inputsGroup} from '@bumbeishvili/input-groups'","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"style = html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}