32:T7c1,md`They are charting two totally different things. Ⓐ shows Clinton and Trump’s chances of winning the election, according to some model, here FiveThirtyEight’s. (The model is not specified by or encoded in the chart; it is outside of it.) Ⓑ shows the number of electoral votes each candidate ultimately received. Ⓐ is a forecast and Ⓑ is an outcome — but Ⓐ is not even quite a forecast of Ⓑ. It doesn’t tell you how many votes a candidate is expected to get; only the chance that the number of votes is above some threshold, namely, ${voteThreshold}. They seem to contradict each other, but it’s not a head-on collision. Over the last four years we have all talked a lot about how, if something given a ${pct( trumpProb )} chance to happen does happen, it does not _necessarily_ mean the forecast was wrong. But I am interested in something slightly different: even if the forecast were directionally correct (i.e. had given the winner more than a 50% chance to win), the two charts would look very different. Ⓐ would almost always be much more lopsided. That’s inherent in what they represent. Nobody seems to be using this stacked-bars-out-of-100% format for forecasts this year, which is probably for the best. They are going out of their way to communicate uncertainty and temper their predictions through [elaborate](https://fivethirtyeight.com/features/how-we-designed-the-look-of-our-2020-forecast/) [displays](https://projects.fivethirtyeight.com/2020-election-forecast/) of different [possible](https://projects.economist.com/us-2020-forecast/president) [worlds](https://www.nytimes.com/interactive/2020/us/elections/electoral-college-battleground-states.html). Still, the two bars are each sensible enough on their own, and rather than abandon them entirely, I want to see how they relate to each other. How can we draw, in one coherent space, both Ⓐ and Ⓑ? Click and drag below to set the probabilities of different electoral outcomes. `33:Ta6a,viewof pmf = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "14px sans-serif"); let probs = probableOutcomes.map((d, i, arr) => ({ votes: d, count: initialCounts.get(d) || 0 })); function yAxis(g) { const countToProb = d3.scaleLinear( [0, d3.max(probs, d => d.count)], [0, d3.max(normalizeProbs(probs), d => d.prob)] ); const probY = y.copy().domain(y.domain().map(countToProb)); return g .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(probY) .ticks(5) .tickFormat(d3.format(".1%")) ) .call(g => g.select(".domain").remove()); } const tick = svg .append("g") .selectAll("path.prob") .data(probs) .join("path") .attr("stroke", "#999") .attr("fill", "#999") .attr("pointer-events", "none"); svg.append("g").call(xAxis); const yAxisG = svg.append("g").call(yAxis); svg .append("text") .attr("font-size", 10) .attr("x", margin.left + 3) .attr("y", margin.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Probability of Clinton getting this many votes"); let last = 0; const capture = svg .append("rect") .attr("width", width) .attr("height", height) .attr("class", "capture") .style("pointer-events", "all") .style("visibility", "hidden") .style("cursor", "grab") .call( d3 .drag() .on("start", function(event, d) { d3.select(event.sourceEvent.target).style("cursor", "grabbing"); last = Math.round(xContinuous.invert(event.x)); drag(event, d); }) .on("drag", drag) .on("end", function(event, d) { d3.select(event.sourceEvent.target).style("cursor", "grab"); drag(event, d); }) ); svg.on("mouseleave", () => capture.style("cursor", "grab")); render(); function drag(event, d) { const x0 = Math.round(xContinuous.invert(event.x)); const y0 = Math.max(y.invert(event.y), 0); const obj = probs.filter(({ votes }) => { if (x0 > last) return votes <= x0 && votes >= last; return votes >= x0 && votes <= last; }); last = x0; obj.forEach(d => (d.count = y0)); render(); } function render() { tick.attr( "d", ({ votes, count }) => `M ${x(votes)} ${y(count)} h ${x.bandwidth()} V ${y( 0 )} h ${-x.bandwidth()} Z` ); yAxisG.call(yAxis); svg.property("value", normalizeProbs(probs)).dispatch("input"); } return svg.node(); }34:Ta3f,cdfChart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "14px sans-serif") .style("cursor", "default"); let probs = probableOutcomes.map(d => ({ votes: d, value: cdfMap.get(d) })); const tick = svg .append("g") .selectAll("path.prob") .data(probs) .join("path") .attr("stroke", "#999") .attr("fill", "#999") .attr( "d", ({ votes, value }) => `M ${x(votes)} ${y2(value)} h ${x.bandwidth()} V ${y2( 0 )} h ${-x.bandwidth()} Z` ); svg.append("g").call(xAxis); svg.append("g").call(y2Axis); svg .append("path") .attr( "d", `M ${x(voteThreshold) + x.bandwidth() / 2 - 0.5} ${y2(0)} V ${y2( 1 - winProb )}` ) .attr("stroke", "#ccc") .attr("stroke-width", x.bandwidth()) .attr("fill", "none"); svg .append("path") .attr( "d", `M ${x(voteThreshold)} ${y2(1 - winProb)} H ${width - margin.right}` ) .attr("stroke", "#ccc"); svg .append("path") .attr( "d", `M ${x(voteThreshold)} ${y2(loseProb)} H ${width - margin.right}` ) .attr("stroke", "#ccc"); svg .append("path") .attr( "transform", `translate(${x(voteThreshold) + x.bandwidth() / 2 - 0.5}, ${height - margin.bottom})` ) .attr("d", `M 0 0 L 4 5 H -4 Z`); svg .append("text") .attr( "transform", `translate(${x(voteThreshold) + x.bandwidth() / 2 - 0.5}, ${height - margin.bottom + 9})` ) .attr("font-weight", "bold") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("dy", "0.71em") .text("270"); svg .append("g") .attr( "transform", `translate(${width - margin.right - 10}, ${margin.top + 30}) rotate(-15)` ) .append(() => getLabel("A", 20)); svg .append("rect") .attr("x", width - margin.right + 5) .attr("y", margin.top) .attr("height", y2(1 - winProb) - y2(1)) .attr("width", 10) .attr("fill", blue); svg .append("rect") .attr("x", width - margin.right + 5) .attr("y", y2(loseProb)) .attr("height", y2(0) - y2(loseProb)) .attr("width", 10) .attr("fill", red); svg .append("text") .attr("x", width - margin.right + 20) .attr("y", margin.top) .attr("dy", "0.7em") .text(pct(winProb)) .attr("fill", blue); svg .append("text") .attr("x", width - margin.right + 20) .attr("y", height - margin.bottom) .text(pct(loseProb)) .attr("fill", red); return svg.node(); }35:T8a1,viewof simulatedOutcome = { resim; const h = 50; const y = d3.scaleLinear([0, 1], [0, h]); const margin = 15; const padding = switchDomain === "all" ? 0 : 1; const outcome = drawOutcome(); const highlights = [ [clintonVotes, "Actual 2016"], [voteThreshold, "Need 270"] ]; const node = svg``; node.value = outcome; return node; }36:T70e,md`But I have put an asterisk on the latter. I don’t think we have managed to recreate Ⓑ, really; nor could we. We could not simulate it. It may _represent_ a sample from an imagined distribution, but we cannot see that one. And for the distribution we can see, Ⓑ is not really a sample from it. I guess the gap between Ⓑ and Ⓑ* shows us something like our [model error](https://www.johndcook.com/blog/2011/11/01/floating-point-worries/). You could fiddle with the above until they both matched the two actual historical bar charts that Rich tweeted in 2016 — but there would be infinite ways to do it. There are many possible distributions that satisfy the constraint that cumulatively ${pct( clintonProb )} is above ${voteThreshold}. And ending up with ${clintonVotes} might have a different probability in each. I like Rich’s complaint because it seems to attack a common and oft-unchallenged premise of this line of work. Typically, in data visualization, we say that a kind of chart encodes information by the positions, sizes, colors, and so on of its marks (its bars, its dots, its lines). But in 2016, those election forecast bar charts, even if correctly drawn, were not really communicating what they formally encoded. In that case, the format itself encoded spurious information because it was interpreted as a representation of something else. This is my (somewhat hasty) attempt to see what it might take to “rescue” those forms, to embed them in a context where they mean the right thing. As [Walter Ong wrote](https://twitter.com/tophtucker/status/1033434272181506048), knowledge is not object-like; labels, legends, and marks cannot simply hand data to the reader. But sometimes the reader can use those aids, with context, to rebuild the knowledge in their own self.`37:[] 30:{"title":"What’s the connection between these two election bar charts?","cells":[{"id":67,"value":"md`# What’s the connection between these two election bar charts?\nThis was probably my favorite tweet of November 10, 2016:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"tweet(\"796764148440961024\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`Rich and his correspondents (Nadja Popovich, Alberto Cairo, Lisa Charlotte Rost, et al.) were talking about these two bar charts — the first, more commonly seen before the election; the latter, after.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"bar(clintonProb, trumpProb, 1, d3.format(\".1%\"), \"A\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"bar(clintonVotes, trumpVotes, numberOfElectors, d => d, \"B\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"md`We are not interested in the probability of getting _exactly_, say, ${trumpVotes} votes, but rather of getting _more than_ ${voteThreshold}. So we add up the individual probabilities to get cumulative ones — the probability of getting anywhere up to a certain level:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"md`We draw a line up from ${voteThreshold} until it hits this curve, then go straight across to find the win probability. That lets us build our first bar chart, Ⓐ. (There may be a gap between blue and red to account for a tie.) \n\nTurning our attention to Ⓑ, we draw a miniature bar chart for each possible value along the ${tex`x`}-axis. Each represents a possible outcome. If the probability distribution we’ve drawn is correct, then the outcome will be drawn from it such that, in the long run, each one happens as often as you specified when you drew it. Here we’ve sampled from it just once:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"md`Click the button to try again and again. On average, it should come out to the mean of the distribution you drew up above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"viewof resim = html`