31:T4d9,md` The two minute summary video gives a sense for how we develop an idea over the course of a stream, as well as the limits we hit. We recognize that notebooks like the following two are interesting starting points, they would need a good bit more work to stand alone as useful visualizations. While we didn't pursue this thread on election night, it's encouraging to see [this gorgeous innovation](https://www.washingtonpost.com/graphics/2020/elections/electorate-changes-2016-election-vs-2020/) on visualizing change over time and geography. ${gallery([ { label: 'Change in Registered Voters by County 2016-2018', link: 'https://observablehq.com/@codingwithfire/registered-voters-by-county-2016-2018', src: 'https://static.observableusercontent.com/thumbnail/d85b0ad301a1a3e7cf18d6ea8507e52a58604fa580473189294807b90ceb93b4.jpg' }, { label: 'Population Change by County 2016-2018: Bubble Lines', link: 'https://observablehq.com/@codingwithfire/population-change-by-county-2016-2018-bubble-lines?collection=@codingwithfire/election-explorations', src: "https://static.observableusercontent.com/thumbnail/3ecf78322b3234f45056e6d16552da1e5d2a6cb59e487494dacbb59e7485ed06.jpg" } ])} `32:T466,md` ### Unit charts Unit charts are a favorite technique for both EJ and Ian, in fact EJ has been making them professionally [since he was a kid](https://www.perceptualedge.com/articles/visual_business_intelligence/unit_charts_are_for_kids.pdf)! Another favorite technique for both of us is the force layout, so it was only natural that we combine the two and explore the flavor profiles of a [force-directed unit chart of electoral college votes](https://observablehq.com/@codingwithfire/electoral-college-unit-charts-with-text?collection=@codingwithfire/electoral-college-visualizations).

The interesting thing about using force layouts is that once you have it working it's fairly straight forward to create a natural feeling transition between different layouts. We started with a basic grid, then moved the units to the center point of their state. We realized things were a bit bunched up so we thought we could place them in a cartogram for a nicer layout. `33:T4f4,md` Once we had the real data, which we thought would be much harder to get but thankfully the New York Times allowed free access to their results API, we were off to the races. It turned out that our simulation had mostly worked, plugging in the real numbers in place of the fake ones took only a few minutes. We simply forked our simulation notebook and started building out [our final notebook](https://observablehq.com/@codingwithfire/where-are-votes-outstanding-2020?collection=@codingwithfire/election-explorations). If there was one thing we would do differently it would be to prepare more annotation and design assets. We enjoy building the visualizations a little too much and we didn't take the extra time to add titles, legends or fix a variety of smaller font and color issues that would go a long way towards making these visualization stand on their own. It's really important work but doesn't really make for great TV. In the end it turns out that preparation pays off, we didn't use all of our crazy ideas but the one we did pursue was only possible because of the hard work of many people in the community, the tireless (and generous) reporters at the New York Times and our ability to easily collect, organize and think with data in Observable. `34:[{"id":"8d9219e6206135f7ffcbd0dcee7c756ee1db057e00a7369ad74185c8c42b2bba8aac649bce5562e77a8e78eed9b0c1a10745c875def4823babe9e6b4a447093b","href":"https://static.observableusercontent.com/files/8d9219e6206135f7ffcbd0dcee7c756ee1db057e00a7369ad74185c8c42b2bba8aac649bce5562e77a8e78eed9b0c1a10745c875def4823babe9e6b4a447093b","name":"covid-bubbles.png","type":"image/png","lastModified":1605820615255.225,"size":602981},{"id":"201bd256168d74ec826599fe7fbdd967e52937e6cd7df87888223cd34045d24c4fb731d60f2a86354c5433c7f0443337df86c3cf88fcc9577086dc8d98932bf3","href":"https://static.observableusercontent.com/files/201bd256168d74ec826599fe7fbdd967e52937e6cd7df87888223cd34045d24c4fb731d60f2a86354c5433c7f0443337df86c3cf88fcc9577086dc8d98932bf3","name":"election-hero@2.png","type":"image/png","lastModified":1605819874410.252,"size":1032573},{"id":"a8e82a99326420c2804cb0cfbb8437ebf56d7d9719c3268dfc9e6ef85440e5b094846be0cb22af1ecfc89a78bed225ccebaa0e15cc5dbb565f01c3e9e0594333","href":"https://static.observableusercontent.com/files/a8e82a99326420c2804cb0cfbb8437ebf56d7d9719c3268dfc9e6ef85440e5b094846be0cb22af1ecfc89a78bed225ccebaa0e15cc5dbb565f01c3e9e0594333","name":"impeach-this.png","type":"image/png","lastModified":1605820554216.029,"size":449997},{"id":"1d1f1a44a75d7407b9948ffc5507e905a2c95b6593b60f6eff38bccf890e89e4d6c9791cb90da600d33fc01c884d2144f8b98d35eab26a990062ea0b611f7d49","href":"https://static.observableusercontent.com/files/1d1f1a44a75d7407b9948ffc5507e905a2c95b6593b60f6eff38bccf890e89e4d6c9791cb90da600d33fc01c884d2144f8b98d35eab26a990062ea0b611f7d49","name":"election-bubbles-2.png","type":"image/png","lastModified":1605869705645.718,"size":1019834},{"id":"459c7370578ade032558783f08f7e39dd6cdeabbd47eaeee1cd142bf42a7fd360442b0a51d62da69554babc86dba09620cab0f4d5062ccdb9a13f85cf8cdcf7f","href":"https://static.observableusercontent.com/files/459c7370578ade032558783f08f7e39dd6cdeabbd47eaeee1cd142bf42a7fd360442b0a51d62da69554babc86dba09620cab0f4d5062ccdb9a13f85cf8cdcf7f","name":"electoral-units.mp4","type":"video/mp4","lastModified":1605871405984.024,"size":3327342},{"id":"4b7e6d287e20a4cef040505e52e9575a5b974e4aefa85b0a3f5827c433cfea9fde7cfa1c6f5e981f68d0b4e7bc414f4a9359a05bd8437b1e957430a1b87e4ca8","href":"https://static.observableusercontent.com/files/4b7e6d287e20a4cef040505e52e9575a5b974e4aefa85b0a3f5827c433cfea9fde7cfa1c6f5e981f68d0b4e7bc414f4a9359a05bd8437b1e957430a1b87e4ca8","name":"codingwithfire.mp4","type":"video/mp4","lastModified":1605876118154.482,"size":6145892},{"id":"1d2389d1873a16ba69824c68c6ea7e39411e642e8a56bc39343eddec72af7aa09bbf9969b89e70fd0571958f929c5871d177701d904da6be2d3eb761b8b04fb9","href":"https://static.observableusercontent.com/files/1d2389d1873a16ba69824c68c6ea7e39411e642e8a56bc39343eddec72af7aa09bbf9969b89e70fd0571958f929c5871d177701d904da6be2d3eb761b8b04fb9","name":"cartogram.png","type":"image/png","lastModified":1605874705740.881,"size":337110},{"id":"5ba5bfee3f2a6eb98d647e1d3ce1a7ee63de163d488c44d01b07859b3351819b0c8a897f62625d6d3a4e743d845c147b182eb3abd10179a18b5b7cfbed37117f","href":"https://static.observableusercontent.com/files/5ba5bfee3f2a6eb98d647e1d3ce1a7ee63de163d488c44d01b07859b3351819b0c8a897f62625d6d3a4e743d845c147b182eb3abd10179a18b5b7cfbed37117f","name":"cartogram (10).png","type":"image/png","lastModified":1605875017942.748,"size":199715},{"id":"d869eb3a9802f7b51a84c5654fb47f37dcb95aeb73d3317f080f3c4084dc88f1626a60231d22349429240b27427bedb0fc7637c142da768ecb91f81adb025cf0","href":"https://static.observableusercontent.com/files/d869eb3a9802f7b51a84c5654fb47f37dcb95aeb73d3317f080f3c4084dc88f1626a60231d22349429240b27427bedb0fc7637c142da768ecb91f81adb025cf0","name":"cartogram (3).png","type":"image/png","lastModified":1605875018747.8,"size":406171},{"id":"d68882baaf69bdd5b6c65dd699a9a6a6559220714af46b9f84f20738ee65291737cd4395ae3323629cad5f99e7249e2ea8c03cfbe45751f0dea9df4d2cf09a8a","href":"https://static.observableusercontent.com/files/d68882baaf69bdd5b6c65dd699a9a6a6559220714af46b9f84f20738ee65291737cd4395ae3323629cad5f99e7249e2ea8c03cfbe45751f0dea9df4d2cf09a8a","name":"simulated-votes.png","type":"image/png","lastModified":1605874205976.657,"size":249431},{"id":"19f9c84fb481f67571721cd1b773168f45ae3f8d98c94e1d44f6fbadeae69ded9d544dd50204f85609b659308da499016f73aa3da90e660b235b3535dfad4c11","href":"https://static.observableusercontent.com/files/19f9c84fb481f67571721cd1b773168f45ae3f8d98c94e1d44f6fbadeae69ded9d544dd50204f85609b659308da499016f73aa3da90e660b235b3535dfad4c11","name":"cartogram (8).png","type":"image/png","lastModified":1605875018848.476,"size":486292},{"id":"18fd0d4dd7505c164a1b6625624742d371a3fcfc534b978d30a8a3a22b9c19e22cc9bf09c4d00281327265a0d17e025c83f93814fe1b3b12020c2d2e8e22faca","href":"https://static.observableusercontent.com/files/18fd0d4dd7505c164a1b6625624742d371a3fcfc534b978d30a8a3a22b9c19e22cc9bf09c4d00281327265a0d17e025c83f93814fe1b3b12020c2d2e8e22faca","name":"election-hero.png","type":"image/png","lastModified":1605794891926.254,"size":1045018},{"id":"3fdacc6644f16527f2f2c2c1f130e957a0ba7a01891829428844b948147958452a498e34d2c9645917914c7d204fd3c105a17cd93633d6846600a1dd6c27e57c","href":"https://static.observableusercontent.com/files/3fdacc6644f16527f2f2c2c1f130e957a0ba7a01891829428844b948147958452a498e34d2c9645917914c7d204fd3c105a17cd93633d6846600a1dd6c27e57c","name":"cartogram (6).png","type":"image/png","lastModified":1605796121790.268,"size":485545},{"id":"8996a0d08e9edccf345b384ba7cc22b7dcc5b161b24f883928353de592a01473e5a98524362f2a02a3341da93c0f3ba71da8be6645f3be5f8251568cc71974a4","href":"https://static.observableusercontent.com/files/8996a0d08e9edccf345b384ba7cc22b7dcc5b161b24f883928353de592a01473e5a98524362f2a02a3341da93c0f3ba71da8be6645f3be5f8251568cc71974a4","name":"us-counties.png","type":"image/png","lastModified":1605798729154.125,"size":1189066},{"id":"5dbe06581e689b1129cb134a9d0f5e4dcee2a6112a26934e24286d67627db9ee3452f3711bbcdb4850bd73994074689b2eda29b3e019650037302e82d7f8b587","href":"https://static.observableusercontent.com/files/5dbe06581e689b1129cb134a9d0f5e4dcee2a6112a26934e24286d67627db9ee3452f3711bbcdb4850bd73994074689b2eda29b3e019650037302e82d7f8b587","name":"cooldiff.png","type":"image/png","lastModified":1605798741217.421,"size":2707940}] 2f:{"title":"Livecoding Election Night Visualizations","cells":[{"id":0,"value":"md`# Livecoding Election Night Visualizations\n*Over 2 months [EJ Fox](https://twitter.com/mrejfox) and [Ian Johnson](https://twitter.com/enjalot) livestreamed the creation of [19 unique notebooks](https://observablehq.com/collection/@codingwithfire/election-explorations) culminating in our very own live Election 2020 show. Here is how we did it.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`\n[We knew](https://www.nytimes.com/interactive/2020/upshot/vote-counting-today-polls-election.html) election night wasn't going to be just one night, and there was [a lot of worrying news](https://www.washingtonpost.com/opinions/2020/10/29/trumps-effort-steal-election-explained-by-democrat-fighting-against-it/) about the increased complexity of this election given the pandemic and heightened political polarization. At the same time, there has never been more publicly available data at such granular levels about the electoral system as there is today. It turned out that the [data visualization community rose to the challenge](https://www.fastcompany.com/90575894/we-design-maps-for-a-living-heres-who-got-the-2020-election-right), and we are proud to have contributed a little bit.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`## Election Night`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`\nEJ, who previously worked for NBC building the [Big Board for Steve Kornacki](https://www.tvinsider.com/955907/steve-kornacki-msnbc-election-2020-big-board/), convinced me to help him build the kinds of visualizations he always wanted to see on TV but were deemed to advanced. Since we'd started live streaming our data visualization projects on our show [Coding with Fire](http://www.codingwithfire.com/), we realized if we could build it we could broadcast it. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`\n*Our election night broadcast was five and a half hours long, if you really want to relive those harrowing moments you can [watch the replay on YouTube](https://www.youtube.com/watch?v=BfNtSPFY6pQ).*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`\nThe name of the show is inspired by all the cooking shows we've watched, every episode we make one or more \"dishes\" with data as our ingredients. So for about two months leading up to the election we travelled the internet looking for unique and delicious data so that we could prepare a visualization feast on election night!\n\nThroughout those two months we live streamed our progress, had crazy ideas, found really interesting data, cursed broken and missing data, collaborated with one of our heros, [Shirley Wu](https://twitter.com/sxywu) and ended up with a fully stocked kitchen that would let us build what we were most interested in seeing on election night: a totally different way to keep track of where votes were outstanding.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"html`\n

\n
\nThroughout election night this visualization showed us which counties had finished counting and which hadn't.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`\nSo how did we get to this visualization and what did it show us that fateful night? \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`## Crazy Ideas\n*How working in the open using [Observable Notebooks](https://observablehq.com) and [streaming on Twitch](https://twitch.tv/enjalot) takes us to really interesting places.*\n\nBy now its common knowledge that [election maps can be deceiving](https://www.bloomberg.com/news/articles/2020-11-03/a-complete-guide-to-misleading-election-maps), so it might seem a bit audacious to try weird and crazy ideas when it comes to visualizing the election. We believe that a lot of the reasons past visualizations have been misleading is because it's too difficult to design, implement and receive feedback on alternatives. This is where both Observable and live streaming shine!\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"md`\n### Land Doesn't Vote\nFor starters, we've been heavily inspired by [Karim Douïeb](https://twitter.com/karim_douieb)'s use of the d3 force layout to show an [alternative political map](https://www.fastcompany.com/90572489/u-s-election-maps-are-wildly-misleading-so-this-designer-fixed-them) that is more representative of reality. Karim developed this visualization in an [Observable notebook](https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted). \n\nWe were able to learn from his code and adapt his technique, which we first applied to some [COVID visualizations](https://observablehq.com/collection/@codingwithfire/covid-explorations) we'd been working on and then were able to use on election night as we visualized [results coming in for each county](https://observablehq.com/@codingwithfire/live-election-data?collection=@codingwithfire/election-explorations)!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"html`\n

\n
\nLeft is Karim's map, center is our COVID version and right is our use of the technique on election night.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"md`\nAn interesting aspect of turning all the counties into circles is that we could easily change what the circles represented, we realized it would be interesting to see the counties sized by the expected vote count rather than the population. Being freed from assumptions such as \"counties should be visualized by their geographic boundaries\" opens up new possibilities, and we are excited to keep exploring them.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`\n### Visualizing Differences\nAlong a similar vein, in one of our earlier streams we explored how we might visualize differences, differently. Just like [things had changed in 2016](https://www.nytimes.com/interactive/2016/11/08/us/elections/how-trump-pushed-the-election-map-to-the-right.html) we were expecting to see shifts in the way counties vote in 2020. We realized that how many people vote for each political party aren't the only thing that changed, so we set out to visualize changes in registered voters and populations.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"twitch(\"761392599\", {\n time: \"0h0m10s\",\n width: width * 0.8,\n autoplay: false,\n muted: false,\n visibility\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"twitch(\"773565567\", {\n time: \"0h0m00s\",\n width: width * 0.8,\n autoplay: false,\n muted: false,\n visibility\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`This is where Observable shines again, we were able to not only quickly learn how to make a cartogram, we were able to import all the data and layout code we needed from [Aaron Williams's excellent Small Multiple Chart Cartogram notebook](https://observablehq.com/@aboutaaron/small-multiple-chart-cartogram). While we didn't look at electoral college votes on election night (seeing as counting actual votes was the important subject) it was this cartogram code that made a huge difference in the visualization we spent the most time on. Before we can get into that though we need to talk a little bit about all the other data we worked with!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`## Data Rules Everything Around Me\n*There is so much data available, how do we make sense of it? What happens when the data doesn't make sense?*\n\nWe work with a lot of data in the course of our jobs. On the one hand we know how much interesting stuff is out there, and on the other we know how hard it can be to find and use it. Pretty early on we realized we should put extra effort into collecting data we knew would be relevant to the election so that we wouldn't need to deal with the inevitable problems on election night.\n\nIan set out to get some of the very basics organized, things like county boundaries, population from the US Census and even US Post Office locations. In addition to gathering the [data in one place](https://observablehq.com/@enjalot/us-county-datasets) we knew we'd be drawing a bunch of maps, so we tried to make sure there were simple code snippets to go with each dataset that we could reuse in the heat of the moment.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"html`\n

\n
\nFantastical County Datasets and Where to Find Them\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`\nEJ on the other hand is a veteran reporter of US Elections and he had experience working with what would be the most relevant dataset for our project: the [Election Administration and Voting Survey](https://www.eac.gov/research-and-data/studies-and-reports) or EAVS. This data has county-level numbers on things like voter registration, mail-in ballot rejections, polling places, election technology and hundreds more fields.\n\nThe data is so vast that just finding out what is available can be a challenge, to address that EJ put together [this super helpful notebook](https://observablehq.com/@codingwithfire/working-with-election-data-voter-survey-eavs?collection=@codingwithfire/election-explorations) that is a guide to working with EAVS data for programmers.\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"html`\n

\n
\nWorking with EAVS Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`\nOur friend and data visualization hero [Shirley Wu](https://twitter.com/sxywu) has also been [live streaming](https://www.twitch.tv/sxywu) her design and development process as she builds out the [Make My Vote Count](https://www.makemyvotecount.party/) project. Several of the visualizations in the project utilized the EAVS dataset and we were able to collaborate on [processing the data into easy-to-visualize formats](https://observablehq.com/@sxywu/all-project-data-cached). It was really encouraging to see our preparation work benefit someone we respect so much and at the same time we benefitted from Shirley's iterations on the data.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`\n### Living in a Simulation\n\nThroughout the course of [our many explorations](https://observablehq.com/collection/@codingwithfire/election-explorations), it became clear to us that what we most wanted to be able to see was where votes were outstanding on election night. The problem was, we just could not find the data we needed from past elections. For starters, we want to do everything at the county level, since that is [where news happens](https://www.texastribune.org/2020/11/01/texas-drive-thru-votes-harris-county/). Additionally we wanted minute-by-minute or at the very least hour-by-hour playback of vote counts, which no one we knew seemed to have.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"html`\n

\n
\nSimulating vote counts so we can attempt a visualization\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`\nSo we did what we never let our clients do, we simulated the data. We had enough of an idea of what the structure of the data would be, simply the number of votes reported for each precinct along with the expected total votes, which enabled us to explore some interesting visualization ideas. As you can see from the first time we plugged in live data, reality is always messier than your simulation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"html`\n

\n
\nGlitch or nah?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`## Do it Live!\n*What we learned from election night.*\n\nThis brings us to the culmination of all our data gathering, streaming, notebook forking and crazy ideas. We ended up with a [cartogram of treemaps](https://observablehq.com/@codingwithfire/where-are-votes-outstanding-2020?collection=@codingwithfire/election-explorations), where each state is represented by a treemap of counties sized by their expected vote. The counties fade from white to gray as the votes counted reach the expected count. This ends up highlighting the remaining counties. Once a county is called for a candidate we color by its political party.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"html`\n

\n
\nThe top 2 images are from election night Nov. 3, the bottom left is Nov. 4 and the bottom right Nov. 17\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`Join us on [Coding with Fire](http://www.codingwithfire.com) and check out our [Observable Notebooks](https://observablehq.com/@codingwithfire) if you want to taste more wild data visualization flavors!\n\n\n*A special thanks to the [Observable Team](https://observablehq.com/about) for supporting this work, if you haven't tried out this new way of working with data there are [lots of learning resources](https://observablehq.com/tutorials)!*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"md`\n---\n
\n
\n
\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"import { twitch } from \"@codingwithfire/twitch\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"function gallery(links) {\n const id = DOM.uid().id;\n const style = html`