31:T46e,{ let data = [] selRace.values .forEach(county => { data = data.concat(county.values.filter(d => ['dem','gop','lib'].includes(d.party))) }) return vegaEmbed({ // data: {values: histResults.filter(d => d.race === singleRace // && d.county !== 'total' // && ['dem','gop','lib'].includes(d.party) // ) // }, data: {values: data}, title: `MT ${selRace.displayLabel}`, mark: {type: 'bar', size: 14}, width: 600, height: 50, encoding: { y: {field: "candidate", type: "ordinal", sort: {"op": "sum", "field": "votes", order: 'descending'}, axis: {title: ''}, }, x: {aggregate: 'sum', field: "votes", type: "quantitative", "scale": {"domain": [0,400000]}, "axis": {"title": "Votes", orient: 'top', domain: false}, }, // detail: {field: 'county'}, color: {field: 'party', type: 'nominal', scale: { domain: Object.keys(partyColors), range: Object.values(partyColors)}} } }) }32:T56e,{ const incCounties = ['Missoula', 'Silver Bow', 'Yellowstone', 'Flathead','Gallatin','Flathead','Lewis & Clark','Ravalli', 'Cascade'] let data = [] selRace.values .filter(county => incCounties.includes(county.key)) .forEach(county => { data = data.concat(county.values) }) // return data return vegaEmbed({ data: {values: data}, width: 600, title: `MT ${selRace.displayLabel}: Margins in key counties`, encoding: { y: {field: "county", type: "ordinal", axis: {title: ''}, }, x: {field: "votes", type: "quantitative", "scale": {"domain": [0,60000]}, "axis": {"title": "Votes", orient: 'top', domain: false}, }, }, layer: [ { mark: 'line', data: {values: data.filter(d => d.party === 'dem' || d.party === 'gop')}, encoding: { detail: {field: 'county', type: 'nominal',}, color: {value: '#444', type: 'nominal'}, } }, { mark: { type: "circle", size: 200, opacity: 1, // style: {opacity: 0.2}, }, encoding: { color: {field: 'party', type: 'nominal', fillOpacity: 0.9, scale: { domain: Object.keys(partyColors), range: Object.values(partyColors)}} } }, ], }) }33:T476,// { // const incCounties = ['Missoula', 'Silver Bow', 'Yellowstone', 'Flathead','Gallatin','Flathead','Lewis & Clark','Ravalli', 'Cascade'] // let data = [] // selRace.values // .filter(county => incCounties.includes(county.key)) // .forEach(county => { data = data.concat(county.values) }) // // return data // return vegalite({ // data: {values: data}, // width: 800, // height: 20, // mark: { // type: "bar", // size: 5, // opacity: 1, // // style: {opacity: 0.2}, // }, // encoding: { // y: {agg: 'sum', field: "party", type: "nominal", // axis: {title: '', labels: false, ticks: false}, // }, // x: {field: "votes", type: "quantitative", // "scale": {"domain": [0,50000]}, // "axis": {"title": "Votes", orient: 'top', domain: false}, // }, // row: {field: 'county', type: 'nominal'}, // color: {field: 'party', type: 'nominal', fillOpacity: 0.9, // scale: { // domain: Object.keys(partyColors), // range: Object.values(partyColors)}} // } // }) // }34:T8e0,// { // const incCounties = ['Missoula', 'Silver Bow', 'Yellowstone', 'Flathead','Gallatin','Flathead','Lewis & Clark','Ravalli', 'Cascade'] // let data = [] // selRace.values // .filter(county => incCounties.includes(county.key)) // .forEach(county => { data = data.concat(county.values) }) // // return data // return vegalite({ // data: {values: data}, // width: 400, // encoding: { // y: {field: "county", type: "ordinal", // axis: {title: ''}, // }, // x: {field: "votes", type: "quantitative", stack: 'null', // // "scale": {"domain": [-20000,20000]}, // // "axis": {"format": "$,.0s"}, // }, // }, // layer: [ // // { // // mark: 'line', // // data: {values: data.filter(d => d.party === 'dem' || d.party === 'gop')}, // // encoding: { // // detail: {field: 'county', type: 'nominal',}, // // color: {value: '#444', type: 'nominal'}, // // } // // }, // { // mark: { // type: "bar", // size: 15, // opacity: 1, // // style: {opacity: 0.2}, // }, // encoding: { // color: {field: 'party', type: 'nominal', fillOpacity: 0.9, // scale: { // domain: Object.keys(partyColors), // range: Object.values(partyColors)}} // } // }, // { // mark: { // type: "bar", // // size: 10, // opacity: 1, // // style: {opacity: 0.2}, // }, // encoding: { // x: {field: 'votes', type: 'quantitative', aggregate: 'q3'}, // color: {value: '#61457a'} // // color: {field: 'party', type: 'nominal', fillOpacity: 0.9, // // scale: { // // domain: Object.keys(partyColors), // // range: Object.values(partyColors)}} // } // }, // { // mark: { // type: "bar", // opacity: 0.5, // }, // encoding: { // x: {field: 'votes', type: 'quantitative', aggregate: 'q1'}, // color: {value: partyColors.lib} // } // }, // ], // }) // }35:T1529,drawSingleRaceMarginsMap = (opts) => { const dataLayer = opts.dataLayer const plotDim = opts.plotDim const maxRadius = opts.maxRadius || 15 const maxDimVal = opts.maxDimVal || 30000 const markerStyle = opts.markerStyle || {} // defaults to values below const markerOpacity = markerStyle.opacity || 1 const markerFill = markerStyle.fill || '#228' const markerFillOpacity = markerStyle.fillOpacity || 0.25 const markerStroke = markerStyle.stroke || markerFill const markerStrokeWidth = markerStyle.strokeWidth || 1 const markerStrokeOpacity = markerStyle.strokeOpacity || 0.9 const baseLayer = opts.baseLayer || dataLayer const baseLayerStyle = opts.baseLayerStyle || {} // defaults to values below const baseOpacity = baseLayerStyle.opacity || 1 // const baseFill = baseLayerStyle.fill || (d => '#ddd') const baseFillOpacity = baseLayerStyle.fillOpacity || 1 const baseStroke = baseLayerStyle.stroke || '#fff' const baseStrokeWidth = baseLayerStyle.strokeWidth || 1 const baseStrokeOpacity = baseLayerStyle.strokeOpacity || 1 const height = opts.height || 300 // width comes predefined const margin = opts.margin || {top: 10, left: 40, right: 40, bottom: 10} const projection = opts.projection || d3.geoMercator() // Dimensional calcs const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style('border', '1px solid #ddd') const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) projection.fitSize([plotWidth, plotHeight], baseLayer) // Scales const path = d3.geoPath() .projection(projection); // Drawing function drawFeatures(features){ const shapes = plot.append('g') .attr('class', '.feature-container'); shapes.selectAll('.feature') .data(features).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', baseOpacity) .attr('fill', d => opts.fillColorScale(d.properties[plotDim])) .attr('fill-opacity', baseFillOpacity) .attr('stroke', baseStroke) .attr('stroke-width', baseStrokeWidth) .attr('stroke-opacity', baseStrokeOpacity) } function drawCustomFeatures(features, opts){ const shapes = plot.append('g') .attr('class', '.feature-container'); shapes.selectAll('.feature') .data(features).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', opts.opacity || baseOpacity) .attr('fill', opts.fill) .attr('fill-opacity', opts.opacity || baseFillOpacity) .attr('stroke', opts.stroke || baseStroke) .attr('stroke-width', opts.strokeWidth || baseStrokeWidth) .attr('stroke-opacity', opts.strokeOpacity || baseStrokeOpacity) } function addColorLegend(scale){ // relies on d3-legend const legend = d3Legend.legendColor() .scale(scale) .title('County margin') .shapeWidth(20) .shapeHeight(30) .orient('vertical') .shapePadding(35) .cells([-10000,-5000,-1000,0,1000,5000,10000]) .labelFormat(d3.format('+,.0s')) .labelOffset(30) .ascending(true) const legendGroup = svg.append('g') .attr('class', 'scaleLegend') .attr('transform', 'translate(50,50)') .attr('font-family', 'sans-serif') .attr('font-size', 13) .call(legend) legendGroup.select('.legendTitle').attr('dy', -10) legendGroup.selectAll('.label').attr('dy', 15) } // function addColorLegend(scale){ // // relies on d3-legend // const legend = d3Legend.legendColor() // .scale(scale) // .title('County margin') // .shapeWidth(30) // .shapeHeight(10) // .orient('horizontal') // .shapePadding(35) // .cells([-10000,-5000,-1000,0,1000,5000,10000]) // .labelFormat(d3.format('+,.0s')) // .labelOffset(0) // .ascending(true) // const legendGroup = svg.append('g') // .attr('class', 'scaleLegend') // .attr('transform', 'translate(50,50)') // .attr('font-family', 'sans-serif') // .attr('font-size', 13) // .call(legend) // legendGroup.select('.legendTitle').attr('dy', -10) // legendGroup.selectAll('.label').attr('dy', 15) // } function addLabels(features, dim){ const labels = plot.append('g') .attr('class', '.feature-container') .selectAll('.feature') .data(features).enter() .append('text') .attr('x', d => path.centroid(d)[0]) .attr('y', d => path.centroid(d)[1]) .attr('dy', d => labelOffsets[d.properties.key] ? labelOffsets[d.properties.key][1] : 0) .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .attr('font-size', 13) .attr('fill', d => Math.abs(d.properties[plotDim]) > 6000 ? '#fff' : '#444') .text(d => d3.format('+,.0f')(d.properties[plotDim])) } // plotting drawFeatures(dataLayer.features) // drawCustomFeatures(topojson.feature(mtLegDistricts, mtLegDistricts.objects.house_shape_adopted021213).features, { // fill: 'none', // stroke: '#444', // strokeWidth: 1, // opacity: 0.8, // }) addLabels(dataLayer.features) addColorLegend(opts.fillColorScale) return svg.node(); }36:T7c0,{ return vegaEmbed({ vconcat: [ { data: {values: combinedResults.filter(d => d.race === raceKey && d.county !== 'total' && ['dem','gop','lib'].includes(d.party) ) }, mark: {type: 'bar', size: 14}, width: width - 200, height: 50, title: comparison.race.displayLabel, encoding: { y: {field: "candidate", type: "ordinal", sort: {"op": "sum", "field": "votes", order: 'descending'}, axis: {title: ''}, }, x: {aggregate: 'sum', field: "votes", type: "quantitative", "scale": {"domain": [0,400000]}, "axis": {title: 'Votes', orient: 'top', domain: false}, }, color: {field: 'party', type: 'nominal', scale: { domain: Object.keys(partyColors), range: Object.values(partyColors)}} } }, { data: {values: combinedResults.filter(d => d.race === compRaceKey && d.county !== 'total' && ['dem','gop','lib'].includes(d.party) ) }, mark: {type: 'bar', size: 14}, width: width - 200, height: 50, title: comparison.compRace.displayLabel, encoding: { y: {field: "candidate", type: "ordinal", sort: {"op": "sum", "field": "votes", order: 'descending'}, axis: {title: ''}, }, x: {aggregate: 'sum', field: "votes", type: "quantitative", "scale": {"domain": [0,400000]}, "axis": {title: '', domain: false}, }, color: {field: 'party', type: 'nominal', scale: { domain: Object.keys(partyColors), range: Object.values(partyColors)}} } } ] }) }37:T1aa3,drawComparisonMap = (opts) => { const dataLayer = opts.dataLayer const plotDim = opts.plotDim const maxRadius = opts.maxRadius || 20 const maxDimVal = opts.maxDimVal || 20000 const markerStyle = opts.markerStyle || {} // defaults to values below const markerOpacity = markerStyle.opacity || 1 const markerFill = markerStyle.fill || '#228' const markerFillOpacity = markerStyle.fillOpacity || 0.25 const markerStroke = markerStyle.stroke || markerFill const markerStrokeWidth = markerStyle.strokeWidth || 1 const markerStrokeOpacity = markerStyle.strokeOpacity || 0.9 const baseLayer = opts.baseLayer || dataLayer const baseLayerStyle = opts.baseLayerStyle || {} // defaults to values below const baseOpacity = baseLayerStyle.opacity || 1 // const baseFill = opts.baseFill || opts.fillColorScale || (d => '#ddd') const baseFill = opts.baseLayerStyle.fill || (d => '#ddd') const baseFillOpacity = baseLayerStyle.fillOpacity || 1 const baseStroke = baseLayerStyle.stroke || '#fff' const baseStrokeWidth = baseLayerStyle.strokeWidth || 1 const baseStrokeOpacity = baseLayerStyle.strokeOpacity || 1 const height = opts.height || 300 // width comes predefined // const width = 600 const margin = opts.margin || {top: 10, left: 40, right: 40, bottom: 10} const projection = opts.projection || d3.geoMercator() // Dimensional calcs const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style('border', '1px solid #ddd') const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) projection.fitSize([plotWidth, plotHeight], baseLayer) // Arrowhead def // Ref: https://vanseodesign.com/web-design/svg-markers/ const defs = svg.append('defs') defs.append('marker') .attr('id', 'arrow-blue') .attr('markerWidth', 10).attr('markerHeight',10) .attr('refX',2).attr('refY',3) .attr('orient', 'auto') .attr('markerUnits','strokeWidth') .append('path') .attr('d', 'M0,0 L1,3 L0,6 L9,3 z') .attr('fill', partyColors.dem) // dem blue defs.append('marker') .attr('id', 'arrow-red') .attr('markerWidth', 10).attr('markerHeight',10) .attr('refX',2).attr('refY',3) .attr('orient', 'auto') .attr('markerUnits','strokeWidth') .append('path') // .attr('d', "M0,0 L0,6 L9,3 z") .attr('d', 'M0,0 L1,3 L0,6 L9,3 z') .attr('fill', partyColors.gop) // gop red // Scales // marker size - relative to votes const rScale = d3.scaleSqrt() .range([0.5, 10]) .domain([0, 40000]); // marker length const lengthScale = d3.scaleLinear() .domain([0,20000]) .range([0,50]) // geo location const path = d3.geoPath() .projection(projection); // Drawing function drawFeatures(features){ const shapes = plot.append('g') .attr('class', '.feature-container'); shapes.selectAll('.feature') .data(features).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', baseOpacity) .attr('fill', baseFill) .attr('fill-opacity', baseFillOpacity) .attr('stroke', baseStroke) .attr('stroke-width', baseStrokeWidth) .attr('stroke-opacity', baseStrokeOpacity) .on('click', d => console.log(d.properties)) } function drawShiftMarker(sel, dim){ sel .filter(d => d.properties[dim] !== 0) .append('path') .attr('class', 'marker-arrow') .attr('d', d => `M 0 0 l ${-lengthScale(d.properties[dim])} 0 `) .attr('marker-end', d => (d.properties[dim] > 0) ? 'url(#arrow-blue)' : 'url(#arrow-red)') .attr('opacity', markerOpacity) .attr('stroke', d => (d.properties[dim] > 0) ? partyColors.dem : partyColors.gop) .attr('stroke-width', d => rScale(Math.abs(d.properties[dim]))) // .attr('stroke-width', 1) .attr('stroke-opacity', 1) .attr('stroke-linecap', 'round') } function drawShiftMarkers(features, dim){ const markers = plot.append('g') .attr('class', 'marker-container') .selectAll('.markers') .data(features).enter() .append('g') .attr('transform', d => { const yOffset = labelOffsets[d.properties.key] ? labelOffsets[d.properties.key][1] : 0 return `translate(${path.centroid(d)[0]},${path.centroid(d)[1] + yOffset})` }) .call(drawShiftMarker, dim) } function drawMarkerLegend(cells){ const legendData = cells.map(d => ({ properties: {val: d} })) const legendGroup = svg.append('g') .attr('transform', `translate(100,150)`) .attr('class', 'legend') const groups = legendGroup .selectAll('.markers') .data(legendData).enter() .append('g') .attr('transform', (d, i) => { const xShift = d.properties.val > 0 ? -25 : 25 const yShift = i*30 return `translate(${xShift},${yShift})` }) legendGroup.append('text') .attr('y', -30) .attr('text-anchor','middle') .attr('font-family', 'sans-serif') .attr('font-size', 16) .attr('font-weight', 'bold') .text('Vote margin shift') groups.call(drawShiftMarker, 'val') groups.append('text') .attr('font-family', 'sans-serif') .attr('font-size', 14) .attr('text-anchor', d => (d.properties.val >= 0) ? 'start' : 'end') .attr('dx', d => (d.properties.val >= 0) ? 10 : -10) .attr('dy', 5) .text(d => { const message = (d.properties.val >= 0) ? ' to D' : ' to R' const val = d3.format(',.0s')(Math.abs(d.properties.val)) return val + message }) } function addLabels(features, dim){ const labels = plot.append('g') .attr('class', '.feature-container') .selectAll('.feature') .data(features).enter() .append('text') .attr('x', d => path.centroid(d)[0]) .attr('y', d => path.centroid(d)[1]) .attr('dy', d => labelOffsets[d.properties.key] ? labelOffsets[d.properties.key][1] - 10 : -10) .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .attr('font-size', 12) // .attr('fill', d => Math.abs(d.properties.demVoteMarginChange) > 5000 ? '#fff' : '#444') .attr('fill', '#444') // .text(d => d3.format('+.0f')(d.properties.demVotePercentMarginChange * 100)) .text(d => d3.format('+,.0f')(d.properties.demVoteMarginChange)) } // plotting drawFeatures(dataLayer.features) drawShiftMarkers(dataLayer.features, plotDim) drawMarkerLegend([10000,5000,1000,100,-100,-1000,-5000,-10000], plotDim) addLabels(dataLayer.features) return svg.node(); }38:T707,// { // return vegalite({ // data: {values: comparison.values}, // hconcat: [ // { // mark: "bar", // width: 200, // height: 800, // encoding: { // y: {field: "key", type: "ordinal", // sort: {"op": "mean", "field": "demVoteMargin", order: 'descending'}, // axis: {title: ''}, // }, // x: {field: "demVoteMargin", type: "quantitative", // "scale": {"domain": [-20000,20000]}, // // "axis": {"format": "$,.0s"}, // }, // color: {value: '#444'} // } // }, // { // mark: "bar", // width: 200, // height: 800, // encoding: { // y: {field: "key", type: "ordinal", // sort: {"op": "mean", "field": "demVoteMargin", order: 'descending'}, // axis: {title: '', labels: false, ticks: false}, // }, // x: {field: "compDemVoteMargin", type: "quantitative", // "scale": {"domain": [-20000,20000]}, // // "axis": {"format": "$,.0s"}, // }, // color: {value: '#666'} // } // }, // { // mark: "bar", // width: 200, // height: 800, // encoding: { // y: {field: "key", type: "ordinal", // sort: {"op": "mean", "field": "demVoteMargin", order: 'descending'}, // axis: {title: '', labels: false, ticks: false}, // }, // x: {field: "demVoteMarginChange", type: "quantitative", // "scale": {"domain": [-20000,20000]}, // // "axis": {"format": "$,.0s"}, // }, // color: {value: '#666'} // } // }, // ], // }) // }39:T10ad,byRaceAndCounty = { // Assumes only one candidate for party, doesn't test it // limit to statewide races const filtered = combinedResults .filter(d => +d.election >= '2006') .filter(d => d.office !== 'mt_leg_house' && d.office !== 'mt_leg_senate') const grouped = d3.nest() .key(d => d.race) .key(d => d.county) .entries(filtered) grouped.forEach(race => { race.numCounties = race.values.length // doesn't work for legislative races const demCandidate = race.values[0].values.find(d => d.party === 'dem') const gopCandidate = race.values[0].values.find(d => d.party === 'gop') const libCandidate = race.values[0].values.find(d => d.party === 'lib') const counties = race.values counties .forEach(county => { const dem = county.values.find(d => d.party === 'dem') const gop = county.values.find(d => d.party === 'gop') const lib = county.values.find(d => d.party === 'lib') county.votes = county.values.reduce((acc, obj) => obj.votes + acc, 0) county.demVotes = dem ? dem.votes : 0 county.gopVotes = gop ? gop.votes : 0 county.libVotes = lib ? lib.votes : 0 county.ranking = [ {'party': 'dem', votes: county.demVotes, candidate: dem ? dem.candidate : null}, {'party': 'gop', votes: county.gopVotes, candidate: gop ? gop.candidate : null}, {'party': 'lib', votes: county.libVotes, candidate: lib ? lib.candidate : null}, ].sort((a,b) => b.votes - a.votes) county.demVoteMargin = county.demVotes - county.gopVotes county.gopVoteMargin = -county.demVoteMargin county.winningParty = county.ranking[0].party county.winner = county.ranking[0].candidate county.demPercent = county.demVotes / county.votes county.gopPercent = county.gopVotes / county.votes county.libPercent = county.libVotes / county.votes county.demPercentMargin = county.demPercent - county.gopPercent county.gopPercentMargin = -county.demPercentMargin county.winnerVoteMargin = county.ranking[0].votes - county.ranking[1].votes county.winnerMargin = county.winnerVoteMargin / county.votes }) race.votes = counties.reduce((acc, obj) => obj.votes + acc, 0) race.demVotes = counties.reduce((acc, obj) => obj.demVotes + acc, 0) race.gopVotes = counties.reduce((acc, obj) => obj.gopVotes + acc, 0) race.libVotes = counties.reduce((acc, obj) => obj.libVotes + acc, 0) race.ranking =[ {'party': 'dem', votes: race.demVotes, candidate: demCandidate ? demCandidate.candidate : null}, {'party': 'gop', votes: race.gopVotes, candidate: gopCandidate ? gopCandidate.candidate : null}, {'party': 'lib', votes: race.libVotes, candidate: libCandidate ? libCandidate.candidate : null}, ].sort((a,b) => b.votes - a.votes) race.winnerParty = race.ranking[0].party race.winner = race.ranking[0].candidate race.runnerUp = race.ranking[1].candidate race.runnerUpParty = race.ranking[1].party race.demPercent = race.demVotes / race.votes race.gopPercent = race.gopVotes / race.votes race.libPercent = race.libVotes / race.votes race.demCounties = counties.filter(d => d.winningParty === 'dem').length race.gopCounties = counties.filter(d => d.winningParty === 'gop').length race.demVoteMargin = race.demVotes - race.gopVotes race.demPercentMargin = race.demPercent - race.gopPercent race.gopVoteMargin = -race.demVoteMargin race.gopPercentMargin = -race.demPercentMargin race.winnerVoteMargin = race.ranking[0].votes - race.ranking[1].votes race.winnerMargin = race.winnerVoteMargin / race.votes race.year = race.values[0].values[0].election race.office = race.values[0].values[0].displayOffice console.assert(race.runnerUp, race) const winnerSurname = race.winner.split(' ').slice(-1)[0] const runnerUpSurname = race.runnerUp.split(' ').slice(-1)[0] race.displayLabel = `${race.year} ${race.office} (${winnerSurname}-${runnerUpSurname})` }) return grouped .filter(d => d.demVotes > 0 && d.gopVotes > 0) // races without two major party candidates }3a:T7d8,// state leg results byYearAndDistrict = { const filtered = histResults .filter(d => +d.election >= '2006') .filter(d => d.office === 'mt_leg_house' || d.office === 'mt_leg_senate') filtered.forEach(race => { const chamber = (race.office === 'mt_leg_house') ? 'HD' : 'SD' race.legDistrict = chamber + race.district }) const grouped = d3.nest() .key(d => d.election) .key(d => d.legDistrict) .key(d => d.party) .entries(filtered) grouped.forEach(year => { // at year level, tally house and senate seats won by each party year.values.forEach(district => { // at district level, tally winner, total votes district.values.forEach(party => { // results here from several counties, possibly party.votes = party.values.reduce((acc, obj) => acc + obj.votes, 0) party.candidate = party.values[0].candidate }) district.values.sort((a,b) => b.votes - a.votes) district.votes = district.values.reduce((acc, obj) => acc + obj.votes, 0) district.values.forEach(party => { party.votePercent = party.votes / district.votes }) const winner = district.values[0] // values are sorted descending by vote count district.winnerParty = winner.key district.winnerCandidate = winner.candidate district.winnerVotes = winner.votes district.winnerVotePercent = winner.votePercent }) const houseRaces = year.values.filter(d => d.key.slice(0,1) === 'H') year.houseSeats = houseRaces.length year.houseDemWins = houseRaces.filter(d => d.winnerParty === 'dem').length year.houseGopWins = houseRaces.filter(d => d.winnerParty === 'gop').length const senRaces = year.values.filter(d => d.key.slice(0,1) === 'S') year.senSeats = senRaces.length year.senDemWins = senRaces.filter(d => d.winnerParty === 'dem').length year.senGopWins = senRaces.filter(d => d.winnerParty === 'gop').length }) return grouped }3b:Te33,byRaceAndCountyWithAvg = { let byRaceAndCountyWithAvg = byRaceAndCounty function makeRollup(opts) { const displayLabel = opts.displayLabel const yearFilter = opts.yearFilter const raceFilter = opts.raceFilter const votes = byRaceAndCounty.reduce((acc, obj) => acc + obj.votes, 0) const demVotes = byRaceAndCounty.reduce((acc, obj) => acc + obj.demVotes, 0) const gopVotes = byRaceAndCounty.reduce((acc, obj) => acc + obj.gopVotes, 0) const libVotes = byRaceAndCounty.reduce((acc, obj) => acc + obj.libVotes, 0) const counties = byRaceAndCounty[0].values.map(d => d.key) const values = counties.map(name => { const candidates = histResults .filter(yearFilter) .filter(raceFilter) .filter(d => d.county === name) const numRaces = new Set(candidates.map(d => d.race)).size const votes = candidates.reduce((acc, obj) => acc + obj.votes, 0) / numRaces const avgDemVotes = candidates.filter(d => d.party === 'dem').reduce((acc, obj) => acc + obj.votes, 0) / numRaces const avgGopVotes = candidates.filter(d => d.party === 'gop').reduce((acc, obj) => acc + obj.votes, 0) / numRaces const avgLibVotes = candidates.filter(d => d.party === 'lib').reduce((acc, obj) => acc + obj.votes, 0) / numRaces // to play nicely with vega-lite charts const values = [ // { county, party, candidate, votes election} --> avgs // one for each partyy { county: name, party: 'gop', candidate: 'Avg. GOP', votes: avgGopVotes}, { county: name, party: 'dem', candidate: 'Avg. Dem', votes: avgDemVotes}, { county: name, party: 'lib', candidate: 'Avg. Lib', votes: avgLibVotes}, ] return { key: name, numCounties: counties.length, values: values, votes: votes, demVotes: avgDemVotes, gopVotes: avgGopVotes, libVotes: avgLibVotes, demPercent: avgDemVotes / votes, gopPercent: avgGopVotes / votes, libPercent: avgLibVotes / votes, demVoteMargin: avgDemVotes - avgGopVotes, demPercentMargin: (avgDemVotes - avgGopVotes) / votes, gopVoteMargin: avgGopVotes - avgDemVotes, gopPercentMargin: (avgGopVotes - avgDemVotes) / votes, } }) const ranking =[ {'party': 'dem', votes: demVotes, candidate: 'Average Dem'}, {'party': 'gop', votes: gopVotes, candidate: 'Average Republican'}, {'party': 'lib', votes: libVotes, candidate: 'Average Libertarian'}, ].sort((a,b) => b.votes - a.votes) const summary = { key: 'average_statewide', displayLabel: displayLabel, values: values, numCounties: values.length, votes: votes, ranking: ranking, winnerParty: ranking[0].party, winner: ranking[0].candidate, runnerUp: ranking[1].candidate, runnerUpParty: ranking[1].party, demVotes: demVotes, gopVotes: gopVotes, libVotes: libVotes, demPercent: demVotes / votes, gopPercent: gopVotes / votes, libPercent: libVotes / votes, winnerVoteMargin: ranking[0].votes - ranking[1].votes, winnerMargin: (ranking[0].votes - ranking[1].votes) / votes, year: 'Aggregate' } byRaceAndCountyWithAvg = byRaceAndCountyWithAvg.concat(summary) } const yearFilter = (d => +d.election >= 2006) makeRollup({ displayLabel: '(2006-2016) Average statewide race', raceFilter: (d => !['mt_leg_house','mt_leg_senate'].includes(d.office)), yearFilter: yearFilter, }) return byRaceAndCountyWithAvg }3c:T57b,histResults = { const partyReplace = { 'D': 'dem', 'Democratic': 'dem', 'Republican': 'gop', 'R': 'gop', 'Libertarian': 'lib', 'L': 'lib', 'LBT': 'lib', 'I': 'ind', 'Independent': 'ind', } const countyReplace = { 'Total': 'total', 'TOTAL': 'total', 'TOTALS': 'total', 'Grand Total': 'total', 'Grand Totals': 'total', } const officeReplace = { 'President': 'us_president', 'U.S. Senate': 'us_senate', 'U.S. House': 'us_house', 'Governor': 'mt_gov', 'Secretary of State': 'mt_sos', 'Attorney General': 'mt_ag', 'State Auditor': 'mt_aud', 'Superintendent of Public Instruction': 'mt_spi', 'State House': 'mt_leg_house', 'State Senate': 'mt_leg_senate', } const rawData = await d3.csv('https://gist.githubusercontent.com/eidietrich/9e9791baad6f9331179580ec0cbfd718/raw/8471176499ff5eef71886da35624ce8d3b987dd2/montana-countyResults.overall.csv') return rawData.map(county => Object.assign(county, { votes: +county.votes, office: officeReplace[county.office] || county.office, displayOffice: county.office, race: `${officeReplace[county.office] || county.office}_${county.election}`, party: partyReplace[county.party] || county.party, county: countyReplace[county.county.trim()] || county.county.trim(), })).filter(d => d.county !== 'total') }3d:T5ac,results2018 = { const partyReplace = { 'D': 'dem', 'Democratic': 'dem', 'Democrat': 'dem', 'Republican': 'gop', 'R': 'gop', 'Libertarian': 'lib', 'L': 'lib', 'LBT': 'lib', 'I': 'ind', 'Independent': 'ind', } const countyReplace = { 'Total': 'total', 'TOTAL': 'total', 'TOTALS': 'total', 'Grand Total': 'total', 'Grand Totals': 'total', } const officeReplace = { 'President': 'us_president', 'U.S. Senate': 'us_senate', 'U.S. House': 'us_house', 'Governor': 'mt_gov', 'Secretary of State': 'mt_sos', 'Attorney General': 'mt_ag', 'State Auditor': 'mt_aud', 'Superintendent of Public Instruction': 'mt_spi', 'State House': 'mt_leg_house', 'State Senate': 'mt_leg_senate', } const rawData = await d3.csv('https://gist.githubusercontent.com/eidietrich/c7c1345ef63bbffac6cbd16f9e85113c/raw/c44003bff4784ed1732e9fbde4e90228f967f13f/gistfile1.txt') return rawData.map(county => Object.assign(county, { votes: +county.votes, office: officeReplace[county.office] || county.office, displayOffice: county.office, race: `${officeReplace[county.office] || county.office}_${county.election}`, party: partyReplace[county.party] || county.party, county: countyReplace[county.county.trim()] || county.county.trim(), election_type: county.election_type || 'general', })).filter(d => d.county !== 'total') }3e:[] 2f:{"title":"2018 election results viz","cells":[{"id":0,"value":"md`# 2018 election results viz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`\n\nWhat this is: Graphics sketching for Nov. 8, 2018 Montana elections results package for the Montana Free Press, published as \"[Showing purple streak again, voters send Tester, Gianforte back to Washington](https://montanafreepress.org/showing-purple-streak-again-voters-send-tester-gianforte-back-to-washington/).\"\n\nHistorical election data compiled by [Daniel Lathrop](http://www.lathropd.com/).\n\nInspiration:\n- https://www.nytimes.com/interactive/2016/11/08/us/elections/how-trump-pushed-the-election-map-to-the-right.html\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`## Single race margins`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof singleRace = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"selRace = byRaceAndCountyWithAvg.find(d => d.key === singleRace)","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"{\n const winner = selRace.ranking[0]\n const runnerUp = selRace.ranking[1]\n return md`### Montana / ${selRace.displayLabel}\n **${winner.candidate}**, ${winner.party.toUpperCase()} - ${d3.format(',')(winner.votes)} votes (${d3.format('.1%')(winner.votes / selRace.votes)}) \n\n vs **${runnerUp.candidate}**, ${runnerUp.party.toUpperCase()} - ${d3.format(',')(runnerUp.votes)} votes (${d3.format('.1%')(runnerUp.votes / selRace.votes)})\n\n Margin: ${d3.format(',')(selRace.winnerVoteMargin)} votes (${d3.format('.1%')(selRace.winnerMargin)})\n\n Map below shows the margin between the Dem and GOP candidate in each Montana County\n\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"marginMap = {\n const colorScale = (selRace.demVoteMargin > 0) ?\n d3.scaleSequential(d3.interpolateRdBu).domain([-10000, 10000]) :\n d3.scaleSequential(d3.interpolateRdBu).domain([10000, -10000])\n const plotDim = (selRace.demVoteMargin > 0) ? 'demVoteMargin' : 'gopVoteMargin'\n \n return drawSingleRaceMarginsMap({\n dataLayer: joinCounties(selRace, mtCounties),\n plotDim: plotDim,\n fillColorScale: colorScale,\n baseLayerStyle: {stroke: '#fff'},\n // baseLayer: mtCounties,\n height: 400\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`## Comparisons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"viewof raceKey = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"md`versus`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"viewof compRaceKey = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"comparison = {\n const race = byRaceAndCountyWithAvg.find(d => d.key === raceKey)\n const compRace = byRaceAndCountyWithAvg.find(d => d.key === compRaceKey)\n \n const comps = race.values.map(county => {\n const compCounty = compRace.values.find(d => d.key === county.key)\n return {\n key: county.key,\n race: county,\n votes: county.votes,\n compRace: compCounty,\n totalVoteChange: county.votes - compCounty.votes,\n demVoteMargin: county.demVoteMargin,\n compDemVoteMargin: compCounty.demVoteMargin,\n demVoteMarginChange: county.demVoteMargin - compCounty.demVoteMargin,\n demVotePercentMarginChange: county.demPercentMargin - compCounty.demPercentMargin,\n }\n })\n \n return {\n raceKey: raceKey,\n race: race,\n compRaceKey: compRaceKey,\n compRace: compRace,\n values: comps\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"compJoined = ({\n type: 'FeatureCollection',\n crs: mtCounties.crs,\n features: mtCounties.features.slice().map(feature => {\n // &/And replace is for Lewis & Clark county \n const match = comparison.values.find(county => county.key.toUpperCase()\n .replace('&', 'AND') === feature.properties.NAME)\n return {\n type: 'Feature',\n geometry: feature.geometry,\n properties: match\n }\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"shiftMap = drawComparisonMap({\n dataLayer: compJoined,\n // baseLayer: mtCounties,\n height: 400,\n baseLayerStyle: {\n // fill: '#eee',\n // stroke: '#ccc',\n fill: '#f5f5f5',\n stroke: '#ccc',\n // fill: d => d3.scaleSequential(d3.interpolateRdBu)\n // .domain([-0.5, 0.5])(d.properties.demVotePercentMarginChange),\n },\n fillColorScale: d3.scaleSequential(d3.interpolateRdBu).domain([-10000, 10000]),\n plotDim: 'demVoteMarginChange',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"byRaceAndCounty.find(d => d.key === 'us_senate_2018').values\n .filter(d => d.winningParty === 'dem')\n .map(d => d.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1523,"value":"byRaceAndCounty.find(d => d.key === 'us_president_2016').values\n .filter(d => d.winningParty === 'dem')\n .map(d => d.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"joinCounties = (race, geojson) => {\n // return geojson with county properties fleshed out\n geojson.features.forEach(feature => {\n // &/And replace is for Lewis & Clark county \n const match = race.values\n .find(county => county.key.toUpperCase()\n .replace('&', 'AND') === feature.properties.NAME)\n feature.properties = Object.assign(feature.properties, match)\n })\n return geojson\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1462,"value":"combinedResults = histResults.concat(results2018)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"histTurnout = {\n const raw = await d3.csv('https://gist.githubusercontent.com/eidietrich/7ada7fdaa307a34650b6c233b1ce4d55/raw/af388f5b318519723c1040ddcfb77b3ebe555c4c/mt-vote-turnout-92-16.csv')\n \n raw.forEach(d => {\n d.registered_voters = +d.registered_voters\n d.votes_cast = +d.votes_cast\n d.turnout = +d.turnout\n })\n \n return raw\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"mtCounties = await d3.json('https://gist.githubusercontent.com/eidietrich/1f4727a8fb1a32bda14c921b29028bfd/raw/2479b3ae8ca3aa09c2b9f2cb9c9ca7f892250a96/mt-counties.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"geography = await d3.json('https://gist.githubusercontent.com/eidietrich/a167341709de08a560fcf02a445a7cb7/raw/94c79766a3dc04fc92e32f04700d6ac3d302cf99/mt-geography-base.topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"mtLegDistricts = await d3.json('https://gist.githubusercontent.com/eidietrich/dc4ebdd08a68049e4a54f0def90f702d/raw/0355764096656f8b9e962f8f791154d0e0ddea17/mt-leg-districts.topo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"// for tweaking map label placement, as [dx, dy] from centroid\nlabelOffsets = ({\n 'Missoula': [0,10],\n 'Gallatin': [0,-15],\n 'Silver Bow': [0,8],\n 'Powell': [0,15],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"partyColors = ({\n dem: d3.scaleSequential(d3.interpolateRdBu).domain([-10000, 10000])(7500),\n gop: d3.scaleSequential(d3.interpolateRdBu).domain([10000, -10000])(7500),\n lib: '#888',\n})\n\n// partyColors = ({\n// dem: '#4575b4',\n// gop: '#d73027',\n// lib: '#888',\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"d3Legend = require('d3-svg-legend')","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"vegalite = require(\"@observablehq/vega-lite@0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"vegaEmbed = require(\"vega-embed@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"DOM.download(serialize(marginMap), 'file.svg', \"Download SVG\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}