2b:null 2c:["$","title",null,{"children":"Electoral vs Popular Results | Mark McClure | Observable"}] 31:T1675,chart = { let xmin = 0.45; let xmax = 0.65; let ymin = 0.47; let ymax = 1; let w = 0.9 * width; let h = w * 0.6; // h = (w * (ymax - ymin)) / (xmax - xmin); let pad = 35; let xScale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let yScale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); let div = d3.create("div").style("width", `${w}px`).style("height", `${h}px`); let chart = div.append("svg").attr("width", w).attr("height", h); let lines = chart.append("g"); lines .append("line") .attr("x1", xScale(0.5)) .attr("x2", xScale(0.5)) .attr("y1", yScale(ymin)) .attr("y2", yScale(ymax)) .style("stroke", "black") .style("stroke-width", 1) .attr("stroke-dasharray", "2 3"); let pts = []; let x0 = 0.5006; let y0 = 0.58; let circles = chart.append("g"); for (let [year, d] of data) { let all_electoral_votes = d.map((o) => parseInt(o["Electoral Votes"])); let electoral_1st = all_electoral_votes[0]; let electoral_2nd = all_electoral_votes[1]; let total_electoral_votes = electoral_1st + electoral_2nd; let electoral_winner_electoral_proportion = electoral_1st / total_electoral_votes; let all_popular_votes = d.map((o) => parseInt(o["Popular Votes"])); let electoral_1st_popular_vote = all_popular_votes[0]; let electoral_2nd_popular_vote = all_popular_votes[1]; let total_popular_votes = electoral_1st_popular_vote + electoral_2nd_popular_vote; let electoral_winner_popular_proportion = electoral_1st_popular_vote / total_popular_votes; let x = electoral_winner_popular_proportion; let y = electoral_winner_electoral_proportion; pts.push([x, y]); let close_class; if (Math.abs(x - x0) < 0.005 && Math.abs(y - y0) < 0.005) { close_class = "close"; } else { close_class = "far"; } let circle = circles .append("circle") .attr("class", close_class) .attr("cx", xScale(x)) .attr("cy", yScale(y)) .attr("r", 3) .style("fill", "#ccc") .style("stroke", "black") .style("stroke-width", "0.5px") .on("mouseenter", function () { d3.select(this).attr("r", 5).style("stroke-width", "1.5px"); }) .on("mouseleave", function () { d3.select(this).attr("r", 3).style("stroke-width", "0.5px"); }); tippy(circle.node(), { allowHTML: true, content: `

${year}

Winner: ${d[0]["Candidate"]}

Popular percentage: ${d3.format( "0.2%" )(x)}

Electoral percentage: ${d3.format( "0.2%" )(y)}

Loser: ${d[1]["Candidate"]}

` }); } chart.selectAll(".close").each(function (_, i) { let c = d3.select(this); let this_y = c.attr("cy"); c.attr("cy", parseFloat(this_y) + (-1) ** i * 4); }); let regress = d3.regressionLinear().domain([xmin, xmax])(pts); let active = true; lines .append("line") .attr("x1", xScale(regress[0][0])) .attr("x2", xScale(regress[1][0])) .attr("y1", yScale(regress[0][1])) .attr("y2", yScale(regress[1][1])) .style("stroke", "black") .style("stroke-width", 1); // chart // .append('line') // .attr('x1', xScale(regress[0][0])) // .attr('x2', xScale(regress[1][0])) // .attr('y1', yScale(regress[0][1])) // .attr('y2', yScale(regress[1][1])) // .style('stroke', 'black') // .style('stroke-width', 3) // .style('opacity', 0); // chart // .append('circle') // .attr('cx', xScale(x0)) // .attr('cy', yScale(y0)) // .attr('r', 12) // .attr('fill', 'yellow') // .attr('stroke', 'black') // .attr('opacity', 0.2) // .on('mouseenter', function() { // chart.selectAll('.close').each(function(_, i) { // let c = d3.select(this); // let this_y = c.attr('cy'); // c.attr('cy', parseFloat(this_y) + (-1) ** i * 4); // }); // }); chart .append("g") .attr("transform", `translate(0, ${h - pad})`) .call(d3.axisBottom(xScale)); chart .append("g") .attr("transform", `translate(${pad})`) .call(d3.axisLeft(yScale)); let tree = d3.quadtree(pts); console.log(tree.find(0.5, 0.5, 1)); chart .on("mousemove", function (evt) { chart.selectAll(".predict").remove(); let mouse_x = xScale.invert(evt.layerX); let mouse_y = yScale.invert(evt.layerY); if (tree.find(mouse_x, mouse_y, 0.01) == undefined) { let predict_y = regress.predict(mouse_x); if (Math.abs(mouse_y - predict_y) < 0.01) { console.log(mouse_x); chart .append("circle") .attr("class", "predict") .attr("cx", evt.layerX) .attr("cy", yScale(predict_y)) .attr("r", 3) .style("fill", "#d00") .style("stroke", "black") .style("stroke-width", "1px"); chart .append("text") .attr("class", "predict") .attr("pointer-events", "none") .attr("x", evt.layerX) .attr("y", yScale(predict_y)) .attr("text-anchor", evt.layerX < 0.7 * w ? "start" : "end") .text( `input: ${d3.format("0.3f")( xScale.invert(evt.layerX) )}, prediction: ${d3.format("0.3f")(yScale.invert(evt.layerY))}` ); } } }) .on("mouseleave", function () { chart.selectAll(".predict").remove(); }); div.attr("a", regress.a); div.attr("b", regress.b); return div.node(); }32:[{"id":"d28ef07e512285d674e8e7194b5cbf41b572f2e344152d4246110e4190a36cbc2b92381930102ccb9c285b1985f94cd3569d732d540e3c10d1b6335c68b0472b","href":"https://static.observableusercontent.com/files/d28ef07e512285d674e8e7194b5cbf41b572f2e344152d4246110e4190a36cbc2b92381930102ccb9c285b1985f94cd3569d732d540e3c10d1b6335c68b0472b","name":"electoral_college_results@1.csv","type":"text/csv","lastModified":1604602836949.385,"size":4271}] 2f:{"id":"dbe8a3f6aae0a9d0","slug":null,"title":"Electoral vs Popular Results","thumbnail":"9f761c468bb19b0dd732db5e91b1a134c713ad17db64a17179c91633270c0e60","access_level":"unlisted","create_time":"$D2020-11-05T18:58:31.546Z","update_time":"$D2022-04-20T11:02:18.576Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":"starter_2024"},"version":309,"publish_version":309,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6471c0828df362f2","slug":"teaching-statistics","title":"Teaching Statistics","owner":{"id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure"}},"type":"notebook","body":{"title":"Electoral vs Popular Results","cells":[{"id":0,"value":"topmatter = md`# Electoral vs Popular Results\n\nEach dot in the chart below corresponds to a presidential election between 1876 and 2016, both of which are years that the electoral vote disagreed with the popular vote. The ${tex`x`}-coordinate of each point is determined by the proportion of votes won by the winner of the election and the ${tex`y`}-coordinate is determined by the proportion of electoral votes won by the winner of the election. I guess it's not good to be to the left of the dashed line.\n\nThe diagonal line is the regression line:\n${tex.block`y = ${d3.format(\"0.3f\")(\n chart.getAttribute(\"a\")\n)}x \\, - \\, ${d3.format(\"0.3f\")(-chart.getAttribute(\"b\"))}`}\n\nThus, given an input popular vote, we can obtain a predicted electoral vote. For example, if a candidate gets 56% of the popular vote, the model predicts the candidate might earn \n${tex.block`y = ${d3.format(\"0.3f\")(\n chart.getAttribute(\"a\")\n)}\\times 0.56 \\, - \\, ${d3.format(\"0.3f\")(-chart.getAttribute(\"b\"))} = 0.7414`}\nof the electoral vote.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`## Data and imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n let data = d3.group(\n await FileAttachment(\"electoral_college_results@1.csv\").csv(),\n o => o.year\n );\n for (let [y, d] of data) {\n d.sort(\n (c1, c2) =>\n parseInt(c1['Electoral Votes']) < parseInt(c2['Electoral Votes'])\n );\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3-selection@2\", \"d3-array@2\", \"d3-scale@2\", \"d3-axis@2\", \"d3-quadtree@2\", \"d3-format@2\", \"d3-regression@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"tippy = require(\"tippy.js@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"