31:T4b8,md`# US Elections 2018 # The FiveThirtyEight House Forecast _Please note: This is purely for private study and exploring Observable notebooks: I've boosted the prediction data and cartogram files from [FiveThirtyEight](http://fivethirtyeight.com/) and scraped the results data from [Politico](https://www.politico.com/election-results/2018/). All the hard work has been done by these guys and all mistakes will be mine. _ Nate Silver encouraged podcast listeners such as myself to understand the performance of the [house model](https://projects.fivethirtyeight.com/2018-midterm-election-forecast/house) by looking at a state-by-state, or district-by-district level. This first notebook adopts a simple of metric: Was the actual voteshare for Congressional House districts within the range predicted by the model? The cartogram below shows the House districts. The distrcts are coloured yellow if the actual voteshare of the leading candidate (as per the prediction) was outside of the upper and lower bounds predicted by the model. I believe these bounds represent 80% of the predicted outcomes. Hovering over the districts provides a more detailed breakdown of the predictions and actual voteshares.`32:T751,input_data = { const districts = _.groupBy(topojson.feature(cartography, cartography.objects.hex).features,d => d.properties.state+'-'+correctZeroDistrict(d.properties.district)); const forecasts = _.groupBy((await d3.json("https://projects.fivethirtyeight.com/2018-midterm-election-forecast/house/home.json")).districtForecasts,d => d.state+'-'+d.district); //var actuals_raw = _.groupBy(await d3.csv("https://gist.githubusercontent.com/wooduk/ad36ca26b2523271405ac3a498e24056/raw/8ba52c9c3ca8b785138d265d2942aef88caf3441/actuals.csv"), d => d.state+'-'+d.district); //var actuals_raw = results_by_district; var combined=_.map(_.keys(results_by_district), function (district) { let actuals = results_by_district[district]; var fc = forecasts[district][0].forecast; var state_name = districts[district][0]['properties']['name']; // add the forecasts to the candidate actuals var cand_info=_.map(actuals, function (candidate) { // take an actual and find the forecast information for that candidate let target_name = fuzzyNameMatch(candidate.candidate, _.map(fc,'candidate')); if (target_name) { let f = _.find(fc,{candidate:target_name}) let merged = {...candidate, ...f, ...{statename:state_name}}; return merged; } else { console.log("Couldn't match candidate "+candidate.candidate) return candidate; } }); try { var v = { geometry:districts[district][0]['geometry'], candidates: cand_info, properties:districts[district][0]['properties'], type:districts[district][0]['type'], id:districts[district][0]['id'] } } catch(err) { console.log("ERROR matching district",district); } return v; }); return combined; } 33:T55e,hex_color = function(o) { // determine hexagon shading from actual and forecast voteshare const no_info_result = {opacity:0.3,clr:'#aaa'}; const fail_color='#ffcb05'; const pass_color='#26c281'//; const uncontested_result = {opacity:1.0,clr:pass_color}; // select candidate with highest forecast in deluxe model if (o.length===1) { return uncontested_result; } var ff_candidate=_.head(_.orderBy(_.filter(o,e=>e.hasOwnProperty('models')),['models.deluxe.voteshare'],['desc'])); if (!ff_candidate.hasOwnProperty('models')) { console.log("No forecast: ",ff_candidate); return no_info_result; } var opacity = 0.7; var rtn_color = fail_color; if ((ff_candidate.voteshare >= ff_candidate.models.classic.voteshare_lo) && (ff_candidate.voteshare <= ff_candidate.models.classic.voteshare_hi)) { opacity+=0.1; rtn_color=pass_color; } if ((ff_candidate.voteshare >= ff_candidate.models.lite.voteshare_lo) && (ff_candidate.voteshare <= ff_candidate.models.lite.voteshare_hi)) { opacity+=0.1; rtn_color=pass_color; } if ((ff_candidate.voteshare >= ff_candidate.models.deluxe.voteshare_lo) && (ff_candidate.voteshare <= ff_candidate.models.deluxe.voteshare_hi)) { opacity+=0.1; rtn_color=pass_color; } return({opacity:opacity,clr:rtn_color}); }34:T897,function cartogram(height,visibility = () => Promise.resolve()) { const projection = d3.geoIdentity().reflectY(true).fitSize([width,height],topojson.feature(us, us.objects.hex)) const path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width,height)).style("width", "100%").style("height", "auto"); var tooltip = d3.select('body') .append("div") .attr("class", "tooltip") .attr("width",100).attr("height",101) .style("position", "absolute") .style("visibility", "hidden"); visibility().then(() => { // district hexagons with tooltip svg.selectAll("path") .data(input_data) .enter().append("path") .attr("fill", d => hex_color(d.candidates)['clr']) .attr("opacity",d => hex_color(d.candidates)['opacity']) .attr("d", path) .attr("class",d => d.properties.state) .on("mouseover", function(d) { // fade everything d3.selectAll("path").attr('opacity',0.4); // then reinstate state hex to the fore d3.selectAll('.'+d.properties.state).attr("opacity",d => hex_color(d.candidates)['opacity']-0.1); // highlight the selected district hex d3.select(this).attr("stroke-width", "2px").attr('stroke','#eee').raise(); // create the tooltip and show tooltip.html(tooltip_html(d.candidates)); var pos = calc_tooltip_xy(d3.event.pageX,d3.event.pageY); tooltip.style("top", pos.y + "px").style("left", pos.x + "px"); tooltip.style("visibility", "visible"); }) .on("mouseout", function(d) { // return all hex tiles to correct opacity and hide tooltip tooltip.style("visibility", "hidden"); d3.select(this).attr("stroke-width", "0px").lower(); d3.selectAll("path").attr("opacity",d => hex_color(d.candidates)['opacity']); }) // national boundary svg.append("path") .datum(topojson.mesh(cartography, cartography.objects.hex, function(a, b) { return a === b; })) .attr("stroke-width", "2px") .attr("stroke","#222") .attr("fill","none") .attr("d", path); }); return svg.node(); }35:Td67,function tooltip_html(d) { var f = d3.format(".1f"); var f2 = d3.format("+.1f"); var trows = ''; const scaler = 2; var uncontested; let state_name = _.head(d).statename; var district_name = function(d) { var suffix='' switch (+d) { case(1): suffix = 'st'; break; case(2): suffix = 'nd'; break; case(3): suffix = 'rd'; break; default: suffix='th' } return( d+'^'+suffix+'') } var candidates = _(d).groupBy('candidate').map((objs, key) => ({ 'candidate': key, 'voteshare': _.sumBy(objs, 'voteshare'), 'votecount': _.sumBy(objs, 'votecount'), 'modelled_voteshare': _.sumBy(objs, 'models.classic.voteshare'), 'models': objs[0].models, 'party': _.sumBy(objs, 'party'), 'winner': objs[0].winner })) .value(); candidates = _.orderBy(candidates,['modelled_voteshare'],['desc']); var trows = candidates.map( function (c) { if (!c.hasOwnProperty('models') || _.isUndefined(c.models)) { var _c = null; var models_str = ' '; } else { let m = c.models; var _c = m.classic.voteshare; var _c0 = m.classic.voteshare_lo; var _c1 = m.classic.voteshare_hi; var _l = m.lite.voteshare; var _l0 = m.lite.voteshare_lo; var _l1 = m.lite.voteshare_hi; var _d = m.deluxe.voteshare; var _d0 = m.deluxe.voteshare_lo; var _d1 = m.deluxe.voteshare_hi; models_str = ` `; } let voteshare_diff = c.voteshare - _c; let candidate_string = c.candidate+' ('+c.party+')' if (c.winner && (c.votecount===0)) { uncontested=true } if (c.winner) { candidate_string = ''+candidate_string+'' } return ` `+candidate_string+` `+f(c.voteshare)+` `+f2(voteshare_diff)+` ` }).join("") let titlestr = _.startCase(_.toLower(state_name))+` `+district_name(_.head(d).district); if (uncontested) { titlestr += ' [UNCONTESTED]' } return `

`+titlestr+`

`+trows+`

	Vote Share (%)
Candidate	Actual	Forecast	Delta from Classic Mid

` } 36:[] 2f:{"title":"US Elections 2018","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"cartogram(600)","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"cartography = await d3.json(\"https://projects.fivethirtyeight.com/2018-midterm-election-forecast/house/carto.topo.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"us = d3.json(\"https://projects.fivethirtyeight.com/2018-midterm-election-forecast/house/carto.topo.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"value":"_.find(input_data, {'properties':{'state':'TX','district':24} })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"results_by_district = {\n const prune_list=['candidate','party','voteshare','votecount','state','district',\n 'precinctsreporting','precinctstotal','precinctsreportingpct','polid','winner'];\n \n var results = await d3.json(\"https://www.politico.com/election-results/2018/house/state.json\")\n \n var t = _.map(results, function (r) {\n\n r['voteshare']=r.votepct*100.;\n var candidate = candidate_lookup[r.polid];\n r['candidate']=candidate['candidate'];\n r['party']=candidate['party'];\n r['district']=r['seatnum'];\n r['state']=r['statepostal'];\n \n return _.pick(r,prune_list)\n }\n )\n var results_by_district = _.groupBy(t, r => r.state + '-' + r.district);\n return results_by_district\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"context = d3.json(\"https://www.politico.com/election-results/2018/house/context.json\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"correctZeroDistrict = d => (d == 0) ? 1 : d ","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"tipwidth = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"calc_tooltip_xy = function(eventX,eventY) {\n var X;\n var Y;\n //var x = eventX-(tipwidth/2);\n //if (eventX+(tipwidth/2) > width) { x = width - 650; } \n //if (eventX-325 < 0) { x = 0; }\n if (eventX > 500) {\n X = eventX-tipwidth-150;\n } else {\n X = eventX+50; \n }\n if (eventY > 1400) {\n Y = 1400;\n } else {\n Y = eventY; \n }\n \n return({x:X,y:Y-150})\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"candidate_lookup = {\n var p = function(party) { \n if (party==='Dem') { return 'D' }\n if (party==='GOP') { return 'R' }\n return party \n }\n \n var candidates = new Object();\n _.map(context.elections, function(e){ \n var r = _.map(e.candidates, function (c) { \n var cname = c.first_name;\n if (c.middle_name !== null) { cname+=' '+c.middle_name }\n cname+=' '+c.last_name;\n if (c.suffix !== null) { cname+=' '+c.suffix }\n \n var y= { \n party:p(c.party), \n candidate:cname.trim(),\n ap_election_id:e.ap_election_id\n };\n var c=c.ap_candidate_id.split('-')[1];\n \n \n\n candidates[c]=y;\n\n \n });\n });\n return candidates;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"fuzzyNameMatch = function (name,names) {\n \n var tokens = name.split(' ');\n var scores = [];\n for (var i=0; i names[i].indexOf(t) > -1).reduce((a,b) => a + b,0));\n }\n \n if (_.sum(scores)==0) {\n //console.log(name,names,scores);\n return 'Others';\n } else {\n let j = scores.indexOf(Math.max(...scores));\n return names[j];\n }\n \n}\n \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"_=require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"forecasts = _.groupBy((await d3.json(\"https://projects.fivethirtyeight.com/2018-midterm-election-forecast/house/home.json\")).districtForecasts,d => d.state+'-'+d.district)['TX-24']","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"results_by_district['PA-18']\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}