31:T662,md`A large portion of Republican voters appear to [believe that Donald Trump was the legitimate winner](https://www.reuters.com/article/us-usa-election-poll/half-of-republicans-say-biden-won-because-of-a-rigged-election-reuters-ipsos-poll-idUSKBN27Y1AJ) of the 2020 Election, which has potentially significant implications for the ability of the incoming Biden administration to govern and for the nation’s Democracy at large. In the hours and days after the polls closed hopeful Republicans and nervous Democrats watched what appeared to be a very close election -- with initial Trump leads in many key states evaporating as vote counting continued. As Nate Silver recounted the Saturday after the election: >*Even if you knew in advance about the “blue shift” that would occur in states like Pennsylvania — and we did know in advance about it! — it’s been hard to make enough of a mental adjustment for it this week. Numbers flashing across a TV ticker have a certain magnetic power and certitude to them. [[source]](https://fivethirtyeight.com/features/a-pretty-convincing-win-for-biden-and-a-mediocre-performance-for-down-ballot-democrats/)* For many Republicans I suspect that "certitude" of preliminary results created fertile ground for the [substantial disinformation campaign](https://www.lawfareblog.com/trumps-tweets-attacking-election-echo-russian-trolls) alleging fraud pushed by President Trump and his supporters. While traditional media outlets have limited tools to prevent the willful spread of disinformation, effective data visualization can combat the "certitude" imbued by TV ticker numbers.`32:T450,html `

One reason news outlets may be hesitant to visualize the outstanding ballots in any of these ways is because the actual number of ballots cast isn't initially known in most states. The estimated number of ballots cast -- which news organizations used in reporting "Est. % of votes in" -- came from model-based estimates until the final number of votes cast in a given state was actually known.

But uncertainty in the number of outstanding ballots is not a reason to remove them from the visualization altogether, especially given the increasing number of visual tools commonly used to intuitively communicate uncertain values. A straightforward option is using gradients to show an "outstanding" section that ranges in size from 80% to 120% of the estimated number of outstanding ballots:

${makeSingleBar(processResults(results.results.pennsylvania[5]), true)}

In the dot plot above additional animation could be incorporated into the "outstanding" section to visualize the uncertainty in the number of outstanding ballots

`33:T683,md `## Additional Notes ### Election Results Data * As mentioned, the number of uncounted ballots isn't typically known as vote tallies start coming in. This is both because different states have different rules for when mail-in ballots can be accepted and because many states don't report on the number of ballots received by election day or the number provisional ballots cast. * In the past media outlets relied on % of precincts reporting as a proxy for the approximate number of ballots outstanding. That was never a perfect solution but as more states have shifted to vote by mail which get counted separately from in-person precint-based votes, this has become less and less viable. 100% of precincts can have reported their results, with large numbers of ballots still outstanding. This example -- from a U.S. House Race in 2018 where precincts were used as a proxy for votes -- shows how this can go very wrong: ${await FileAttachment("NBC_2018_PrecinctReporting.png").image()} * In 2020 networks switched to using a number of expected votes - provided by vendors like Edison Research - to calculate approximate numbers of votes outstanding. As returns start coming in these expected-vote counts are model-based estimates. Over time as more data become available about the actual number of votes cast the estimates are updated and typically converge towards the final number of actual votes cast. However as far as I've been able to tell Edison Research did not provide information about their confidence in their estimates as they evolved in different states. This is something I hope networks will work with Edison to resolve in future election cycles`34:Tabd,md `### Uncertainty In Election Results and Visualization * One of the most common goals of visualizing uncertainty is to communicate the relative probability of a range of possible outcomes in a way that is easily and accurately interpretable. In the case of visualizing early election returns, this is a very difficult task for two reasons: 1. The most common approaches to showing uncertainty -- like the gradients I use above -- aren't great for helping people make precise estimates, since seeing where a gradient is at 70% compared to 50% compared to 30% is not a naturally easy perceptual task. (There is a lot of [great research into better alternatives](https://mucollective.northwestern.edu/) to address these challenges however). 2. It's very hard to model the probabilities of different outcomes well with limited data of questionable quality. This is presumably why the NY Times chose to only build their "election needle" this year for GA, NC, and FL -- three states that were expected to report relatively high quality returns data fairly quickly. * But the key task in visualizing uncertainty of early returns does not need to be to show the relative likelihood of different possible election outcomes, but instead to visually communicate if it's too early in the counting for people to leap to conclusions about the partial results. This is a much easier task because it doesn't require the same level interpretative precision, and doesn't require robust models built from high quality data where that data simply doesn't exist. * Another reason some networks may be hesitant to visualize uncertainty is because it is often said that reporting uncertainty might undermine credibility and public trust. However [recent research](https://www.pnas.org/content/117/14/7672) shows that this may not actually be the case in most situations. And for this particular case it seems that visualizing the presence of outstanding ballots is less likely to erode public trust than showing partial results that look final but constantly change. * For more on visualizing uncertainty I highly recommend the work of Prof's Jessica Hullman and Matthew Kay. [This article](https://medium.com/multiple-views-visualization-research-explained/uncertainty-visualization-explained-67e7a73f031b) and [this talk](https://www.youtube.com/watch?v=E1kSnWvqCw0) are two of my favorite primers. ` /* There are two fairly distinct types of Uncertainty Visualization required for early election results: 1. Uncertainty in number of outstanding ballots. 2. Uncertainty in whether the remaining votes might impact the the results of the remaining votes cast may have vote, and what that means for who will have eventially gotten more votes. */35:T6c6,processResults = function(x, options= {}){ var y ={ state : x.state, biden : x.biden, trump : x.trump, lastUpdated : x.tsISO, votePropIn : x.precinctsRepProp } y.otherVotes = x.votes - (x.biden + x.trump) y.totalExpected = Math.round(x.votes / x.precinctsRepProp) y.threeWayExpected = y.totalExpected - y.otherVotes y.threeWayOutstanding = y.threeWayExpected - ( x.biden + x.trump ) y.fourWayOutstanding = y.totalExpected - x.votes y.twoWayShare = {biden: x.biden / (x.biden + x.trump), trump: x.trump / (x.biden + x.trump)} y.threeWayShare = {biden: x.biden / y.threeWayExpected, trump: x.trump / y.threeWayExpected, outstanding: y.threeWayOutstanding / y.threeWayExpected } y.fourWayShare = {biden: x.biden / y.totalExpected, trump: x.trump / y.totalExpected, other: y.otherVotes / y.totalExpected, outstanding: y.fourWayOutstanding / y.totalExpected } y.stacked = d3.stack().keys(['biden','outstanding','trump'])([y.threeWayShare]) y.gradientStacked = uncertaintyGradientBar( {totalExpected: y.totalExpected, votes:x.votes, biden:x.biden, trump: x.trump} , options.outstandingUncertantyPropRange ? options.outstandingUncertantyPropRange : [0.8,1.2], ) var nDots = options.nDots ? options.nDots : 200 y.voteDots = Array.from({length: nDots}, (d,i) => i < Math.round(y.threeWayShare.biden * nDots) ? 'biden' : i < ((y.threeWayShare.biden + y.threeWayShare.trump) * nDots) ? 'trump' : 'outstanding') // conditionally process estimates? (or separate function for that?) return y }36:T4b3,uncertaintyGradientBar = function(raw, outstandingUncertantyPropRange = [0.8, 1.2] ) { let exp_votes_remaining_min = outstandingUncertantyPropRange[0] * (raw.totalExpected - raw.votes) let exp_votes_remaining_max = outstandingUncertantyPropRange[1] * (raw.totalExpected - raw.votes) let exp_total_votes_min = raw.biden + raw.trump + exp_votes_remaining_min let exp_total_votes_max = raw.biden + raw.trump + exp_votes_remaining_max let vote_shares = [{biden: raw.biden / exp_total_votes_max , outstandingOuter1: (raw.biden / exp_total_votes_min) - (raw.biden / exp_total_votes_max), outstanding: exp_votes_remaining_min/exp_total_votes_min, outstandingOuter2: (raw.trump / exp_total_votes_min) - (raw.trump / exp_total_votes_max), trump: raw.trump/ exp_total_votes_max } ] let stacked = (d3.stack().keys(['biden','outstandingOuter1','outstanding','outstandingOuter2','trump'])(vote_shares)) var myColors = [colorScale('biden'),colorScale('biden'),colorScale('outstanding'), colorScale('outstanding'),colorScale('trump')] return(stacked.map((d,i) => ({offset:d[0][0], color:myColors[i]}))) } 37:T51e,// need to check if I'm still using these colors -- I don't think I was. processResultsWithEstimates = function(x) { var raw = processResults(x.counts[0]) var est = x.cur_estimates let maxCandidateEstimVotes = Math.max(est.biden[0]['upper_0.9'], est.trump[0]['upper_0.9']) var estGradient = ['biden','trump'] .map( function(cand) { return { who: cand, relativeWidth: est[cand][0]['upper_0.9'] / maxCandidateEstimVotes, gradientStops: [{offset:0, color: colorScale(cand), p: 1}, {offset: raw[cand] / est[cand][0]['upper_0.9'], color: colorScale(cand), p: 1}, {offset: raw[cand] / est[cand][0]['upper_0.9'], color: colorScale(cand), p: 0.9999 }, {offset: Math.max(raw[cand], est[cand][0]['lower_0.9']) / est[cand][0]['upper_0.9'], color: colorScale(cand), p: 0.9}, {offset: Math.max(raw[cand], est[cand][0]['lower_0.7']) / est[cand][0]['upper_0.9'], color: colorScale(cand), p: 0.7}, {offset: Math.max(raw[cand], est[cand][0]['pred']) / est[cand][0]['upper_0.9'], color: colorScale(cand), p: 0.5}, {offset: Math.max(raw[cand], est[cand][0]['upper_0.7']) / est[cand][0]['upper_0.9'], color: colorScale(cand), p: 0.3}, {offset:1, color: colorScale(cand), p: 0.1} ] } }) return {raw: raw, est: est, estGradient: estGradient } }38:Tbdd,/* This function returns a html div including a table with bars visualizing the vote shares. Styled roughly after CNN's display dd is row of data object from processResults() or processResultsWithEstimates().raw showOutstanding controls whether to add a row to the table for outstanding vote or leave it as a footnote of pct reporting. */ makeTable = function(dd, showOutstanding = true) { if (showOutstanding) { var x = [ {cand: 'Trump', pct: dd.threeWayShare.trump, votes: dd.trump, fill: "#FF4A43"}, {cand: 'Biden', pct: dd.threeWayShare.biden, votes: dd.biden, fill: "#1A6AFF"}, {cand: 'Left to Count', pct: dd.threeWayShare.outstanding, votes: dd.threeWayOutstanding, fill: "#444444"} ] } else { var x = [ {cand: 'Trump', pct: dd.twoWayShare.trump, votes: dd.trump, fill: "#FF4A43"}, {cand: 'Biden', pct: dd.twoWayShare.biden, votes: dd.biden, fill: "#1A6AFF"} ] } var makeHeader = function(selection){ selection.append('th').text('Candidate').attr('width', '40%') selection.append('th').text('%').style('text-align', 'right') selection.append('th').text('') selection.append('th').text('Votes') } var candName = function(selection, x){ selection.append('div').style('display','inline-block') .append('svg').attr('width','20').attr('height','20').attr('viewBox','0 0 20 20') .append('circle').attr('cx','50%').attr('cy','50%').attr('r', '4').attr('fill', x.fill) selection.append('div').style('display','inline-block') .text(x.cand) } var makeBar = function(selection, x){ selection.append('div').style('padding','3px') .append('svg').attr('width','75').attr('height','10').attr('viewBox','0 0 75 10').style('background-color', '#CCCCCC') .append('rect').attr('x','0').attr('y','0').attr('width', (x.pct * 100) + '%').attr('height','100%').attr('fill', x.fill) } const container = d3.create('div') //.style("overflow", "scroll") container.append("div").style("font-size", "19px").style("font-weight", "bold").text((dd.state + ' Results').toUpperCase()) const table = container.append("table").style("width","330px"); table.append("thead").append('tr') .call(makeHeader) table.append("tbody").selectAll('tr') .data(x) .enter() .append('tr') .each(function(d,i) { d3.select(this).append('td').call(candName, d) d3.select(this).append('td') .text((showOutstanding ? ('~' + d3.format(".0%")(d.pct)): d3.format(".1%")(d.pct)) ) d3.select(this).append('td').call(makeBar, d) d3.select(this).append('td') .text((d.cand == 'Left to Count' ? '~' : '') + (showOutstanding ? d3.format(".2s")(d.votes) : d3.format(',')(d.votes))) }) container.append("div").style("font-size", "12px") .html((showOutstanding ? '' : ('Est. ' + d3.format('.0%')(dd.votePropIn) + ' of votes in
' )) + "Last updated " + formatTimestamps(dd.lastUpdated) ) return container.node(); }39:T1155,/* this functions returns a html div including a single bar with other results below. // NEED TO ADD: option for 4 way split showing 'other votes' below as text. dd is row of data object from processResults() or processResultsWithEstimates().raw If a non-null gradientID is provided it will render the results as a gradient with a certaint level of uncertaintly around the outstanding vote number. This uncertainty level can be provided by passing {outstandingUncertantyPropRange : [minRatio,maxRatio]} into the processResults() call. */ makeSingleBar = function(dd, showOutstandingBallotUncertainty = false){ const container = d3.create('div').style('width',(params.xStart + params.barWidth) + 'px') //.style("overflow", "scroll") container.append("div").style("font-size", "19px").style("font-weight", "bold").text((dd.state + ' Results').toUpperCase()) container.append("div").style("font-size", "14px").style('width', (params.xStart + params.barWidth) + 'px').style('padding', '0px').style('text-align','center').style("font-weight", "bold").text("To win") var svg = container.append('svg').attr('width','500').attr('height',params.barHeight * 2).attr('viewBox','0 0 500 ' + params.barHeight * 2).style('margin-botton', 0).style('vertical-align','top') if (!showOutstandingBallotUncertainty) { svg.selectAll('rect') .data( dd.stacked ) .join('rect') .attr('height', params.barHeight) .attr('y', params.yStart) .attr('x', (d) => params.xStart + (params.barWidth * d[0][0]) ) .attr('width', (d) => params.barWidth * (d[0][1] - d[0][0])) .style('fill', (d) => colorScale(d.key)); } else { // if we want it to be a gradient for uncertainty var defs = svg.append("defs"); var curGradient = DOM.uid(); var gradient = defs.append("linearGradient") .attr('id', curGradient.id) var gradientStops = dd.gradientStacked gradient.selectAll('stop').data(gradientStops).enter().append("stop") .attr('class', 'start') //.attr("offset", d => d.offset) // this is now part of transition to final state .attr("offset", (d,i) => i <= 2 ? 0 : 1) .attr("stop-color", d => d.color) .attr("stop-opacity", 1); svg.append("rect") .attr('height', params.barHeight) .attr('y', params.yStart) .attr('x', params.xStart) .attr('width', params.barWidth) .attr("fill", "url("+ curGradient.href + ")") console.log(gradientStops) gradient.selectAll('stop').data(gradientStops).transition().duration(600) .attr("offset", d => d.offset) } svg.append('g').append('line').attr('x1',params.xStart + (params.barWidth/2)).attr('x2',params.xStart + (params.barWidth/2)) .attr('y1',0).attr('y2',params.yStart + params.barHeight ) .style('color','black').attr("stroke-width", 2).attr("stroke", "black") var annotations = [ {cand:'biden',border:'right',align:'left', color:colorScale('biden')}, {cand:'outstanding',border:'right',align:'center', color:'#999999'}, {cand:'trump',border:'left',align:'right', color:colorScale('trump')} ] var tableRow = container.append('table').style('width', params.barWidth + 'px') .style("margin-left",params.xStart + 'px').style("margin-top",0) .append('tr') annotations.forEach( function(d) { tableRow.append('td').style('padding', '0px 3px 0px 3px') .style('width', Math.round( dd.threeWayShare[d.cand] * 100 )+ '%') .style('text-align', d.align).style( "border-" + d.border , "1px dotted grey") .html( '' + d.cand.toUpperCase() + '
' + (showOutstandingBallotUncertainty ? '~': '') + d3.format('.0%')(dd.fourWayShare[d.cand]) + '
' + (showOutstandingBallotUncertainty & d.cand == 'outstanding' ? '~': '') + d3.format('.2s')(d.cand == 'outstanding' ? dd.fourWayOutstanding : dd[d.cand]) ) }) container.append("div").style("font-size", "12px").html("Other candidates: " + d3.format('.2s')(dd.otherVotes) + ' (~' + d3.format(dd.fourWayShare.other < 0.1 ? '.1%' : '.0%' )(dd.fourWayShare.other) + ' of total expected votes)') container.append("div").style("font-size", "12px").text("Last updated " + formatTimestamps(dd.lastUpdated)) return container.node(); } 3a:T1500,// control nDots in creating dd makeVoteDots = function(dd, leaveUncountedInBox = false) { var containerWidth = 320, SVGwidth = 225, SVGheight = 100 const container = d3.create('div') //.style("overflow", "scroll") .style('width',containerWidth + 'px') ; container.append("div").style("font-size", "19px").style("font-weight", "bold").text((dd.state + ' Results').toUpperCase()).style( "border-bottom" , "1px solid #DDDDDD") container.append("div").attr('id','annotate-outstanding').style("font-size", "14px") .style('width', containerWidth + 'px') .style('padding', '0px 0px 0px 0px') .style('text-align','center') .style('color', 'white') .html( '' + d3.format('.2s')(dd.fourWayOutstanding) + ' votes' + ' (' + d3.format('.0%')(dd.fourWayShare.outstanding) + ')
' + '' + 'OUTSTANDING ' ) container.append("div").attr('id','annotate-biden').style("font-size", "14px") .style('width', ((containerWidth - SVGwidth)/2 - 5) + 'px') .style('display', 'inline-block') .style('padding', '25px 0px 10px 2px') .style('text-align','left') .style('color', 'white') .html( '' + 'BIDEN
' + d3.format('.2s')(dd.biden) + ' votes' + '
(' + d3.format('.0%')(dd.fourWayShare.biden) + ')' + '' ) var svg = container.append('svg').attr('width',SVGwidth).attr('height',SVGheight).attr('viewBox','0 0 ' + SVGwidth + ' ' + SVGheight ).style('margin-botton', 0).style('vertical-align','top') container.append("div").attr('id','annotate-trump').style("font-size", "14px") .style('width', ((containerWidth - SVGwidth)/2 - 5 ) + 'px') .style('display', 'inline-block') .style('padding', '25px 2px 10px 0px') .style('text-align','right') .style('color', 'white') .html( '' + 'TRUMP
' + d3.format('.2s')(dd.trump) + ' votes' + '
(' + d3.format('.0%')(dd.fourWayShare.trump) + ')' + '' ) var velocityDecayValue = 0.3, forceManyBodyStrength = -.7, xForce = 0.035, yForce = 0.065 const center = { x: SVGwidth / 2, y: SVGheight / 2 }; let nodes = dd.voteDots.map(d => { return { radius: 2, voted: d, x: 0.25 * SVGwidth + Math.random() * 0.5 * SVGwidth, y: 0.05 * SVGheight + Math.random() * 0.2 * SVGheight, transDuration: 200 + Math.random() * 500 } }) if(leaveUncountedInBox) { svg.append('rect').attr('x', 0.25 * SVGwidth).attr('y', 0.05 * SVGheight).attr('width', 0.5 * SVGwidth).attr('height', 0.2 * SVGheight).attr('fill','none').attr('stroke-width',1).attr('stroke', colorScale('outstanding')) } // generate circles let bubbles = svg .selectAll('circle') .data(nodes, (d) => { return d; }) .enter() .append('circle') .attr('r', d => d.radius) .attr('cy', d => d.y) .attr('cx', d => d.x) .attr('fill','grey'); // nodes appear animation (circles size from zero to final size) bubbles .transition().duration(300).attr('r', (d) => { return d.radius; }); // define force layout let simulation = d3.forceSimulation() .velocityDecay(velocityDecayValue) .force('charge', d3.forceManyBody().strength(forceManyBodyStrength)) .on('tick', () => { bubbles.filter((d) => d.voted != (leaveUncountedInBox ? 'outstanding' : '')) .attr('cx', (d) => { return d.x; }) .attr('cy', (d) => { return d.y; }); }) .nodes(nodes) .stop(); // toggle layout functions function dropBubbles() { bubbles.filter((d) => d.voted != 'outstanding').transition().duration(d => d.transDuration) .attr('cy', d => {return d.y + 0.2*SVGheight}); } function updateColors() { bubbles.filter((d) => d.voted != 'outstanding').transition().duration(d => d.transDuration) .attr('fill', d => {return colorScale(d.voted)}); } let candPosition = {'biden':{x: 0.4, y: 0.6}, 'trump': {x: 0.6, y: 0.6}, 'outstanding':{x:0.5, y:0.45}} function splitBubbles() { simulation .force('x', d3.forceX().strength(xForce).x((d) => { return SVGwidth * candPosition[d.voted].x })) .force('y', d3.forceY().strength(yForce).y((d) => { return SVGheight * candPosition[d.voted].y })); simulation.alpha(2).restart(); } container.append("div").style("font-size", "12px").style( "border-top" , "1px solid #DDDDDD") .text("Last updated " + formatTimestamps(dd.lastUpdated)) container.append("div").style("font-size", "12px").html("Other candidates: " + d3.format('.2s')(dd.otherVotes) + ' votes (~' + d3.format('.0%')(dd.fourWayShare.other) + ' of total expected votes)') if(leaveUncountedInBox){ setTimeout(dropBubbles, 100)} setTimeout(updateColors, 100); setTimeout(splitBubbles, 300); // fade in text setTimeout( function() { ['biden','trump','outstanding'] .forEach( (d,i)=> d3.selectAll('#annotate-' + d).transition() .duration(700) .style('color', [colorScale('biden'), colorScale('trump'), '#777777'][i]) )}, 600) return container.node() }3b:Tb42,makeMultibarsWithEstimVoteGradient = function(dd) { var chartWidth = 300, barHeight = 22 var addCounts = function(selection, x) { selection.append("div").style("font-size", "11px").style('width', chartWidth + 'px') .style('color', colorScale(x.who)) .html( '

' + d3.format('.3s')(dd.raw[x.who]) + ' votes already counted' + '

' + d3.format('.3s')(dd.est[x.who][0]['lower_0.9']) + '-' + d3.format('.3s')(dd.est[x.who][0]['upper_0.9']) + ' expected

' ) } var makeBar = function(selection, x, i){ var svg = selection.append('div') .append('svg').attr('width',chartWidth + 'px').attr('height',barHeight+ 'px').attr('viewBox','0 0 ' + chartWidth + ' ' + barHeight) var curGradient = DOM.uid(); var defs = svg.append("defs") .append("linearGradient") .attr("id", curGradient.id) .selectAll('stop') .data(x.gradientStops) .enter().append("stop") .attr('class', 'start') .attr("offset", d => d.offset) .attr("stop-color", colorScale(x.who)) .attr("stop-opacity", d => (d.p < 1 ? (ccdf.includes('opacity') ? d.p : 1) * expectedVoteOpacity : 1)) var lineFunction = d3.line().x(d => d.x).y(d => d.y); var lineGraph = svg.append('path') .attr('d', lineFunction( multibarMakeGradientPathCoords( x.gradientStops, chartWidth * x.relativeWidth, barHeight, 0, 0, centerUnfinished ))) .attr("fill", (d,i) => "url(" + curGradient.href + ")"); svg.append('text').attr('x',5).attr('y',barHeight/2).attr('fill','white').text(x.who.toUpperCase()).style('font-weight', 'bold').style('dominant-baseline', 'central') // mutable gradientId++ } const container = d3.create('div') //.style("overflow", "scroll") container.append("div").style("font-size", "19px").style("font-weight", "bold").text((dd.raw.state + ' Results').toUpperCase()) container.append("div").style("font-size", "12px").style('padding-bottom','10px') .html( ('Est. ' + d3.format('.0%')(dd.raw.votePropIn) + ' of votes in. ' ) + "Last updated " + formatTimestamps(dd.raw.lastUpdated) ) var chart = container.append("div") ; chart.selectAll('div') .data(dd.estGradient) .enter() .append('div') .each(function(d,i) { if(i === 0){d3.select(this).call(addCounts, d)} d3.select(this).call(makeBar, d, i) if(i == 1){d3.select(this).call(addCounts, d)} }) return container.node(); } 3c:[{"id":"432e2d0d0f6f121e38653012e450ef15f01d5526a3fd1dfa32f16b1a6445db4dd4fbd46e79008da924ee455092a9806a8018984efce33a7cc4523e4fb7fad83c","href":"https://static.observableusercontent.com/files/432e2d0d0f6f121e38653012e450ef15f01d5526a3fd1dfa32f16b1a6445db4dd4fbd46e79008da924ee455092a9806a8018984efce33a7cc4523e4fb7fad83c","name":"network_election_results.png","type":"image/png","lastModified":1607579754213.873,"size":2180034},{"id":"b1b7e3e2507f610c55a0bb70a6bbc6e4f07c492415edfa1c3c997e354f2c1c0009b2b83618997deb918a961b37643b93a01bdd01c57ff2e31b415aa36f5463cb","href":"https://static.observableusercontent.com/files/b1b7e3e2507f610c55a0bb70a6bbc6e4f07c492415edfa1c3c997e354f2c1c0009b2b83618997deb918a961b37643b93a01bdd01c57ff2e31b415aa36f5463cb","name":"election2020_wapo_results.json","type":"application/json","lastModified":1607589933948.277,"size":56920},{"id":"2ed1e28a743448e9d967a15820b034161b5307452c082c682b0c0ab58a85d9605fb38ee7fa3118b506b4ca67b396747961d1e69149ea1b77242765881524e51d","href":"https://static.observableusercontent.com/files/2ed1e28a743448e9d967a15820b034161b5307452c082c682b0c0ab58a85d9605fb38ee7fa3118b506b4ca67b396747961d1e69149ea1b77242765881524e51d","name":"NBC_2018_PrecinctReporting.png","type":"image/png","lastModified":1608232434844.116,"size":271785}] 2f:{"title":"Visualizing Partial Election Results","cells":[{"id":0,"value":"# Visualizing Partial Election Results\n*December 2020* ","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1611,"value":"md `## What Election Night _Looked_ Like\nPennsylvania was a key state with a massive partisan split between absentee and in-person voting, slow counting of absentee ballots (due in part to rules prohibiting counting absentee ballots ahead of election day), and an initially unknown number of outstanding ballots (since ballots postmarked by election day were valid even if they didn't arrive until after election day). \n\nIf there was anywhere where it was important for news organizations to visualize the incompleteness of early results it was there. \n\nHere is what early PA results looked like on the websites of the major TV news networks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"network_early_PA_results_img.image()\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"html `

Clockwise from top center: NBC, PBS, CNN, ABC, Fox

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"md `## Visualizing Not-yet-counted Ballots\nAll of these visualizations focus more on showing the current tally than on showing the incompleteness of that tally. \n\nA very simple approach to visualize some of the uncertainty in outstanding ballots would be to have shown the expected volume of not-yet-counted ballots alongside the counted ballots.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1678,"value":"html `

At 11pm ET on election night instead of this:

${window.innerWidth < 500 ? '

Chart cut-off on your mobile device? Scroll it to the side to see it all

': ''}

${makeTable(processResults(results.results.pennsylvania[5]), false)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1689,"value":"html `

It would look something like this:

${makeTable(processResults(results.results.pennsylvania[5]))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1744,"value":"html `

Another option is inspired by how the partial electoral college results are often displayed:

${makeSingleBar(processResults(results.results.pennsylvania[5]))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1770,"value":"html `

This is another approach using dots rather than length and area to represent proportions of counted and uncounted ballots.

${makeVoteDots(processResults(results.results.pennsylvania[5],{nDots: 300}))}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1761,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2233,"value":"md `## Is showing outstanding ballots enough?` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"html `

When there are many outstanding ballots it is not too hard to communicate the need for patience as votes are counted. But once most votes have been counted I assume most of these approaches might fall short in communicating an uncertain outcome.

${makeSingleBar(processResults(results.results.wisconsin[15]), true)}

${makeSingleBar(processResults(results.results.georgia[7]), true)}

${makeSingleBar(processResults(results.results.pennsylvania[10]), true)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"html `

In these cases it could be useful to visualize outputs of the typically obscured models networks rely on to decide when to call states for one candidate or another. While networks have legitimate concerns about visualizing expected outcomes before they are very confident in what the results will be, they could choose to actively attempt to visualize the uncertainty about the outcome. That could look something like this:

${makeMultibarsWithEstimVoteGradient(processResultsWithEstimates(results.estimates.pennsylvania[1]))}

The Washington Post, and (in a handful of states) the New York Times did visualize their models and the associated uncertainty. But the New York times, and some might argue the Washington post as well, focused on visualizing who they thought was likely to win the state, rather than focusing on visualizing the need to have patience as results continued to come in.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2709,"value":"md `## Election-Night Data Journalism\n\nThe task of data visualization is often to communicate what is already known. In the case of showing partial election results it is more important to effectively communicate the fact that results were not yet known - but would be soon. \n\nVisualizing uncertainty often involves the challenging task of showing how likely different outcomes might be. In this case there's mainly a different -- and much easier -- task, which is visualizing the existence of uncounted ballots that must be counted before results are known. \n\nThere are numerous data challenges, and visualization challenges, especially in effectively mapping partial results. It's unclear how much it could have helped in this case to have more effective visualizations, but it is clear that there is much more to be done to counter the false certitude that comes with the partial-result reporting that is the current norm.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1888,"value":"md `## Visualization Explorers\nUsing Washington Post timeseries data for a number of key states we can explore how these different visualizations might have looked at different points in time. Feel free to explore!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1895,"value":"viewof explorer1State = {\n explorers1Reset\n return select({title: \"State\", options: results.states, value: 'pennsylvania'})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1897,"value":"viewof explorer1TimeSelect = \n{ \n explorers1Reset // to reset the slider on click of reset button\n return slider(\n {title: \"Results as of:\", \n min: 1, \n max: results.results[explorer1State].length - 1,\n value: 5,\n step: 1,\n format: v => `As of ${formatTimestamps(results.results[explorer1State][v].tsISO)}`\n})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1901,"value":"viewof explorers1Reset = {\n return html `` \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1940,"value":"html`\n

${makeTable(processResults(results.results[explorer1State][explorer1TimeSelect]), false)}

${makeTable(processResults(results.results[explorer1State][explorer1TimeSelect]))}

${makeVoteDots(processResults(results.results[explorer1State][explorer1TimeSelect],{nDots: 300}))}

${makeSingleBar(processResults(results.results[explorer1State][explorer1TimeSelect]))}

${makeSingleBar(processResults(results.results[explorer1State][explorer1TimeSelect]),true)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1921,"value":"html`Compared to the standard approach of:

${makeTable(processResults(results.results[explorer1State][explorer1TimeSelect]),false)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1938,"value":"md `## Washington Post Vote Estimate Model Explorer\nWhile the timeseries data from the Washington Post doesn't include their model estimates at different points, the Internet Archive did manage to get a number of snapshots for a handful of at a handful of points in time. Feel lets you explore that data below -- including by changing a number of the visual elements of that chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1979,"value":"viewof explorer2State = {\n explorers2Reset\n return select({title: \"State\", options: Object.keys(results.estimates), value: 'pennsylvania'})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1990,"value":"viewof explorer2TimeSelect = \n{ \n explorers2Reset // to reset the slider on click of reset button\n return slider(\n {title: \"Results as of:\", \n min: 1, \n max: results.estimates[explorer2State].length -1,\n value: 0,\n step: 1,\n format: v => `As of ${formatTimestamps(results.estimates[explorer2State][v].counts[0].tsISO)}`\n})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1986,"value":"viewof explorers2Reset = {\n return html `` \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2017,"value":"html `

${makeMultibarsWithEstimVoteGradient(processResultsWithEstimates(results.estimates[explorer2State][explorer2TimeSelect]))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"md `### Visual Controls for Washington Post Estimated Remaining Vote`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"viewof estimSizeReduction = {\n resetMultiBarGradientDefaults\nreturn slider({\n min: 0, \n max: 1, \n step: 0.05, \n format: \" .0%\",\n value: 0.75,\n title: \"Baseline size for estimated remaining\"\n})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"viewof expectedVoteOpacity = { \n resetMultiBarGradientDefaults\n return slider({\n min: 0, \n max: 1, \n step: 0.05, \n format: \" .0%\",\n value: 0.3,\n title: \"Baseline opacity for expected remaining vote\"\n})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"viewof centerUnfinished = {\n resetMultiBarGradientDefaults\n return checkbox({\n options: [{ value: false, label: \"\" }],\n value: false,\n title:\"Center the estimated remaining vote\"\n})}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"viewof ccdf = {\n resetMultiBarGradientDefaults\n return checkbox({\n options: ['size','opacity'],\n value: ['size','opacity'],\n title:\"Reduce ___ as function of model probabilities\"\n})}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"viewof resetMultiBarGradientDefaults = {\n return html `` \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2124,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2144,"value":"md `### Pre-Process Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md `### Vizualition Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"multibarMakeGradientPathCoords = function(x, barWidth, barHeight, yStart, xStart) {\n function scaleP(p) { \n return (p == 1 ? 1 : (estimSizeReduction * (ccdf.includes('size') ? p : 1)) )\n }\n return x.map( function(d, i) {\n return {x : xStart + (d.offset * barWidth),\n y : yStart + (centerUnfinished ? ( (1 - scaleP(d.p)) * barHeight / 2 ) : ( (1 - scaleP(d.p)) * barHeight ) )\n } \n }).concat(\n x.slice(0).reverse().map( function(d, i) {\n return {x : xStart + (d.offset * barWidth),\n y : yStart + (centerUnfinished ? ( barHeight - ((1 - scaleP(d.p)) * barHeight / 2)) : barHeight ) \n } \n }) \n )\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2115,"value":"md `### Loading Data and Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"results = FileAttachment(\"election2020_wapo_results.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"network_early_PA_results_img = FileAttachment(\"network_election_results.png\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"colorScale = d3.scaleOrdinal()\n .domain([\"biden\", \"trump\", \"outstanding\"])\n .range([\"#1A6AFF\", \"#FF4A43\", '#cccccc']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"params = ({xStart:3, yStart: 8, barWidth:290, barHeight: 24})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":" formatTimestamps = function(x, length='long') { \n if (length == 'short') { \n return new Date(x).toLocaleString(undefined, {\n hour: '2-digit', minute: '2-digit', timeZoneName: 'short', weekday: 'long'\n })\n } else if (length == 'long'){ \n return new Date(x).toLocaleString(undefined, {\n weekday: 'long', month: 'short', day: 'numeric',year: 'numeric', \n hour: '2-digit', minute: '2-digit', timeZoneName: 'short'\n })\n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"import {select, checkbox, color, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}