32:T525,md`--- When some of us at Observable ([Kerry](https://observablehq.com/@observablehq/why-use-a-radial-data-visualization), [Ian](https://observablehq.com/@codingwithfire/livecoding-election-night-visualizations)) set out to make some election graphics in October, I imagined that counting the votes might drag on a while, and wanted to make something about interpreting incompleteness. I really didn’t want to try anything like Nate Silver–style _forecasting_, which felt way too hard and fraught! Nor could I do anything like the Upshot needle, which cleverly stitches together incomplete known partial results with a forecast about what remains unknown. I didn’t have different data than anyone else, and I wasn’t immersed in a newsroom of experts who’d been watching the races for years. All I could do was go basic. If a candidate is winning 55–45 with 70% of the votes counted, what can we say for sure? We cannot speak in terms of probability, of the _chances_ that each candidate has, because we have no idea which possibilities are likely. But we can do arithmetic: what would add up to a win? And thus, what percentage of the remaining vote would the trailing candidate need to win the race? I spent a lot of time writing a long notebook trying to answer that very basic arithmetic question. `33:T8dc,md`The charts throughout the notebook look very different, but every one of them has the same x-axis and y-axis: x is always the share of votes won so far by one candidate, and y is always the percentage of votes counted. That x–y “space” is the subject of the notebook, considered over and over from different points of view. In the process of answering that basic arithmetic question, we find that, for certain parts of that x–y space, the trailing candidate cannot win. If the point representing the current state of the election works its way down from the top into that region, then the percentage the candidate would need to win is over 100%; it’s impossible. It’s a fun thing to discover, because I hadn’t meant to draw it. It’s not data we’re plotting; it’s not contingent on the vicissitudes of history; it’s a necessary property of the space itself, of the terrain that all elections traverse. It’s just the definition of winning, drawn onto the screen. I don’t think I’d have gone down this path if I hadn’t been working in code. The cases where the percentage needed was above 100% or below 0% were initially edge cases I had to handle, and they ended up being the whole point. Coding enforces some (_some!_) coherence; interaction enforces some (_some!_) generality. This is especially satisfying because, despite feeling obvious or even trivial, I don’t think I’d seen it before. I’d seen plenty of elections end, but I hadn’t seen the shape of the finish line. I’d seen people win, but I hadn’t seen the shape of the endzone. It has a pleasant swoop to it. It converges from each side, halfway down, meeting in the middle. The path of every election falls into one of the two regions. It feels like a funnel; it feels like inevitability. Scylla and Charybdis closing in to a point, an inescapable judgment. So I published the notebook and my friend Josh Horowitz read it and immediately saw something I hadn’t. Here I am, going on about how basic it was, and how I looked at it from every angle, and how pleased with myself I am, and I clearly hadn’t understood it at all. I’d been overcomplicating something even more basic. And he showed this to me with a comically literal change in perspective: `34:T562,md`When you make the square a triangle, those pleasant swooping curves turn into straight lines! And somehow this feels more fundamental. But Josh had to spell it out for me: From this perspective, the x-axis isn’t the percentage of votes won by each candidate; it’s the vote margin in absolute terms. It’s the number of votes one candidate won, minus the number the other won. As a triangle, it starts at a point: no votes counted, no margin. Each vote nudges the line one unit left or right, and one unit down. It’s a more human-centered x–y space: the individual, not the normalized aggregate. And it’s a lot easier to think in these terms than in percentage terms. I had said some whole equation, ${tex`z \gt \frac{xy - 0.5}{y - 1}`}. Josh said simply: _you win when your margin is greater than the number of votes left to count_. Duh! On election night and on the following days, I made a bunch of vote cone charts. An ounce of real-world exposure is worth more than a ton of preparation, or whatever the saying is, and I began responding to actual questions instead of imagined ones, using data ripped from the New York Times. It became clear that the multicolored contours in the background weren’t really helping; the satisfying part was just seeing the endzone. (The contours survive as white gridlines in the animated version at the top of this page.)` 35:T470,md`One thing about the triangles is that they immediately felt more boring: the line an election takes is a lot calmer, especially at the top. Whereas the squares, by putting everything in percentages, grotesquely magnify early swings from the point of the triangle to the whole width of the chart. This has one upside: although it feels like a distortion, it’s a distortion that matches our emotional experience of following the election. From the earliest results, we mostly hear and see and think in terms of those percentages. So we can recognize our own emotional rollercoaster in the shape of those curves. I tried the triangles in a cartogram. As things slowed down I tried a cartogram of how fast states were counting. As we all tried to figure out if votes counted later were systematically skewed due to different methods, I tried a cartogram of the correlations between when votes were counted and who they were for. It could be interesting to look at the concavity or convexity of each state’s path through the cone and combine that with information on whether they counted mail ballots before or after in-person ones.`36:Te61,md`--- There are many important caveats to the general vote cone concept. - It assumes a “[first past the post](https://en.wikipedia.org/wiki/First-past-the-post_voting)” election. I don’t know how I’d try to adapt it to ranked choice voting. - It assumes a good estimate of the total number of votes to count. In practice, the percentage of votes counted sometimes _drops_, if the estimate of votes remaining increases; look above at how the Arizona line backtracks. I’d like to try fuzzy endzones accounting for a range of possible total votes. - It assumes two candidates. One on the left, one on the right; the x-axis goes from a 0–100% to a 100–0% split between them. If candidates just need a plurality to win, you can divide by the sum of the top two. But if failing to win a majority leads to a runoff, then the endzones don’t apply. I had been trying at the beginning to stay out of the game of forecasting. But considering those caveats, it seems we don’t have such a pristine or conservative arithmetic visualization of real elections, the real endzones, the true definition of winning, after all. In 1961, Frank Drake sketched out the “[Drake equation](https://en.wikipedia.org/wiki/Drake_equation)”. You might say it estimates the number of alien civilizations we might be able to communicate with — but it doesn’t, really. The “equation” is a just bunch of different ineffable considerations multiplied together. In practice, it doesn’t estimate anything; it stimulates conversations. SETI astronomer Jill Tarter has a great line: that it’s “a great way to organize our ignorance.” I often console myself with that line when thinking about the failures of a visualization. They can’t actually answer hard questions, and they don’t bypass the elaborate bureaucractic mechanisms of fact-finding, but they can organize our ignorance. They’re part therapy and, what’s worse, part entertainment. By far the most trenchant issue for me was raised by a reader who wrote, in a now-deleted tweet: “This feeds into the hysteria that we need to know who wins on Nov 3. We don’t. Just wait til all the ballots are counted to announce things. ‘What the candidate would need to win’ is not an alterable state. Make all the (extremely cool) charts you want but it has no meaning.” It’s a good point. This may feel like a race, but it is a funny kind of race; it is as if a series of runs were scored over nine innings in total darkness, and then forensic umpires examined and reported where the balls landed after the game is over to count the runs. What do vote cones tell us? It doesn’t end up telling us about the concerns of the electorate, trends in the country, injustices uncovered. It mostly tells us how fast different ballots were counted. That can be connected to more meaningful correlates, but the story it tells is mostly just electoral logistics. It doesn’t even necessarily help you see “which way things are heading” while counting is underway, because there’s no guarantee that the line has any inertia: there’s not _necessarily_ anything keeping it going the same way it’s been going. In some ways just seeing the current tally as a single number is more informative, because at least it’s not so loaded with spurious noise. But maybe this sort of visualization serves as some kind of giant checksum on the whole fragmented process. The machine is legitimized by seeing the gears turn. The media coverage is proof of work. Using elections as entertainment may be bad, but black-box elections that emitted a final result without showing its partial byproducts would be worse.`37:T4bb,md`Danyel [continued](https://twitter.com/FisherDanyel/status/1346713587411083270) in the thread: >Let’s say you reached into your junk drawer and were pulling out the piles of mismatched buttons, and happened to tally by material. Would you describe plastic as “winning so far” before metal “caught up”? Or would you just note that you had a lot of buttons in your drawer? The horserace metaphors — “plastic got a lot of momentum with that last cache” — are not only deceptive, but they contribute to the “stop the count” arguments; and “metal buttons were winning before suddenly a lot of plastic showed up”. Philippe Rivière replied with a link to this notebook, and Danyel [added](https://twitter.com/FisherDanyel/status/1346919973977948161): “I approve of any given horizontal slice of those images — ‘This is where we are now’ — and disapprove of the full image.” So I tried drawing dots instead, which at least doesn’t imply any “slope”, as if it’s incongruous to get a big batch of votes jumping in one direction, or as if there’s any momentum in the line. And I drew horizontal lines representing, at each step, the range of possible final outcomes.`38:[{"id":"85bcce7ecfe39b7f981f1eb312c46c5ee46943214d78e4bc409e57078571a85684e268f195610f761101739fedff6386c3c3711291c5f1406833112840be10fb","href":"https://static.observableusercontent.com/files/85bcce7ecfe39b7f981f1eb312c46c5ee46943214d78e4bc409e57078571a85684e268f195610f761101739fedff6386c3c3711291c5f1406833112840be10fb","name":"moleskine-election-sketches.png","type":"image/png","lastModified":1607576225609.983,"size":971955}] 2f:{"title":"Reflecting on “Vote Cones”","cells":[{"id":135,"value":"md`# Reflecting on “Vote Cones”\n\nVote cones show the progress of counting election results in two-candidate first-past-the-post elections, assuming a decent estimate of the total number of votes to be counted. They’re vertical line charts of vote share (or absolute vote margin) against percentage of votes counted, with the addition that they draw the threshold above which a candidate will necessarily win — the “endzones” for each candidate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"html`For example, here’s one for the 2020 presidential election in

${viewof state_id}

:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof shape","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`Most states are called long before they hit the endzone, which is a conservative interpretation of the point of no return (depending on the reliability of estimates of how many votes remain to be counted). Look at how early the race was called in Massachusetts, and how late in Georgia. In Florida it was called right on the boundary of the endzone, even though it wasn’t all that close in the end.\n\nThe space of possible vote shares forms a square; the space of possible vote margins forms a triangle (because the more votes that are counted, the wider the possible margins). The data and even the particular shades of red and blue are ripped from the New York Times, and the code is in this notebook:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"previews([\n {\n path: \"@tophtucker/vote-cone-transitions\",\n thumbnail:\n \"6e5ddf65a6a23ce32257fa3ea29fa14ca8bb2f4a82131fe34513cd1bb0539e36\",\n title: \"Vote cone transitions\",\n date: \"2020-12-04\",\n author: \"Toph Tucker\"\n }\n])\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"md`I initially only saw the square form. The triangle is kind of a long story…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"previews([\n {\n path: \"@observablehq/visualizing-partial-election-results\",\n thumbnail:\n \"998f836e60d7c1ab43ddae0e4aca901aa90e3a25c03576614b1e1fa26e57d86d\",\n title:\n \"As votes come in, what would it take for the trailing candidate to win?\",\n date: \"2020-10-27\",\n author: \"Observable\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"tweet(\"1321269779043250176\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"previews([\n {\n path: \"@tophtucker/election-cone-iowa-senate-2016\",\n thumbnail:\n \"ee622c3845e51693725e1a78b4dc2a704350d49aba2f5968b8744c4648fd5297\",\n title: \"Iowa Senate 2016\",\n date: \"2020-10-29\",\n author: \"Toph Tucker\"\n },\n {\n path: \"@tophtucker/2020-election-cone-with-colored-contours\",\n thumbnail:\n \"fa62389aebe4dbd60c13f91dc30b32aaaf98c6fc5b17509198f7e644090025e6\",\n title: \"President 2020 with colored contours\",\n date: \"2020-11-03\",\n author: \"Toph Tucker\"\n },\n {\n path: \"@tophtucker/2020-election-cone-with-labeled-contours\",\n thumbnail:\n \"025333d9b914692688646fa25bd16515ff9c20dcb8da23a6388154cc917b7b56\",\n title: \"President 2020 with labeled contours\",\n date: \"2020-11-05\",\n author: \"Toph Tucker\"\n },\n {\n path: \"@tophtucker/vote-cones-in-vega-lite\",\n thumbnail:\n \"fc0a05c0e1ca3da39b32cff33e28cb869f789dad3572bb4bd5662bc8a8e344f7\",\n title: \"Vote cones in Vega-Lite\",\n date: \"2020-11-19\",\n author: \"Toph Tucker\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"previews([\n {\n path: \"@tophtucker/election-2020-vote-margin-cartogram\",\n thumbnail:\n \"61d1a3556e41ce65eccc046f10d820f3cd10e9a8d244169c8be758907c32942f\",\n title: \"2020 vote margin cartogram\",\n date: \"2020-11-04\",\n author: \"Toph Tucker\"\n },\n {\n path: \"@tophtucker/election-2020-vote-count-speed-cartogram\",\n thumbnail:\n \"6b9328e766d8ff6465f2aae89f11e5a5f5c06ef1b162f05ce7adc9150b8c05fd\",\n title: \"Election 2020 vote count speed cartogram\",\n date: \"2020-11-08\",\n author: \"Toph Tucker\"\n },\n {\n path: \"@tophtucker/election-2020-vote-time-correlation-cartogram\",\n thumbnail:\n \"f53efe7a27237703cf2e3ce0d9b031eed432490d689273f0337db1881981811c\",\n title: \"Election 2020 vote–time correlation cartogram\",\n date: \"2020-11-09\",\n author: \"Toph Tucker\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`I used the vote cone’s x–y space for a heatmap of how often incomplete results in each part turned out to be correct, thereby recapturing a sort of empirical cone.`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"previews([\n {\n path:\n \"@tophtucker/election-2020-how-reliable-are-different-results-at-differ\",\n thumbnail:\n \"c9a7af4fbdbf0c2dae6e9b7cccad984f114dff0ac36b17ce9a7f253d7964efb0\",\n title:\n \"Election 2020: how reliable are different results at different stages?\",\n date: \"2020-11-10\",\n author: \"Toph Tucker\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`And I tried a basic calculator in response to someone’s tweet. I was terribly excited that a high-follower account happened to be asking for something like what I’d been working on, and I rushed to reply, but I got the math horribly wrong and someone had to correct me. Hazards of computational discourse!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"previews([\n {\n path:\n \"@tophtucker/calculate-the-percentage-of-remaining-vote-needed-to-overc\",\n thumbnail:\n \"ccd17bd3ec6674c2c95bdd63245a6a485db5877ac8558f75801e991d2021444d\",\n title:\n \"Calculate the percentage of remaining vote needed to overcome given absolute margin\",\n date: \"2020-11-04\",\n author: \"Toph Tucker\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`As some very close states got very close to 100% counted, it got very hard to see what was going on in the tip of the cone; I tried a zoom slider, and Mark Whiting independently tried [the much cleverer approach](https://observablehq.com/@markwhiting/votes-over-time?collection=@observablehq/elections) of a “symlog” scale (and multiple animated lines in the same space).\n\nIn the future I’d like to try to combine something like these with statistics about the areas where votes have not yet been counted, such that the eye could see for itself some of the inputs to The Needle.\n\nFinally, here’s another election notebook I made this November that has nothing to do with vote cones.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"previews([\n {\n path:\n \"@tophtucker/whats-the-connection-between-these-two-election-bar-charts\",\n thumbnail:\n \"a7d0d2e4eb595d5690b6a539f5eb5411d16a612c59a8cc2360c1928107453ca7\",\n title: \"What’s the connection between these two election bar charts?\",\n date: \"2020-11-03\",\n author: \"Toph Tucker\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"md`We typically say that the marks within a chart form encode the data — but the choice of form itself can also communicate, and mislead. So that notebook is about the confusion in 2016 between bar charts of win probabilities and bar charts of electoral outcomes. (The latter encodes an outcome along the x-axis of a cumulative probability distribution, and the former encodes the y-axis value of that distribution when it passes the 270-elector threshold.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`That’s all for now! Thanks for reading. I’ll update my [collection](https://observablehq.com/collection/@tophtucker/election) if I do more. How’ve you been? Say hi to the kids and send my best to you-know-who. Take care,\n\nToph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`---\n## Discussion update\n\nBret Victor [replied](https://twitter.com/worrydream/status/1338922190813626368) that “the time dimension is irrelevant to the outcome because it doesn’t represent any kind of causality. Time is interesting when earlier events affect later events.” (So, these vote cones are kind of like [meaningless timeseries charts](https://twitter.com/tophtucker/status/1339104130971930624) of a computer adding up an array over the course of 20 milliseconds.) After the Georgia runoff election, Steve Haroz and Danyel Fisher had a [similar critique](https://twitter.com/FisherDanyel/status/1346713586429620225) of some New York Times charts:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"tweet(\"1346713586429620225\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"previews([\n {\n path: \"@tophtucker/vote-cone-uninterpolated\",\n thumbnail:\n \"43c9413a74d7efa53a6ebcb9b3b25cff6837fe74f44c33d91367336856ca4fe2\",\n title: \"Vote Cone — Uninterpolated\",\n date: \"2021-01-07\",\n author: \"Toph Tucker\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`I love seeing those horizontal lines make up a narrowing cone of possibilities for each state! It feels like “the cone” that I keep talking about, but I hadn’t actually really been showing it yet. The lines are very conservative; they can never get wider, only narrower. (Well, assuming the estimate of remaining votes is correct, which it isn’t.) Maybe I should draw it more like a gray background area.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"function previews(notebooks) {\n return html`

${notebooks.map(preview)}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"function preview({ path, title, author, thumbnail, date }) {\n return html`\n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${event =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

${title}

${formatDate(\n date\n )}

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"html = (await require(\"htl@0.2\")).html","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"update","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"// todo: UTC?\nformatDate = date =>\n date\n ? new Date(date).toLocaleDateString(\"en-US\", {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n })\n : \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"import {\n viewof state_id,\n viewof shape,\n chart,\n update\n} from \"@tophtucker/vote-cone-transitions\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"import { tweet } from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}