30:T706,probability_map = { let div = d3 .create("div") .style("width", `${map_width}px`) .style("height", `${height}px`) .style("overflow", "hidden"); let svg = div .append("svg") .style("overflow", "hidden") .attr("viewBox", [0, 0, map_width, height]); let path = d3.geoPath().projection(proj); let map = svg.append("g"); map .selectAll("path") .data(states.features) .join("path") .attr("class", "state") .attr("d", path) .style("fill", function (d) { let abbr = d.properties.fips; let dd = data.filter((o) => o.abbr == abbr); let p; if (dd.length > 0) { p = parseFloat(data.filter((o) => o.abbr == abbr)[0]["pj"]); } else { // p = 0.5; } return d3.interpolateRdBu(p); }) .style("fill-opacity", 0.7) .attr("data-state", function (d, i) { let abbr = d.properties.fips; return abbr; }) .attr("stroke-width", "1.5px") .attr("stroke", "#ddd") .attr("stroke-linejoin", "round") .on("mouseenter", function (evt, d) { // d3.selectAll('path').style('fill-opacity', 0.2); d3.select(this).style("fill-opacity", 1); }) .on("mouseleave", function (evt, d) { d3.selectAll("path").style("fill-opacity", 0.7); }); map .selectAll("path") .nodes() .forEach(function (p) { let abbr = d3.select(p).attr("data-state"); let info = data.filter((o) => o.abbr == abbr); if (info.length > 0) { info = info[0]; } tippy(p, { allowHTML: true, content: `

${info.state}

Biden: ${d3.format("0.2f")(100 * info.pj)}%

Trump: ${d3.format("0.2f")(100 * (1 - info.pj))}%

` }); }); return div.node(); }31:T773,function make_result_map(trial) { let biden_count = 0; let trump_count = 0; trial.forEach(function(o) { let r = o.result; if (r == 'Trump') { trump_count = trump_count + o.votes; } else { biden_count = biden_count + o.votes; } }); result_cnt.runs++; if (biden_count > trump_count) { result_cnt.biden++; } else { result_cnt.trump++; } let div = d3 .create('div') .attr('class', 'result_container') .style("width", `${map_width}px`) .style("height", `${30 + height}px`) .style('overflow', 'hidden'); let result_display = div .append('div') .style("width", `${map_width}px`) .style('height', '30px') .style('text-align', 'center') .html( `Biden: ${biden_count}, Trump: ${trump_count}
Percentage of Biden wins: ${ result_cnt.biden } / ${result_cnt.runs} = ${d3.format('0.2f')( (100 * result_cnt.biden) / result_cnt.runs )}%` ); let svg = div .append('svg') .style('overflow', 'hidden') .attr("viewBox", [0, 0, map_width, height]); let path = d3.geoPath().projection(proj); let map = svg.append('g'); map .selectAll("path") .data(states.features) .join("path") .attr('class', 'state') .attr('d', path) .style("fill", function(d) { let abbr = d.properties.fips; let dd = trial.filter(o => o.abbr == abbr); let p; if (dd.length > 0 && dd[0].result == "Biden") { p = 1; } else { p = 0; } return d3.interpolateRdBu(p); }) .style('fill-opacity', 0.7) .attr('data-state', function(d, i) { let abbr = d.properties.fips; return abbr; }) .attr("stroke-width", '1.5px') .attr("stroke", "#ddd") .attr("stroke-linejoin", "round"); d3.selectAll('.result_container').remove(); d3.select(result_map).append(() => div.node()); }32:[{"id":"f65ef23ced08949032e5783fba9b20fd295aa275bafd2a83794bdbb9d0d17d63e022919f584da4a81ed8f727011f59691cf1fe60acf95caeb292b6207b9a4344","href":"https://static.observableusercontent.com/files/f65ef23ced08949032e5783fba9b20fd295aa275bafd2a83794bdbb9d0d17d63e022919f584da4a81ed8f727011f59691cf1fe60acf95caeb292b6207b9a4344","name":"states.json","type":"application/json","lastModified":1603630524933.281,"size":116814},{"id":"ff6ae51af487099d1585eb58907319bbdbbd3fda3b08b63b79e6fe345328f605c9c83993ec397f383adb6a4f83ac1715dadaa1ab2a1b31eb99f78b276a233168","href":"https://static.observableusercontent.com/files/ff6ae51af487099d1585eb58907319bbdbbd3fda3b08b63b79e6fe345328f605c9c83993ec397f383adb6a4f83ac1715dadaa1ab2a1b31eb99f78b276a233168","name":"fivethirtyeight_electoral_probabilities.csv","type":"text/csv","lastModified":1603634281911.284,"size":1462},{"id":"43b3e61febb76a186472c151315f23bf37f11810a51c09e090ef5eb0203de649157cbc2a32d73227b0230191378c25117756aa55bbc93650ac6c117f742e4d46","href":"https://static.observableusercontent.com/files/43b3e61febb76a186472c151315f23bf37f11810a51c09e090ef5eb0203de649157cbc2a32d73227b0230191378c25117756aa55bbc93650ac6c117f742e4d46","name":"fivethirtyeight_electoral_probabilities@1.csv","type":"text/csv","lastModified":1604482264023.966,"size":1464}] 2e:{"title":"Electoral Map","cells":[{"id":0,"value":"md`# Electoral Map\n\nHover over a state to find the probability that state goes to Biden or Trump. Data is [from FiveThirtyEight](https://github.com/fivethirtyeight/data/tree/master/election-forecasts-2020) as of their final forecast of 11/03/2020.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"result_cnt = (covid_check, { runs: 0, biden: 0, trump: 0 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"runit = {\n let runit = button({ value: \"run one\" });\n Object.assign(runit, {\n onclick: function() {\n make_result_map(run_one(covid_check));\n }\n });\n return runit;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"viewof covid_check = checkbox({\n options: [{ value: 'check', label: \"Covid Factor\" }],\n value: 'check'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"result_map = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"first_run = make_result_map(run_one())","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"function run_one(covid = false) {\n let results = [];\n let r, p;\n if (covid) {\n let c = Math.random();\n if (c < 0.8) {\n p = 2;\n } else {\n p = 1;\n }\n } else {\n p = 1;\n }\n for (let i = 0; i < data.length; i++) {\n let c = Math.random();\n if (c < data[i].pj ** p) {\n r = 'Biden';\n } else {\n r = 'Trump';\n }\n results.push(Object.assign({ result: r }, data[i]));\n }\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"proj = d3\n .geoIdentity()\n .reflectY(true)\n .fitSize([map_width, height], states)","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"map_width = 0.75 * width","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 0.625 * map_width","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"data = {\n let data = await FileAttachment(\n \"fivethirtyeight_electoral_probabilities@1.csv\"\n ).csv();\n data.forEach(o => {\n o.pj = parseFloat(o.pj);\n o.votes = parseInt(o.votes);\n });\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"states = {\n let map_file = await FileAttachment(\"states.json\").json();\n let states = topojson.feature(map_file, map_file.objects.states);\n return states;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"import { button, checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}