30:T11ab,cartogram = { const height =600; const margin=50; const projection = d3.geoIdentity().reflectY(true).fitSize([width-margin,height-margin],topojson.feature(us, us.objects.hex)) const path = d3.geoPath().projection(projection); const svg = d3.select(DOM.svg(width,height)).style("width", "100%"); var tooltip = d3.select('body') .append("div") .attr("class", "tooltip") .attr("width",100).attr("height",101) .style("position", "absolute") .style("visibility", "hidden"); visibility().then(() => { let wins = function(f) { if(f) { return 1 } else { return 0.2 } } // district hexagons with tooltip svg.selectAll("hexagon") .data(input_data) .enter().append("path") .attr("fill", d => hex_color(d.candidates,d.properties.winner_was_predicted)['clr']) .attr("opacity",d => hex_color(d.candidates)['opacity']) .attr("d", path) .attr("class",d => "hex-tile hex-tile-"+d.properties.state) .attr("id",d => "hex-tile-"+d.properties.state+'-'+d.properties.district) .on("mouseover", function(d) { // fade everything d3.selectAll(".hex-tile").attr('opacity',0.4); // then reinstate state hex to the fore d3.selectAll('.hex-tile-'+d.properties.state).attr("opacity", d => hex_color(d.candidates,d.properties.winner_was_predicted)['opacity']-0.1); // state boundary svg.append("path") .datum(topojson.merge(cartography, cartography.objects.hex.geometries.filter( e=>e.properties.state === d.properties.state)) ) .attr("class","state-boundary") .attr("d",path) ; // highlight the selected district hex d3.select(this).attr("stroke-width", "3px").attr('stroke','#222').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) { d3.select('.state-boundary').remove() // return all hex tiles to correct opacity and hide tooltip tooltip.style("visibility", "hidden"); d3.select(this).attr("stroke-width", "0px").lower(); d3.selectAll(".hex-tile").attr("opacity",d => hex_color(d.candidates,d.properties.winner_was_predicted)['opacity']); }) // national boundary svg.append("path") .datum(topojson.mesh(cartography, cartography.objects.hex, function(a, b) { return a === b; })) .attr("stroke-width", "1px") .attr("stroke","#222") .attr("fill","none") .attr("d", path); }); // render legend const legend = svg.append("g") .style("font-size", "1.0rem") .style("font-family", "Helvetica Neue; sans-serif") const label = legend.append("text") .attr("y", 18) .attr("font-weight", "bold") .text("Key - Actual voteshare was within range predicted by:"); const scale = legend.append("g") const box_size=18; // 0, 1, 2, 3 versions of the model // pred winner 0, 4, 4, 4, // not pred winner 0, 5, 5, 5, var boxpos = function(d) { if (d===0) { return {x:0,y:36+1.2*box_size*d}; } else if (d===4) { return {x:0,y:36+1.2*box_size*1}; } else if (d===5) { return {x:0,y:36+1.2*box_size*2}; } else { return {x:200,y:36+1.2*box_size*(d-1)} } }; scale.selectAll("rect") .data([0,1,2,3,5]) .enter().append("rect") .attr("height", box_size).attr("width", box_size) .attr("x",d=>boxpos(d).x) .attr("y",d=>boxpos(d).y) .attr("fill", d => color(d)); const txt=['no versions of the model','1 vers of the model','2 vers of the model','all 3 vers of model','winner not predicted','winner not predicted'] legend.selectAll("cat") .data([0,1,2,3,5]) .enter().append('text') .attr("x",d=>boxpos(d).x+25) .attr("y",d=>boxpos(d).y) .attr("dy",box_size*0.8) .text(d=>txt[d]) .attr("font-size",14); return svg.node(); }31:T515,md` FiveThirtyEight produced various models for predicting the results of the US midterms. One of these models predicted results for the House of Congress. It produced predictions for the share of the vote won by each candidate. In a podcast, Nate Silver asked listeners to judge the model by checking the results district-by-district and seeing if the outcome at the election was within the range of predictions. I decide to look at how often the winning candidate's actual vote share fell within the range predicted by the model and to visualise this as in interactive cartogram. In the chart below each hexagon represents a congressional district. The districts are shaded to show how the model performed. They are green when the candidate's share of the vote falls within at least one the model's prediction ranges and yellow if not. If you hover over a district a pop-up will show more information about the results. For each candidate the bright green line shows the candidates actual share of the vote while the 3 bars behind the line indcate the range of the predictions of that candidates voteshare for each of the 3 models. Only in a few districts are there any surprises - where the winning candidates actal voteshare was not within the range predicted by any versions of the model. `32:T810,swing_data = { var races = []; return _.filter(input_data.map( function (district) { let o = new Object(); if (district.candidates.length !== 2) { return null } let republican = _.find(district.candidates, e => e.party === "R") let democrat = _.find(district.candidates, e => e.party === "D") if (_.isUndefined(republican) || _.isUndefined(democrat)) { return null; } let vs={ d: democrat.voteshare === 0 ? 100 : democrat.voteshare, r: republican.voteshare === 0 ? 100 : republican.voteshare }; o['race']=district.candidates[0].state + '-' + district.candidates[0].district; o['republican']={ name: _.find(district.candidates, e => e.party === 'R' ).candidate, winner: _.find(district.candidates, e => e.party === 'R' ).winner } o['democrat']={ name: _.find(district.candidates, e => e.party === 'D' ).candidate, winner: _.find(district.candidates, e => e.party === 'D' ).winner } o['swing']= { to_d: { classic: vs.d - democrat.models['classic'].voteshare, lite: vs.d - democrat.models['lite'].voteshare, dlux: vs.d - democrat.models['deluxe'].voteshare }, to_r: { classic: vs.r - republican.models['classic'].voteshare, lite: vs.r - republican.models['lite'].voteshare, dlux: vs.r - republican.models['deluxe'].voteshare } } o['outlier']= { lite: (vs.d < democrat.models['lite'].voteshare_lo) || (vs.d > democrat.models['lite'].voteshare_hi), classic: (vs.d < democrat.models['classic'].voteshare_lo) || (vs.d > democrat.models['classic'].voteshare_hi), deluxe: (vs.d < democrat.models['deluxe'].voteshare_lo) || (vs.d > democrat.models['deluxe'].voteshare_hi) } return o }), d => d) } 33:Tec1,outsider_districts = { var candidate_deltas = []; input_data.map( function (district) { district.candidates.map( function (c) { if (c.hasOwnProperty('models')) { var vs=c.voteshare; if (vs===0) { vs = 100 }; candidate_deltas.push( { candidate:c.candidate, party:c.party, state:c.state, district:c.district, sdistrict:c.state+'-'+c.district, actual_vs: vs, predicted_vs: { lite: c.models['lite'].voteshare, classic: c.models['classic'].voteshare, deluxe: c.models['deluxe'].voteshare, lite_lo: c.models['lite'].voteshare_lo, classic_lo: c.models['classic'].voteshare_lo, deluxe_lo: c.models['deluxe'].voteshare_lo, lite_hi: c.models['lite'].voteshare_hi, classic_hi: c.models['classic'].voteshare_hi, deluxe_hi: c.models['deluxe'].voteshare_hi }, delta_vs: { lite: c.models['lite'].voteshare - vs, classic: c.models['classic'].voteshare - vs, deluxe: c.models['deluxe'].voteshare - vs }, extent_delta_vs: d3.extent([ c.models['lite'].voteshare - vs, c.models['classic'].voteshare - vs, c.models['deluxe'].voteshare - vs]), a_outside_pred: { lite: (vs < c.models['lite'].voteshare_lo) || (vs > c.models['lite'].voteshare_hi), classic: (vs < c.models['classic'].voteshare_lo) || (vs > c.models['classic'].voteshare_hi), deluxe: (vs < c.models['deluxe'].voteshare_lo) || (vs > c.models['deluxe'].voteshare_hi) }, mean_delta_vs: ((c.models['lite'].voteshare - vs) + (c.models['classic'].voteshare - vs) + (c.models['deluxe'].voteshare - vs))/3 }); } }); }); // For now filter out any non-republican candidates candidate_deltas = _.filter(candidate_deltas, d => (d.party==='D') || (d.party==='R')) // Find the candidates that fell outside the predicted range on any model var outsider_candidates = _.filter(candidate_deltas, e => true) // e.a_outside_pred.lite && // e.a_outside_pred.classic && // e.a_outside_pred.deluxe); outsider_candidates = _(outsider_candidates) .groupBy(o => o.sdistrict) .filter(o=>o.length===2) .flatten().value(); // want to build a set of the races that included outsiders, not just the candidates // find the district names with an outsider candidate (ordered from most to least delta) let outsider_districts = _(outsider_candidates) .sortBy(e => Math.abs(e.mean_delta_vs)) .map(e => e.sdistrict) .uniq() .value(); // then pick out all that candidates that are in those districts and let t = _.filter(candidate_deltas, e => (outsider_districts.indexOf(e.sdistrict) > -1)) // now make sure these are ordered to reflect larger deltas t=_(t).sortBy(o => outsider_districts.indexOf(o.sdistrict)) .map(function (o,i) { let r=o; r['did']=Math.floor(i/2); return r}) .value(); return t; } 34:T7c6,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 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'] } let predicted_winner = _.maxBy(v.candidates, function(o) { return o.models.classic.winprob; }) let winner = _.maxBy(v.candidates, 'winner') if (predicted_winner.candidate === winner.candidate) { v['properties']['winner_was_predicted']=true } else { v['properties']['winner_was_predicted']=false } } catch(err) { console.log("ERROR matching district",district); } return v; }); return combined; } 35:T57b,hex_color = function(o, pred_winner) { // 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 points = 0; if ((ff_candidate.voteshare >= ff_candidate.models.classic.voteshare_lo) && (ff_candidate.voteshare <= ff_candidate.models.classic.voteshare_hi)) { points+=1; } if ((ff_candidate.voteshare >= ff_candidate.models.lite.voteshare_lo) && (ff_candidate.voteshare <= ff_candidate.models.lite.voteshare_hi)) { points+=1; } if ((ff_candidate.voteshare >= ff_candidate.models.deluxe.voteshare_lo) && (ff_candidate.voteshare <= ff_candidate.models.deluxe.voteshare_hi)) { points+=1; } if (!pred_winner && points==0) { points=4 } if (!pred_winner && points>0) { points=5 } return({opacity:1.0,clr:color(points)}); }36:T126c,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.slice(-1)) { 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, 'winprob': objs[0].models.classic.winprob, 'precinctsreportingpct':objs[0].precinctsreportingpct, 'party': _.sumBy(objs, 'party'), 'winner': objs[0].winner })) .value(); candidates = _.orderBy(candidates,['modelled_voteshare'],['desc']); let winning_party=''; let winning_colour='#eeeeee' let winpred_str=''; // predicted winner has highest probability according to classic model 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+''; winning_party = c.party //predcited_winner = } let predicted_winner = _.maxBy(candidates, 'winprob'); if (predicted_winner.winner) { winpred_str = "✓ winner predicted" } else { winpred_str = "❌ winner not predicted" } 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]' } if (winning_party==='R') { winning_party='REPUBLICAN'; winning_colour='#E91D0Ecc' } if (winning_party==='D') { winning_party='DEMOCRAT'; winning_colour='#0015BCcc' } return `

`+titlestr+`

`+winning_party+`

`+winpred_str+`

(`+d[0].precinctsreportingpct100+`% precincts reported)
`+trows+`

Vote Share (%)

Candidate Actual Forecast Delta from
Classic Mid

` } 37:T4c8,html``38:[] 2e:{"title":"The FiveThirtyEight House Forecast 2018","cells":[{"id":2461,"value":"md`# The FiveThirtyEight House Forecast 2018\n_Understanding the how the models faired in predicting voteshare in the 2018 mid-terms_`\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2401,"value":"md`Overall it appears that voteshares were mostly in line with the model predictions. One exception is the clustering of vote share 'misses' on the West Coast. Vote shares in California don't seem to match the ranges predicted by the model.\n\nWas there any bias to these prediction misses that might provide something interesting to dig into about how the candidates races went or what assumptions were made in the model?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2347,"value":"isoutlier = function(d) {\n let mode='strong'\n switch(mode) {\n case 'strong':\n return (d.outlier.classic && d.outlier.lite && d.outlier.deluxe);\n \n case 'weak':\n return (d.outlier.classic || d.outlier.lite || d.outlier.deluxe);\n }\n \n }\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2246,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"color = d3.scaleLinear() // D3 Version 4\n .domain([0, 1, 2, 3, 4,5])\n //.range([\"#ffcb05\", \"#51CE9A\", \"#3BC88D\", \"#26C281\",\"#663333\",\"#333366\"])\n .range([\"#ffcb05\",'#e5f5f9','#99d8c9','#2ca25f',\"#663333\",\"#333366\"])\n //.range([\"#ffcb05\",\"#bae4b3\",\"#74c476\",\"#238b45\"])\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"cartography = {\n var raw_cartography = await d3.json(\"https://projects.fivethirtyeight.com/2018-midterm-election-forecast/house/carto.topo.json\")\n\n \n // add state boundaries object\n raw_cartography['objects']['states']={type:\"GeometryCollection\", geometries:[]}\n \n var states = _.uniq(_.map(raw_cartography.objects.hex.geometries, d => d.properties.state));\n for (var s in states) {\n let state=states[s];\n let ms = topojson.mergeArcs(raw_cartography, raw_cartography.objects.hex.geometries.filter(\n d => d.properties.state === state));\n ms['properties']={state:state};\n raw_cartography['objects']['states']['geometries'].push(ms);\n \n } \n return raw_cartography;\n}\n","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.votepct100.;\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":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"tipwidth = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"$36","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+125; \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":1639,"value":"topojson.feature(cartography, cartography.objects.states).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2423,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2445,"value":"s=svg``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}