30:T4bf,md`## Not shown: Disenfranchised voters - [Roughly four million Americans in Puerto Rico, the Northern Mariana Islands, the U.S. Virgin Islands, American Samoa, and Guam](https://en.wikipedia.org/wiki/United_States_Electoral_College#Lack_of_enfranchisement_of_U.S._territories) - Victims of [voter suppression](https://en.wikipedia.org/wiki/Voter_suppression_in_the_United_States) - [Millions of convicted felons](https://en.wikipedia.org/wiki/Felony_disenfranchisement_in_the_United_States) ## Credits - Electoral College Map from [Pitch Interactive](https://pitchinteractiveinc.github.io/tilegrams/) - Colors from [NZZ Visuals](https://nzzdev.github.io/Storytelling-Styleguide/#/colors?a=united-states) ## Disclaimers - [Faithless electors](https://en.wikipedia.org/wiki/Faithless_electors_in_the_2016_United_States_presidential_election) are ignored ## Technical details - Made with [Svelte](https://svelte.dev/) - Inspired by [Hexagonal Grids from Red Blob Games](https://www.redblobgames.com/grids/hexagons/) - Source code on GitHub: [rkaravia/blue-wave](https://github.com/rkaravia/blue-wave) - Also available in [Svelte REPL](https://svelte.dev/repl/4720c76789b84e349764f7d1c0ef395c?version=3.29.7)`31:[] 2e:{"title":"Blue wave","cells":[{"id":0,"value":"md`# Blue wave\n\nA 7 second summary of the [2020 US presidential election](https://en.wikipedia.org/wiki/2020_United_States_presidential_election)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"{\n replay;\n const blueWave = DOM.element(\"div\");\n yield html`\n

\n ${blueWave}\n

\n \n Open in new tab\n \n

`;\n new bluewave.BlueWave({\n target: blueWave,\n props: {\n data: { results2016, results2020 }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"viewof useDarkMode = {\n const button = html``;\n const container = html`

${button}

`;\n container.value = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n button.onclick = () => {\n container.value = !container.value;\n container.dispatchEvent(new CustomEvent(\"input\"));\n };\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"results2016 = ({\n AK: \"red\",\n AL: \"red\",\n AR: \"red\",\n AZ: \"red\",\n CA: \"blue\",\n CO: \"blue\",\n CT: \"blue\",\n DC: \"blue\",\n DE: \"blue\",\n FL: \"red\",\n GA: \"red\",\n HI: \"blue\",\n IA: \"red\",\n ID: \"red\",\n IL: \"blue\",\n IN: \"red\",\n KS: \"red\",\n KY: \"red\",\n LA: \"red\",\n MA: \"blue\",\n MD: \"blue\",\n ME: \"blue\",\n MECD1: \"blue\",\n MECD2: \"red\",\n MI: \"red\",\n MN: \"blue\",\n MO: \"red\",\n MS: \"red\",\n MT: \"red\",\n NC: \"red\",\n ND: \"red\",\n NE: \"red\",\n NECD1: \"red\",\n NECD2: \"red\",\n NECD3: \"red\",\n NH: \"blue\",\n NJ: \"blue\",\n NM: \"blue\",\n NV: \"blue\",\n NY: \"blue\",\n OH: \"red\",\n OK: \"red\",\n OR: \"blue\",\n PA: \"red\",\n RI: \"blue\",\n SC: \"red\",\n SD: \"red\",\n TN: \"red\",\n TX: \"red\",\n UT: \"red\",\n VA: \"blue\",\n VT: \"blue\",\n WA: \"blue\",\n WI: \"red\",\n WV: \"red\",\n WY: \"red\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"results2020 = ({\n AK: \"red\",\n AL: \"red\",\n AR: \"red\",\n AZ: \"blue\",\n CA: \"blue\",\n CO: \"blue\",\n CT: \"blue\",\n DC: \"blue\",\n DE: \"blue\",\n FL: \"red\",\n GA: \"blue\",\n HI: \"blue\",\n IA: \"red\",\n ID: \"red\",\n IL: \"blue\",\n IN: \"red\",\n KS: \"red\",\n KY: \"red\",\n LA: \"red\",\n MA: \"blue\",\n MD: \"blue\",\n ME: \"blue\",\n MECD1: \"blue\",\n MECD2: \"red\",\n MI: \"blue\",\n MN: \"blue\",\n MO: \"red\",\n MS: \"red\",\n MT: \"red\",\n NC: \"red\",\n ND: \"red\",\n NE: \"red\",\n NECD1: \"red\",\n NECD2: \"blue\",\n NECD3: \"red\",\n NH: \"blue\",\n NJ: \"blue\",\n NM: \"blue\",\n NV: \"blue\",\n NY: \"blue\",\n OH: \"red\",\n OK: \"red\",\n OR: \"blue\",\n PA: \"blue\",\n RI: \"blue\",\n SC: \"red\",\n SD: \"red\",\n TN: \"red\",\n TX: \"red\",\n UT: \"red\",\n VA: \"blue\",\n VT: \"blue\",\n WA: \"blue\",\n WI: \"blue\",\n WV: \"red\",\n WY: \"red\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`## Imports / Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"bluewave = {\n await require(\"https://labs.karavia.ch/blue-wave/build/bundle.js\").catch(\n () => {}\n );\n return window.bluewave;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"{\n let colors;\n if (useDarkMode) {\n colors = {\n foreground: \"#fff\",\n background: \"#15202b\",\n link: \"#1b95e0\",\n blue: \"#618ec0\",\n red: \"#ce6661\",\n open: \"#7b7b7c\"\n };\n } else {\n colors = {\n foreground: \"#333\",\n background: \"#f7f7f7\",\n link: \"#0064c8\",\n blue: \"#81a8db\",\n red: \"#ff7a64\",\n open: \"#d7d7d7\"\n };\n }\n\n return html`\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}