31:T42f,md`The following flow chart outlines the process of making FiveThirtyEight's ["Who Will Win The 2020 Democratic Primary?"](https://projects.fivethirtyeight.com/2020-primary-forecast/?ex_cid=rrpromo) forecast. It's a graphical rendering of what's already a high-level description of their [methodology](https://fivethirtyeight.com/features/how-fivethirtyeight-2020-primary-model-works/). As with any process of visualizing information (and translation per se), some elements are prone to be left out or misrepresented. I'd recommend reading this along with the methodology itself. After reading the entire chart, scroll down to see the steps in making it, which also correspond to the steps in the methodology. I'd also appreciate tips on improving it. If you have any, please reach out to me at *dkn259 at nyu dot edu*. Many thanks to Tom MacWright for the *[elkjs](https://github.com/OpenKieler/elkjs)* infrastructure. You can learn more about using *elkjs* to draw graphs in Observable [here](https://observablehq.com/@observablehq/notebook-visualizer-elk-edition).`32:[] 2f:{"title":"FiveThirtyEight's 2020 Primary Forecast Methodology, Visualized","cells":[{"id":0,"value":"md`# FiveThirtyEight's 2020 Primary Forecast Methodology, Visualized`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"drawGraph(vars)","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"html`\n

\n \n Blue nodes represent inputs, while green nodes represent outputs.\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"vars = data.map(d => new Node(d.name, +d.id, parseString(d.inputs)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`___\n### Step 1: Calculate national and state polling averages and translate them into a polling-based forecast`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"drawGraph(var1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"var1 = {\n const result = filterStep(data, 1);\n const to_delete = [3, 4];\n result.forEach(v => {\n if (to_delete.indexOf(v.id) !== -1) {\n v.inputs = [2];\n }\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`___\n### Step 2: Calculate a non-polling forecast for each state based on demographics, geography and state fundrasing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"drawGraph(var2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"var2 = {\n const result = filterStep(data, 2);\n result.forEach(v => {\n if (v.id === 29) {\n v.inputs = v.inputs.filter(i => i < v.id);\n }\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`___\n### Step 3: Begin simulating the rest of the primary process, starting with day-to-day movement in the polls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"drawGraph(var3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"html`\n

\n \n The inputs Polling-based forecast and Non-polling forecast are the two outputs in Steps 1 and 2.\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"var3 = {\n const result = filterStep(data, 3);\n const to_delete = [4, 7, 30];\n result.forEach(v => {\n if (to_delete.indexOf(v.id) !== -1 && v.inputs.length != 0) {\n v.inputs = [];\n }\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`___\n### Step 4: Simulate state and district results — accounting for uncertainty — and allocate delegates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"drawGraph(var4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"html`\n

\n \n Demographic component is also present in Step 2. This step reveals that random perturbations are simulated among demographic groups to reflect the assumption that \"forecast error is partially correlated from state to state among demographic lines.\"\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"var4 = {\n const result = filterStep(data, 4);\n result.forEach(v => {\n if (v.id === 29) {\n v.inputs = v.inputs.filter(i => i === 42);\n }\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`___\n### Step 5: Simulate bounces (or crashes) from winning (or losing) primaries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"drawGraph(var5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"html`\n

\n \n The input Forecasted primary/caucus results & delegate allocation is the output in Step 4.\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"var5 = {\n const result = filterStep(data, 5);\n result.forEach(v => {\n if (v.id === 48) {\n v.inputs = [];\n }\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`___\n### Step 6: Forecast the probability that candidates drop out`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"drawGraph(var6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"html`\n

\n \n We'll consider Anticipated dropouts to be the output in this step. After a candidate drops out, most of their votes are reassigned to other candidates, while some go back to the undecided pool.\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"var6 = {\n const result = filterStep(data, 6);\n const to_delete = [3, 4];\n result.forEach(v => {\n if (to_delete.indexOf(v.id) !== -1) {\n v.inputs = v.inputs.filter(i => i >= 57);\n }\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`___\n### Final installment`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"drawGraph(var7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"html`\n

\n \n The inputs Simulation after one day, Forecasted primary/caucus results & delegate allocation, Anticipated bounces/crashes and Anticipated dropouts are the outputs in Steps 3, 4, 5 and 6, respectively.\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"var7 = {\n const result = filterStep(data, 7);\n const to_delete = [39, 48, 56, 69];\n result.forEach(v => {\n if (to_delete.indexOf(v.id) !== -1) {\n v.inputs = [];\n }\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`___\n### *Utilities*\n\nMore technical gobbledygook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"import { elky } from \"@tmcw/elk@260\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"data = d3.csv(\n \"https://duynguyen1678-cors.herokuapp.com/https://docs.google.com/spreadsheets/d/e/2PACX-1vTzagntWaLrSWmzfaREK7wiCpMFOaDTyOD9bKHx4wJDwkmR3kJY_TbZnbJvpBfT7eEF7PMgomtrJvlZ/pub?gid=0&single=true&output=csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"class Node {\n constructor(name, id, inputs) {\n this.name = name;\n this.id = id;\n this.inputs = inputs;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"nodeColor = (v, variables) => {\n if (v.inputs.length === 0) {\n return \"blue\";\n }\n /*let input_ids = [];\n variables.forEach(v => {\n input_ids = input_ids.concat(v.inputs);\n });\n const max_id = d3.max(input_ids);*/\n const max_id = d3.max(variables, v => v.id);\n //if (v.inputs.indexOf(max_id) === -1) {\n if (v.id !== max_id) {\n return \"black\";\n } else {\n return \"green\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"drawGraph = variables => {\n let children = [];\n let edges = [];\n let eId = 0;\n for (let v of variables) {\n children.push({\n label: v.name,\n id: v.name,\n fill: nodeColor(v, variables)\n });\n for (let i of v.inputs) {\n edges.push({\n id: `e${eId++}`,\n targets: [v.name],\n sources: [vars[i].name]\n });\n }\n }\n let graph = {\n id: \"root\",\n layoutOptions: { \"elk.algorithm\": \"layered\" },\n children,\n edges\n };\n let g = elky(graph);\n g.value = graph;\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"filterStep = (data, step) => {\n return data\n .filter(d => parseString(d.steps).indexOf(step) !== -1)\n .map(d => new Node(d.name, +d.id, parseString(d.inputs)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"parseString = string =>\n string.length === 0 ? new Array() : string.split(\",\").map(d => +d)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}