31:T8b6,renderData = { const height = 400 const margin = {left: 0, top: 20, right: 0, bottom: 40} // 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().range([height - margin.bottom, margin.top]) // line generator const lineGen = d3.line().x(d => d.x).y(d => d.y).curve(d3.curveMonotoneX) const startPath = filteredState && lineGen(_.map(xDomain, type => { return {x: xScale(type), y: yScale(filteredState[type] || 0)} })) let render = statesData if (filteredState) { render = _.filter(countiesData, d => d.stateID === filter) } else if (filter === 'early') { render = _.filter(statesData, d => d.early) } else if (filter == 'noearly') { render = _.filter(statesData, d => !d.early) } render = _.map(render, d => { const points = _.map(xDomain, type => { return {x: xScale(type), y: yScale(d[type] || 0)} }) const highlight = highlights.early[0] <= d.earlyRatio && d.earlyRatio <= highlights.early[1] && highlights.dayOf[0] <= d.dayOfRatio && d.dayOfRatio <= highlights.dayOf[1] return { id: d.id, text: d.label, highlight, stroke: highlight ? 'url(#gradient)' : colors.gray, strokeWidth: 1.5, opacity: highlight ? 1 : (highlight === 'all' ? 0.75 : 0.25), points, path: lineGen(points), dayOfRatio: d.dayOfRatio, texts: _.reduce(['early', 'dayOf'], (obj, type) => { obj[type] = `${d3.format(',')(d[type])} (${_.round(d[type + 'Ratio'] * 100, 1)}%)` return obj }, {}) } }) const xAxisLabels = [{type: 'earlyRatio', label: 'In-Person Early Voting'}, {type: 'dayOfRatio', label: 'Election Day'}] _.each(xAxisLabels, d => Object.assign(d, {x: xScale(d.type)})) const yLabelHeight = yScale(0) - yScale(0.25) const yAxisLabels = _.map([1, .75, .5, .25], (d, i) => { return { text: d < 1 ? `${d * 100}%` : '% of Total Participation', bold: d === 1, y: yScale(d), height: yLabelHeight, rect: i % 2 === 0, } }) return {height, margin, render, xAxisLabels, yAxisLabels} }32:Te85,lineChart = { const {height, margin, render, xAxisLabels, yAxisLabels} = renderData const div = this ? d3.select(this).select('div') : d3.select(html`

Early Voting

Election Day

`) div.style('display', 'none') const svg = this ? d3.select(this).select('svg') : d3.select(DOM.svg(width, height)) svg.style('isolation', 'isolate') // 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) // draw y-axis const fontSize = 14 const yAxis = svg.selectAll('g.yAxis') .data(yAxisLabels).enter().append('g') .classed('yAxis', true) .attr('transform', d => `translate(${margin.left}, ${d.y})`) yAxis.filter(d => d.rect).append('rect') .attr('width', width - margin.left - margin.right) .attr('height', d => d.height) .attr('fill', colors.gray) .attr('opacity', 0.1) yAxis.append('text') .attr('x', 2) .attr('y', -fontSize / 2) .attr('dy', '.35em') .style('font-size', fontSize) .style('font-weight', d => d.bold && 'bold') .text(d => d.text) // draw lines const lines = svg.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') .style('mix-blend-mode', 'multiply') .attr('fill', 'none') .attr('d', d => d.path) 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) const highlightLine = this ? d3.select(this).select('.highlight') : svg.append('path') highlightLine.classed('highlight', true) .attr('d', '') .attr('fill', 'none') .attr('stroke', colors.highlight) .attr('stroke-width', 10) .attr('opacity', 0.5) enter.on('mouseenter', event => { const datum = event.target.__data__ if (datum.highlight) { div.style('display', 'block') div.select('.name').text(datum.text) div.select('.early').text(datum.texts.early) div.select('.dayOf').text(datum.texts.dayOf) highlightLine.attr('d', datum.path) } else { div.style('display', 'none') highlightLine.attr('d', '') } }) // draw x-axes const axisPadding = 10 const xAxis = svg.selectAll('g.xAxis') .data(xAxisLabels, d => d.type).enter().append('g') .classed('xAxis', true) .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) return html`

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

` }33:[{"id":"3acee8746541d445a5747a9ad3e2755438305e5dc52ec02f9ee7300a33eb48afba46b1138b2390adcd406892e207c3b2db466884d11c44e98b150766ef9e8b0c","href":"https://static.observableusercontent.com/files/3acee8746541d445a5747a9ad3e2755438305e5dc52ec02f9ee7300a33eb48afba46b1138b2390adcd406892e207c3b2db466884d11c44e98b150766ef9e8b0c","name":"countiesData2016.csv","type":"text/csv","lastModified":1603285317475.886,"size":136802},{"id":"03a84ae9684050a2b5a5d2a03a5e8aa13cba4dc9a3a0a0915bcd4bbf5487708a2a297385ecdf10c91a1dc04ace5f815b17281c151e826d5d4f08ba7e38ad949e","href":"https://static.observableusercontent.com/files/03a84ae9684050a2b5a5d2a03a5e8aa13cba4dc9a3a0a0915bcd4bbf5487708a2a297385ecdf10c91a1dc04ace5f815b17281c151e826d5d4f08ba7e38ad949e","name":"statesData2016.csv","type":"text/csv","lastModified":1603285317481.774,"size":2933},{"id":"08fd81bddb4c63036ca9645becf4bff1c06514e4e10d775d1cb9354ee39046110facc1231aa1d16e1c621382ef8843f44e04c93768762c1f35dcaf295fb5333c","href":"https://static.observableusercontent.com/files/08fd81bddb4c63036ca9645becf4bff1c06514e4e10d775d1cb9354ee39046110facc1231aa1d16e1c621382ef8843f44e04c93768762c1f35dcaf295fb5333c","name":"statesData.csv","type":"text/csv","lastModified":1603284998130.546,"size":3596},{"id":"c85edd93ad4c8ce7dcfa75fdf1ef6106137093b3b948d5705a61dabef5b99a0645aac97c6736c6b8e08642748df708517b31f9888d4ccb41d996111981154536","href":"https://static.observableusercontent.com/files/c85edd93ad4c8ce7dcfa75fdf1ef6106137093b3b948d5705a61dabef5b99a0645aac97c6736c6b8e08642748df708517b31f9888d4ccb41d996111981154536","name":"countiesData.csv","type":"text/csv","lastModified":1603284998223.375,"size":226358}] 2f:{"title":"3a. Historical participation in early voting vs. Election Day voting","cells":[{"id":0,"value":"md`\n# 3a. Historical participation in early voting vs. Election Day voting\n\n**Year**: 2016\n\n**Relevant keys:**\n- F1a: Total\n- F1b: Physical Polling Place on Election Day \n- F1f: In Person Early Voting \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":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"medianDayOfRatio = {\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.median(renderData.render, d => d.dayOfRatio)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"title = md`\n# In ${year}, ${_.round(medianDayOfRatio * 100, 1)}% of in-person voters${\n filteredState ? ` in ${filteredState.label}` :\n filter === 'early' ? ` in states with Early Voting` :\n filter === 'noearly' ? ` in states without Early Voting` : ''\n} cast their ballot on Election Day.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"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":438,"value":"viewof highlights = inputsGroup(\n [\n [\n html`Highlight In-Person Early Voting: `,\n rangeSlider({name: 'early', format: '.0%'}),\n ],\n [\n html`Highlight Election Day: `,\n rangeSlider({name: 'dayOf', format: '.0%'}),\n ],\n ],\n [\n ['', 'early'],\n ['', 'dayOf'],\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"beforeGraphText = md`\nEach line represents a ${filteredState ? 'county' : 'state'}. **Hover to see details:**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"_.sortBy(renderData.render, 'text')","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"afterGraphText = md`\nThe COVID-19 pandemic makes voting in-person a big risk this year. Many states now offer vote-by-mail and early voting. If you are able to, **vote early and help flatten the curve** on Election Day.\n\n

\nThis graph only shows in-person voting, and does not show other methods such as vote by mail. This is why for all-mail states such as Colorado, Oregon, and Washington, the numbers displayed are very low. \n**Source**: Election Administration and Voting Survey, U.S. Election Assistance Council \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"colors = new Object({\n gray: '#AEA2B1',\n black: '#47535C',\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":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":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":635,"value":"data = new Object({\n counties: {\n 2018: cleanData(await FileAttachment(\"countiesData.csv\").csv()),\n 2016: cleanData(await FileAttachment(\"countiesData2016.csv\").csv()),\n },\n states: {\n 2018: cleanData(await FileAttachment(\"statesData.csv\").csv()),\n 2016: cleanData(await FileAttachment(\"statesData2016.csv\").csv()),\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"cleanData = (data) => {\n _.each(data, d => {\n _.each(['early', 'dayOf', 'total', 'earlyRatio', 'dayOfRatio'], key => {\n d[key] = +d[key]\n })\n \n d.total = d.early + d.dayOf\n d.earlyRatio = d.early / d.total\n d.dayOfRatio = d.dayOf / d.total\n })\n \n return data\n}","pinned":false,"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":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":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":78,"value":"years = [2016, 2018]","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"style = html`\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}