2e:null 2f:["$","title",null,{"children":"National Popular Vote Bill Status | Jed Fox | Observable"}] 34:T780,collapsedCSS` @import url('https://fonts.googleapis.com/css?family=Overpass:400,700'); .law { background: green } .one { background: #b27e23 } .two { background: #e58f16 } .referendum { background: #7f3f7f } .committee { background: #3f3f7f } .none { background: gray } .state.mini, .status { user-select: none; display: inline-block; box-sizing: border-box; color: white; } .state { text-decoration: none !important; } .state:hover, .state:active { opacity: 0.7 } .state.mini { margin-right: ${devicePixelSize}px; height: ${size / 2}px; } .status, strong { font-family: Overpass, Helvetica Neue, Helvetica, sans-serif; } .status { height: ${size}px; border-bottom: 1px solid white; border-right: 1px solid white; font-size: ${size / 2}px; width: ${size}px; min-width: ${size}px; color: white; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; position: relative; vertical-align: bottom; } .status:not(.first)::before { content: ''; width: ${size}px; border-bottom: 1px dashed hsla(0, 0%, 100%, 0.75); display: inline-block; height: 0; position: absolute; } .status.last::after { content: attr(data-votes); height: ${size / 3}px; border-left: 1px solid hsla(0, 0%, 100%, 0.75); display: inline-flex; align-items: center; justify-content: center; width: ${0.6 * size}px; position: absolute; right: 0; background-color: inherit; font-size: 0.8em; } .legend-row { display: flex; align-items: center; transition-duration: 0.4s; transition-property: margin, padding, border; border-bottom: 1px solid transparent; } ${width < 725 && ` .legend-row:not(:last-child) { margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom-color: #ddd; } `.trim()} .legend-row .status { margin-right: 1ch; } .tick { border-right: 2px solid; pointer-events: none; width: ${half}px; } `35:[] 32:{"id":"6f22a8d7f5269625","slug":"national-popular-vote-status","title":"National Popular Vote Bill Status","thumbnail":"85d78e05bae4070fe1502bc7c573afcc1bd1ebeae8d5223837a08c98aa981712","access_level":"public","create_time":"$D2019-03-08T00:26:27.197Z","update_time":"$D2021-01-25T21:35:22.969Z","view_time":null,"first_public_time":"$D2019-03-08T18:48:41.269Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":"starter_2024"},"version":945,"publish_version":945,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a6723dba070655c","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":null}],"members":[{"type":"individual","id":"6a6723dba070655c","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"39e07f18b296e2a9","slug":"politics","title":"Politics","owner":{"id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox"}},"type":"notebook","body":{"title":"National Popular Vote Bill Status","cells":[{"id":0,"value":"md`\n# National Popular Vote Bill Status\n\nThis page is not affiliated with the National Popular Vote initiative.\n\nIf you’re interested, you can\n[learn more](https://www.nationalpopularvote.com/written-explanation) about the National Popular Vote bill,\n[read the bill](https://www.nationalpopularvote.com/sites/default/files/eve-4th-ed-ch6-web-v1.pdf \"Starts on page 5\"), \n[contact your legislator](https://www.nationalpopularvote.com/tell-your-legislators-support-national-popular-vote) (US-only 🇺🇸), or\n[donate to National Popular Vote](https://www.nationalpopularvote.com/donate), which has created and promotes the bill.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"{\n const total = sumVotes(states);\n return render(\n () => jsx`\n ${total / 2 + 1} VOTES\n

\n ${orderedStates.map(\n state => jsx`\n \n `\n )}\n

\n `\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"render(\n () => jsx`\n<${LegendItem} status=\"law\">\n member state\n\n<${LegendItem} status=\"referendum\">\n signed into law, but pending a statewide vote\n\n<${LegendItem} status=\"two\">\n passed by both branches of the state legislature, but not yet signed\n\n<${LegendItem} status=\"one\">\n passed by one branch of the state legislature\n\n<${LegendItem} status=\"committee\">\n approved by a state committee\n\n<${LegendItem} status=\"none\">\n no action taken\n\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"render(\n () => jsx`\n

\n ${orderedStates.map(\n state => jsx`<${State} key=${state.abbr} state=${state} />`\n )}\n

\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md`\n---\n\n### Data Analysis\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"missingStates = states.length < 51\n ? states.reduce(\n (set, state) => (set.delete(state.name), set),\n new Set(Object.keys(electoralVotes))\n )\n : false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"extraStates = states.length > 51\n ? Object.keys(electoralVotes).reduce(\n (set, state) => (set.delete(state), set),\n new Set(states.map(s => s.name))\n )\n : false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"sumVotes = states => states.map(state => state.votes).reduce((a, b) => a + b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"orderedStates = [\n ...sortByVotes(statesByStatus.law),\n ...sortByVotes(statesByStatus.referendum),\n ...sortByVotes(statesByStatus.two),\n ...sortByVotes(statesByStatus.one),\n ...sortByVotes(statesByStatus.committee),\n ...sortByVotes(statesByStatus.none)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"statesByStatus = states.reduce((statuses, state) => {\n if (!statuses[state.status]) statuses[state.status] = [];\n statuses[state.status].push(state);\n return statuses;\n}, Object.create(null))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"sortByVotes = (states = []) =>\n [...states].sort((stateA, stateB) => stateB.votes - stateA.votes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"function parseStatus(text) {\n text = text.toLowerCase();\n if (text.includes('committee')) {\n return 'committee';\n } else if (text.includes('enacted into law')) {\n // if (text.includes('vote')) return 'referendum';\n return 'law';\n } else if (\n text.includes('both houses') ||\n (text.includes('senate') &&\n (text.includes('house') || text.includes('assembly')))\n ) {\n return 'two';\n } else if (\n text.match(/passed( \\w+)?\\s(house|assembly|senate) in/) ||\n text.includes('passed maine in')\n ) {\n return 'one';\n } else if (text) {\n console.log('Failed to parse: ');\n console.log(text);\n console.log(\n [...text].map(ch => ch.charCodeAt(0).toString(16) + ' ' + ch).join('\\n')\n );\n }\n\n return 'none';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"md`\n---\n\n### Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"states = pageContents\n .slice(\n pageContents.indexOf(\n pageContents[0].parentNode.querySelector('img').parentElement\n ),\n -1\n )\n .map(el => {\n const link = el.querySelector('a');\n if (!link) return null;\n const name = link.textContent.trim();\n const href = new URL(link.getAttribute('href'), sourcePage);\n const segments = href.pathname.split('/');\n const abbr = segments[segments.length - 1].toUpperCase();\n if (abbr.length != 2) return null;\n return {\n name,\n abbr,\n href,\n votes: electoralVotes[name],\n status: parseStatus(\n el.textContent.replace(name, '').replace(/\\s*-\\s*/, '')\n )\n };\n })\n .filter(x => x !== null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"electoralVotes = ({\n California: 55,\n Texas: 38,\n Florida: 29,\n 'New York': 29,\n Illinois: 20,\n Pennsylvania: 20,\n Ohio: 18,\n Georgia: 16,\n Michigan: 16,\n 'North Carolina': 15,\n 'New Jersey': 14,\n Virginia: 13,\n Washington: 12,\n Arizona: 11,\n Indiana: 11,\n Massachusetts: 11,\n Tennessee: 11,\n Maryland: 10,\n Minnesota: 10,\n Missouri: 10,\n Wisconsin: 10,\n Alabama: 9,\n Colorado: 9,\n 'South Carolina': 9,\n Kentucky: 8,\n Louisiana: 8,\n Connecticut: 7,\n Oklahoma: 7,\n Oregon: 7,\n Arkansas: 6,\n Iowa: 6,\n Kansas: 6,\n Mississippi: 6,\n Nevada: 6,\n Utah: 6,\n Nebraska: 5,\n 'New Mexico': 5,\n 'West Virginia': 5,\n Hawaii: 4,\n Idaho: 4,\n Maine: 4,\n 'New Hampshire': 4,\n 'Rhode Island': 4,\n Alaska: 3,\n Delaware: 3,\n 'District of Columbia': 3,\n Montana: 3,\n 'North Dakota': 3,\n 'South Dakota': 3,\n Vermont: 3,\n Wyoming: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"pageContents = {\n const html = document.createElement('html');\n html.innerHTML = pageHTML.html;\n return Array.from(\n html.querySelector('article [property=\"content:encoded\"]').children\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"pageHTML = ({\n html: await fetch(\n 'https://cors-anywhere.herokuapp.com/' + sourcePage\n ).then(res => res.text())\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"md`\n---\n\n### React components\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"LegendItem = component(({ status, children }) => {\n const states = statesByStatus[status];\n if (!states) return null;\n const nbsp = '\\xA0';\n return jsx`\n

\n \n ${children} (${states.length}${nbsp}state${\n states.length !== 1 ? 's' : ''\n },${nbsp}${sumVotes(\n states\n )}${nbsp}electoral${nbsp}votes)\n

\n `;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"State = component(({ state }) => {\n const blocks = [];\n for (let i = 1; i <= state.votes; i++) {\n blocks.push(\n jsx`<${StatusBlock} key=${i} state=${state} first=${i === 1} last=${i ===\n state.votes} />`\n );\n }\n return jsx`\n \n ${blocks}\n \n `;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"StatusBlock = component(\n ({ state, first, last }) => jsx`\n \n ${first ? state.abbr : ''}\n \n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`\n---\n\n### Display Configuration\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"viewof size = slider({\n value: 32,\n step: 1,\n min: 20,\n max: 50,\n description: html`size = Width (in pixels) of the electoral vote blocks`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"viewWidth = width - (width % size)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"half = viewWidth / 2 - 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"devicePixelSize = 1 / window.devicePixelRatio","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"titleForState = state => `${state.name} (${state.votes} votes)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`\n---\n\n### Dependencies\n\n_{*Data scraped from the [National Popular Vote website](${sourcePage}).*}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"sourcePage = 'https://www.nationalpopularvote.com/state-status'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { collapsedCSS } from '@j-f1/css-template-tag'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"import { jsx, render, component } from '@j-f1/react-16'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"