3f:null 40:["$","title",null,{"children":"Population and voting simulation | Yan Wu | Observable"}] 46:T8fd,function rightSideRaceOutcomes() { return html`

${getPct(+top_forty.tot/ (+top_forty.tot + (+elseWhere.tot)))} live in Top-forty metro

${getPct( +top_forty.dem/(+top_forty.tot))}

${getPct( +top_forty.rep/(+top_forty.tot))}

${getPct(+elseWhere.tot/ (+top_forty.tot + (+elseWhere.tot)))} live elsewhere

${getPct(+elseWhere.dem/(+elseWhere.tot))}

${getPct(+elseWhere.rep/(+elseWhere.tot))}

`};47:T759,drawPoints = regl({ vert: ` precision mediump float; attribute float speed, x, y0, y1, dy; attribute float isB; varying float c; uniform float interp; void main() { float t = mod(x + interp*speed, 1.0); // cubic ease float ct = t < 0.5 ? 4.0 * t * t * t : -0.5 * pow(abs(2.0 * t - 2.0), 3.0) + 1.0; float x = mix(-1.0, 1.0, t); float y = mix(y0, y1, ct); gl_Position = vec4(x, y + dy, 0, 1); gl_PointSize = 5.0; c = isB; }`, frag: ` precision mediump float; varying float c; void main() { vec4 color0 = vec4(.400, .761, .647, 1); vec4 color1 = vec4(.553, .627, .796, 1); vec4 color2 = vec4(.988, .553, .384, 1); vec4 color3 = vec4(.906, .541, .765, 1); vec4 color4 = vec4(.651, .847, .329, 1); vec4 color5 = vec4(1.00, .851, .184, 1); vec4 color6 = vec4(.898, .769, .580, 1); vec4 color7 = vec4(1.00, 1.00, 1.00, 1); if (c == 0.0) { gl_FragColor = color0; } else if (c == 1.0) { gl_FragColor = color1; } else if (c == 2.0) { gl_FragColor = color2; } else if (c == 3.0) { gl_FragColor = color3; } else if (c == 4.0) { gl_FragColor = color4; } else if (c == 10.0) { gl_FragColor = color7; } else { gl_FragColor = color4; } }`, attributes: { speed: createdData.map(d => d.speed), x: createdData.map(d => d.x), y0: createdData.map(d => d.y0), y1: createdData.map(d => d.y1), dy: createdData.map(d => d.dy), isB: createdData.map(d => d.isB) }, uniforms: { interp: (ctx, props) => props.interp }, primitive: 'point', count: createdData.length, }) 48:T663,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }49:[] 44:{"id":"d396bf85ba8b0dc5","slug":"population-simulation","title":"Population and voting simulation","thumbnail":"6b0dedfdffb6a8c459cefd64882428cf952b8899d8691e959aa1f775e9d46031","access_level":"public","create_time":"$D2021-12-02T22:36:51.129Z","update_time":"$D2022-01-04T20:16:42.777Z","view_time":null,"first_public_time":"$D2021-12-07T21:54:07.005Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"b395fcc1dd8ae22e","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":"starter_2024","bio":"Designer, Coder, Journalist, Storyteller","following":false},"version":348,"publish_version":348,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7c45ac5dd13b71b","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":null,"bio":"Designer, Coder, Journalist, Storyteller","following":false}],"members":[{"type":"individual","id":"f7c45ac5dd13b71b","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Population and voting simulation","cells":[{"id":0,"value":"# Population and voting simulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"swatches({\n color: d3.scaleOrdinal(['vote for democrat', 'vote for republican', 'vote for other'], [\"#8D9FC9\",\"#FB8D61\",\"#A7D750\"])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`Between 1980 and 2020, the U.S. population increased 51%, and the voting population increased 83%, but the ratio of people who live in top-forty metro versus people who live elsewhere didn't change much.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof regl = createDiagram() ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof electionYear = {\n const form = html`

${Object.assign(html` Election year `, {value: \"All\"})}`;\n form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent(\"input\")));\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"weightLoss = 100000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof googlefont = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function createDiagram(){\n // Dropdown menu change view: Race, Age Group, Relationship to Incident Location\n // left_attribute_selection;\n // outcome_attribute_selection;\n \n const container = html`

`;\n let canvas = DOM.canvas(800, 500);\n \n container.appendChild(canvas);\n container.value = wrapREGL({\n canvas: canvas, \n });\n\n // const legend= displayLegend_toggle();\n // container.appendChild(legend);\n \n const labels = rightSideRaceOutcomes();\n container.appendChild(labels);\n\n const leftLabel = leftSideIntro();\n container.appendChild(leftLabel);\n /* Functions for labels\n shooterRaceCategory()\n relationShipIncidentCategory()\n ageGroupCategory\n */\n\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"function leftSideIntro() { return html`\n

\n \n \n

\n Of all the people who voted in the US in ${electionYear}\n\n

\n\n\n \n\n

\n\n\n

\n`};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"function getPct(num){\n return (num * 100).toFixed(0)+'%'\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"wrapREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"google_sheet_url ='https://docs.google.com/spreadsheets/d/e/2PACX-1vThJI97E6R65631yx9yr43g2sC7Gd7bykAHySm9JjpPzbS0n-TL4TuL_iiDR6HVB270sP8h6gwO_Leq/pub?output=tsv'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"createdData = (new Array(allPop2020).fill((t,i)=>{ return {speed: 1, 'idx': i} } )).map( (t, idx) =>{\n return {\n speed: Math.random()*0.2+0.5,\n x: Math.random(),\n y0: -0.2,\n y1: (idx < Math.round(data2020[0]/weightLoss) )? -0.5: 0.4,\n dy: Math.random() * 0.2,\n isB: getColorCode(idx),\n attr: idx< data2020[0]? 'elseWhere': 'top_forty'\n }\n} )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"elseWhere = allDataSelected.filter(t=>t.category==='elsewhere')[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"top_forty = allDataSelected.filter(t=>t.category==='top_forty')[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"(+elseWhere['dem'] + (+elseWhere['rep']) )/weightLoss","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"function getColorCode(idx) { \n \n if( idx<= +elseWhere['dem']/weightLoss ){\n return 1\n } else if(idx<= (+elseWhere['dem'] + (+elseWhere['rep']) )/weightLoss ){\n return 2\n } else if(idx<= +elseWhere['tot']/ weightLoss){\n return 4\n } else if(idx<= (+elseWhere['tot'] + (+top_forty['dem']) )/weightLoss ){\n return 1\n } else if(idx<= (+elseWhere['tot'] + (+top_forty['dem']) + (+top_forty['rep']) )/weightLoss ){\n return 2\n } else {\n return 4\n }\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"allPop2020 = Math.round( d3.sum(data2020)/ weightLoss)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"data2020 = allDataSelected.map(t=>t.tot)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"allDataSelected = data.filter(t=> t.election_year===electionYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"{\n window.regltick = regl.frame(({ time }) => {\n regl.clear({\n color: [1, 1, 1, 1],\n depth: 1\n })\n drawPoints({ interp: time / 5 })\n })\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"data = { // this is a JS Array of Objects; the key-value pairs consist of the column headers and the cell data\n let dataArr =[];\n const spreadsheet = await d3.tsv(google_sheet_url)\n .then(data => data.forEach(d => dataArr.push(d))); // d3.tsv returns a Promise\n return dataArr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"count = allPop2020","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"height = 950","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"