2d:null 2e:["$","title",null,{"children":"2016 Vote Allocation Map | Zavier Henry | Observable"}] 33:T81e,md`# Map Interface This interface allows you to make custom United States voting maps at the county and national level. Along with each candidate there is a section for "tossup" votes which represents unallocated votes in a region. Features of the interface are described below. --- ### Allocating a specific region Click on the region to change votes for each candidates. The region totals will be shown in the legend. The "tossup" row cannot be selected or edited. Click on a candidate to open the form for changing either vote totals or the vote percentage. Click the back button to exit this mode. --- ### Allocating multiple regions based on population size Click on the candidate in the legend. This allows you to change the candidate percentage of regions based on size. The first two ranges set the smallest and largest region to change; the third sets the percentage. Click "Apply Range" to apply the changes to the map. --- ### Allocating multiple highlighted regions Activate multiple region mode by click the bottom "Enable Multiregion Mode". This allows you to change the candidate percentage of multiple regions at once. Click the states that you want to edit, set the candidate and percentage, then click "Apply" to apply the changes. Click the back button to exit this mode. --- ### Switching between state and county maps Use the buttons at the bottom left corner to switch between the county map and the state map --- ### Editing and deleting a candidate To edit a candidate, click on the candidate in the legend. From there, you can change both the name of the candidate and the color that represents it. To delete the candidate, hover over the row with the candidate. Click the X button that appears on the right. The first two rows do notshow a delete button and cannot be deleted, but can be edited. The "tossup" row cannot be edited or deleted. --- ### Adding a new candidate To add a new candidate, press the bottom right plus button at the bottom of the legend. You may need to scroll down to the bottom for the button to show.

`34:T35d6,viewof vueElection = { const container = html`

` yield container const votes = electionTotals.filter(([code, _]) => code.length == 2).reduce((x, [_, votes]) => x + votes, 0) const makeElection = function(features, titleMaker) { const candidates = [ { id: 1, name: "Hillary Clinton", color: createColor('#007dd6') }, { id: 2, name: "Donald Trump", color: createColor('#b81800') }, { id: 3, name: "Gary Johnson", color: createColor('#015520') }, { id: 4, name: "Jill Stein", color: createColor('#ffb6c1') } ] const regions = features.map(function(feature) { const [_, votes] = electionTotals.find(([code, _]) => code === feature.id) return { ...feature, title: titleMaker(feature), election: { total: votes, winner: null, margin: 0, votes: candidates.map(({id}) => ({id, votes: 0})) } } }) return { candidates, labeler: candidates.length + 1, election: { total: votes, winner: null, votes: candidates.map(({id}) => ({id, votes: 0})) }, regions: regions.slice().sort((a, b) => d3.ascending(a.id, b.id)), sortedRegions: regions.slice().sort((a, b) => d3.descending(a.election.total, b.election.total)).map(({id}) => id) } } const elections = [ { name: "county", election: makeElection(countyFeatures, function(county) { const {properties: {name: stateName}} = stateFeatures.find(({id}) => id === county.id.substring(0, 2)) return `${county.properties.name}, ${stateName}` }) }, { name: "state", election: makeElection(stateFeatures, state => state.properties.name) } ] new Vue({ components: { LMap: VL.LMap, LTileLayer: VL.LTileLayer, LGeoJson: VL.LGeoJson, VueControl, VueRegionElection }, provide: function() { return { coordsToLatLng: this.coordsToLatLng } }, data: { zoom: 5, center: [37.8, -96], url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '© OpenStreetMap contributors', maxZoom: 16, elections, activeElectionInfo: { name: 'county', }, controlMode: { name: 'National', election: elections.find(x => x.name === 'county').election, region: null, candidateRowSettings: elections.find(x => x.name === 'county').election.candidates.map(({id}, i) => { return { id, focused: false, selected: false, deletable: i >= 2 } }) }, multimode: { enabled: false, regions: [] }, }, mounted() { this.$nextTick(function() { container.value = { stateElection: this.elections.find(({name}) => name === 'state').election, countyElection: this.elections.find(({name}) => name === 'county').election, } }) }, methods: { onAddMultimodeRegion(regionId) { binaryInsert(this.multimode.regions, regionId, (a, b) => d3.ascending(a, b)) }, onRemoveMultimodeRegion(regionId) { const index = binarySearchIndex(this.multimode.regions, regionId, (a, b) => d3.ascending(a, b)) this.multimode.regions.splice(index, 1) }, onCandidateChange({election, candidate}) { const index = election.candidates.findIndex(({id}) => id === candidate.id) Vue.set(election.candidates, index, candidate) container.dispatchEvent(new CustomEvent('input')) }, onRegionChange({election, region, candidate, votes}) { this.changeVotes(election, region, candidate, votes) container.dispatchEvent(new CustomEvent('input')) }, onOrderedRegionChange({election, candidate, range: {start, end, percentage}}) { for (let i = start-1; i < end; i++) { const regionId = election.sortedRegions[i] const regionIndex = binarySearchIndex(election.regions, regionId, (a, b) => d3.ascending(a.id, b)) const region = election.regions[regionIndex] this.changePercentage(election, region, candidate, percentage) } container.dispatchEvent(new CustomEvent('input')) }, onMultiRegionChange({election, candidate, percentage}) { for (const regionId of this.multimode.regions) { const regionIndex = binarySearchIndex(election.regions, regionId, (a, b) => d3.ascending(a.id, b)) const region = election.regions[regionIndex] this.changePercentage(election, region, candidate, percentage) } container.dispatchEvent(new CustomEvent('input')) }, onSingleRegionClick({election, region}) { this.controlMode.name = 'Single Region' this.controlMode.election = election const index = binarySearchIndex(election.regions, region, (a, b) => d3.ascending(a.id, b)) this.controlMode.region = election.regions[index] }, onChangeActiveElection(e) { const name = e.target.value this.activeElectionInfo.name = name this.multimode.enabled = false this.multimode.regions = [] this.controlMode.name = 'National' this.controlMode.election = this.activeElection this.controlMode.region = null this.controlMode.candidateRowSettings = this.activeElection.candidates.map(({id}, i) => { return { id, focused: false, selected: false, } }) }, coordsToLatLng: function(coords) { return L.GeoJSON.coordsToLatLng(this.$_inversion(coords)) }, addCandidate(election) { const id = election.labeler++ const candidate = { id, name: `Candidate ${id}`, color: createColor('#000') } election.candidates.push(candidate) election.election.votes.push({id, votes: 0}) election.regions.forEach(region => region.election.votes.push({id, votes: 0})) this.controlMode.candidateRowSettings.push({ id, focused: false, selected: false, deletable: true }) container.dispatchEvent(new CustomEvent('input')) }, deleteCandidate({election, candidate: {id: candidateId}}) { const candidateIndex = election.candidates.findIndex(({id}) => id === candidateId) election.candidates.splice(candidateIndex, 1) const nationalIndex = election.election.votes.findIndex(({id}) => id === candidateId) election.election.votes.splice(nationalIndex, 1) if (candidateId === election.election.winner) { const {winner} = this.$_findWinner(election.election) election.election.winner = winner } for (const region of election.regions) { const regionElection = region.election const index = regionElection.votes.findIndex(({id}) => id === candidateId) regionElection.votes.splice(index, 1) if (candidateId == regionElection.winner) { const {winner, margin} = this.$_findWinner(regionElection) regionElection.winner = winner, regionElection.margin = margin } } const settingsIndex = this.controlMode.candidateRowSettings.findIndex(({id}) => id === candidateId) this.controlMode.candidateRowSettings.splice(settingsIndex, 1) container.dispatchEvent(new CustomEvent('input')) }, onCloseMode() { this.controlMode.name = "National" this.controlMode.region = null this.controlMode.candidateRowSettings.forEach((setting, i) => { setting.focused = false setting.selected = false }) this.multimode.enabled = false this.multimode.regions = [] }, changeVotes(election, region, {id: candidateId}, votes) { const regionElection = region.election, nationalElection = election.election const regionCandidate = regionElection.votes.find(({id}) => id === candidateId) for (const candidate of nationalElection.votes) { candidate.votes -= regionElection.votes.find(({id}) => id === candidate.id).votes } const oldVotes = regionElection.votes.find(({id}) => id === candidateId).votes const allocatedVotes = regionElection.votes.reduce((val, {votes}) => val + votes, 0), availableVotes = regionElection.total - allocatedVotes regionCandidate.votes = votes if ((votes - oldVotes - availableVotes) > 0) { //subtract from other candidates to make up the difference const totalWithoutCandidate = regionElection.total - votes let remainder = totalWithoutCandidate for (const candidate of regionElection.votes) { if (candidateId != candidate.id) { const restVotes = regionElection.total - oldVotes - availableVotes const newVotes = Math.floor(candidate.votes / restVotes * totalWithoutCandidate) candidate.votes = newVotes, remainder -= newVotes } } while (remainder > 0) { for (const candidate of regionElection.votes) { if (candidateId != candidate.id) { candidate.votes++, remainder-- if (remainder <= 0) break; } } } } for (const candidate of nationalElection.votes) { candidate.votes += regionElection.votes.find(({id}) => id === candidate.id).votes } const {winner: regionWinner, margin} = this.$_findWinner(regionElection) regionElection.winner = regionWinner regionElection.margin = margin const {winner} = this.$_findWinner(nationalElection) nationalElection.winner = winner }, changePercentage(election, region, candidate, percentage) { const votes = Math.ceil(percentage / 100 * region.election.total) this.changeVotes(election, region, candidate, votes) }, onEnableMultiRegionMode() { this.controlMode.name = 'Multi Region' this.controlMode.region = null this.multimode.enabled = true this.controlMode.candidateRowSettings.forEach((settings, i) => { settings.focused = false settings.selected = false }) }, onChangeCandidateRowSettings({candidate: {id: candidateId}, settings: {focused, selected}}) { const settings = this.controlMode.candidateRowSettings.find(({id}) => id === candidateId) settings.focused = focused, settings.selected = selected }, $_topTwo(election) { return election.votes.sort((a, b) => d3.descending(a.votes, b.votes)).slice(0, 2) }, $_findWinner(election) { const [winner, second] = this.$_topTwo(election) return { winner: winner.votes > second.votes ? winner.id : null, margin: winner.votes - second.votes } }, $_inversion: d3.geoAlbersUsa().scale(1300).translate([487.5, 305]).invert, }, computed: { options() { return { coordsToLatLng: this.coordsToLatLng } }, activeElection() { const activeName = this.activeElectionInfo.name return this.elections.find(({name}) => name === activeName).election }, controlListeners() { return { 'add-candidate': this.addCandidate, 'remove-candidate': this.deleteCandidate, 'close-mode': this.onCloseMode, 'candidate-change': this.onCandidateChange, 'ordered-region-change': this.onOrderedRegionChange, 'single-region-change': this.onRegionChange, 'multi-region-percentage-change': this.onMultiRegionChange, 'enable-multi-region-mode': this.onEnableMultiRegionMode, 'change-candidate-row-settings': this.onChangeCandidateRowSettings, } }, layerListeners() { return { 'add-region': this.onAddMultimodeRegion, 'remove-region': this.onRemoveMultimodeRegion, 'single-region-click': this.onSingleRegionClick, } }, stateBorder: () => stateBorder, borderStyle() { return { color: 'white', fillColor: 'none', weight: 1, } }, }, el: container }) }35:Ta2c,{ const election = vueElection.countyElection countyChartTemplate.countySelection .style('fill', d => { const region = binarySearch(election.regions, d.id, (a, b) => d3.ascending(a.id, b)) const {winner, margin, total} = region.election const winnerCandidate = winner ? election.candidates.find(({id}) => id === winner) : null return winnerCandidate ? winnerCandidate.color(Math.round(margin / total * 10000) / 100) : '#CDCDCD' }) countyChartTemplate.titles.text(d => { const region = binarySearch(election.regions, d.id, (a, b) => d3.ascending(a.id, b)) const {winner, margin, votes, total} = region.election const winnerCandidate = winner ? election.candidates.find(({id}) => id === winner) : null const winnerVotes = winner ? votes.find(({id}) => id === winner).votes : Math.max(...votes.map(({votes}) => votes)) return `${region.title} Winner: ${winnerCandidate ? winnerCandidate.name : 'Tie' } Percentage: ${Math.round(winnerVotes / total * 10000) / 100}% Margin: ${(margin).toLocaleString('en')}` }) const tossupCandidate = { id: null, name: 'Tossup', color: 'none', total: election.election.total - election.election.votes.reduce((val, {votes}) => val + votes, 0) } const candidateRows = countyChartTemplate.candidates .selectAll("g") .data([...election.candidates.map(({id: candidateId, name, color}) => { return { name, color: color(100), total: election.election.votes.find(({id}) => candidateId === id).votes } }), tossupCandidate]) .join(enter => { const rows = enter.append('g') rows.append(() => svg``) const candidateText = rows.append(() => svg` `) return rows }) .attr('transform', (_, i) => `translate(0,${i * 50})`) countyChartTemplate.svg.attr('viewBox', [0,0,975,700+50*candidateRows.size()+15]) candidateRows.select(".candidate-color").style("fill", ({color}) => color) candidateRows.select(".percentage").text(d => `${Math.round(d.total/election.election.total * 10000) / 100}%`) candidateRows.select(".name").text(d => d.name) candidateRows.select(".total").text(d => d.total.toLocaleString('en')) return countyChartTemplate.svg.node() }36:Ta1f,{ const election = vueElection.stateElection stateChartTemplate.stateSelection .style('fill', d => { const region = binarySearch(election.regions, d.id, (a, b) => d3.ascending(a.id, b)) const {winner, margin, total} = region.election const winnerCandidate = winner ? election.candidates.find(({id}) => id === winner) : null return winnerCandidate ? winnerCandidate.color(Math.round(margin / total * 10000) / 100) : '#CDCDCD' }) stateChartTemplate.titles.text(d => { const region = binarySearch(election.regions, d.id, (a, b) => d3.ascending(a.id, b)) const {winner, margin, votes, total} = region.election const winnerCandidate = winner ? election.candidates.find(({id}) => id === winner) : null const winnerVotes = winner ? votes.find(({id}) => id === winner).votes : Math.max(...votes.map(({votes}) => votes)) return `${region.title} Winner: ${winnerCandidate ? winnerCandidate.name : 'Tie' } Percentage: ${Math.round(winnerVotes / total * 10000) / 100}% Margin: ${(margin).toLocaleString('en')}` }) const tossupCandidate = { id: null, name: 'Tossup', color: 'none', total: election.election.total - election.election.votes.reduce((val, {votes}) => val + votes, 0) } const candidateRows = stateChartTemplate.candidates .selectAll("g") .data([...election.candidates.map(({id: candidateId, name, color}) => { return { name, color: color(100), total: election.election.votes.find(({id}) => candidateId === id).votes } }), tossupCandidate]) .join(enter => { const rows = enter.append('g') rows.append(() => svg``) const candidateText = rows.append(() => svg` `) return rows }) .attr('transform', (_, i) => `translate(0,${i * 50})`) stateChartTemplate.svg.attr('viewBox', [0,0,975,700+50*candidateRows.size()+15]) candidateRows.select(".candidate-color").style("fill", ({color}) => color) candidateRows.select(".percentage").text(d => `${Math.round(d.total/election.election.total * 10000) / 100}%`) candidateRows.select(".name").text(d => d.name) candidateRows.select(".total").text(d => d.total.toLocaleString('en')) return stateChartTemplate.svg.node() } 37:T551,html` `38:T162e,VueRegionElection = ({ components: { LGeoJson: VL.LGeoJson }, inject: ["coordsToLatLng"], props: ['election', 'multimode', 'visible'], data: function() { return { regionLayers: this.election.regions.map(({id}) => ({id, clicked: false, layer: null})).sort((a, b) => d3.ascending(a.id, b.id)), geojsonLayer: null, regions: this.election.regions.slice().map(({type, id, title, geometry}) => { return { type, id, title, geometry } }), } }, mounted() { this.$nextTick(function() { this.geojsonLayer = this.$refs.geojsonLayer.mapObject }) }, methods: { $_highlightFeature(e) { const layer = e.target layer.setStyle({ weight: 2, color: '#666' }) if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { layer.bringToFront(); } }, $_resetHighlight(e) { const layer = e.target this.geojsonLayer.resetStyle(layer) }, $_findRegionLayer(featureId) { const index = binarySearchIndex(this.regionLayers, featureId, (a, b) => d3.ascending(a.id, b)) return this.regionLayers[index] }, setRegionClick(featureId, clicked) { const regionLayer = this.$_findRegionLayer(featureId) regionLayer.clicked = clicked }, getRegionClick(featureId) { const {clicked} = this.$_findRegionLayer(featureId) return clicked }, getLayer(featureId) { const {layer} = this.$_findRegionLayer(featureId) return layer }, setLayer(featureId, layer) { const regionLayer = this.$_findRegionLayer(featureId) regionLayer.layer = layer }, onAddLayer({id, title}, layer) { layer.bindTooltip(title) this.setLayer(id, layer) }, onRemoveLayer({id}, layer) { layer.unbindTooltip() this.setRegionClick(id, false) this.setLayer(id, null) }, onMouseoverLayer(e, {id}) { if (!this.getRegionClick(id)) { this.$_highlightFeature(e) } }, onMouseoutLayer(e, {id}) { if (!this.getRegionClick(id)) { this.$_resetHighlight(e) } }, onClickLayer(e, {id}) { let layerClicked = this.getRegionClick(id) this.setRegionClick(id, this.multimode.enabled && !layerClicked) layerClicked = this.getRegionClick(id) if (this.multimode.enabled && !layerClicked) { this.$_resetHighlight(e) this.$emit('remove-region', id) } else if (this.multimode.enabled && layerClicked) { this.$_highlightFeature(e) this.$emit('add-region', id) } else if (!this.multimode.enabled) { this.$emit('single-region-click', {election: this.election, region: id}) } }, onEachFeature(feature, layer) { const vlGeojson = this layer.on({ mouseover: e => vlGeojson.onMouseoverLayer(e, feature), mouseout: e => vlGeojson.onMouseoutLayer(e, feature), click: e => vlGeojson.onClickLayer(e, feature), add: e => vlGeojson.onAddLayer(feature, layer), remove: e => vlGeojson.onRemoveLayer(feature, layer) }) } }, watch: { winners: function(newWinners, oldWinners) { for (let i = 0; i < newWinners.length; i++) { const {id, winner: newWinner, margin: newMargin} = newWinners[i], {winner: oldWinner, margin: oldMargin} = oldWinners[i] if (newWinner != oldWinner || newMargin != oldMargin) { const layer = this.getLayer(id) this.geojsonLayer.resetStyle(layer) } } }, candidates: function(newCandidates, oldCandidates) { for (const winner of this.winners) { const winnerId = winner.winner const newCandidate = newCandidates.find(({id}) => id === winnerId), oldCandidate = oldCandidates.find(({id}) => id === winnerId) if (oldCandidate && newCandidate.color != oldCandidate.color) { const layer = this.getLayer(winner.id) this.geojsonLayer.resetStyle(layer) } } }, multimodeRegions: function(newRegions, oldRegions) { if (newRegions.length == 0) { for (const regionId of oldRegions) { const layerClicked = this.getRegionClick(regionId) if (layerClicked) { this.setRegionClick(regionId, false) const layer = this.getLayer(regionId) this.geojsonLayer.resetStyle(layer) } } } } }, computed: { candidates() { return this.election.candidates }, winners() { return this.election.regions.map(({id, election: {total, winner, margin}}) => { return { id, total, winner, margin } }).sort((a, b) => d3.ascending(a.id, b.id)) }, multimodeRegions() { return this.multimode.regions }, options() { return { coordsToLatLng: this.coordsToLatLng, onEachFeature: this.onEachFeature } }, optionsStyle() { const vlGeojson = this return function(feature) { const index = binarySearchIndex(vlGeojson.winners, feature.id, (a, b) => d3.ascending(a.id, b)) const {total, winner, margin} = vlGeojson.winners[index] const percentage = Math.round(margin / total * 10000) / 100 const fillColor = winner ? vlGeojson.candidates.find(({id}) => id === winner).color(percentage) : '#CDCDCD' return { color: 'white', weight: 0.5, fillColor, } } } }, template: ` ` })39:T7c5,VueControl = ({ props: ['mode'], components: { multiTable: VueControlMultiTable, LControl: VL.LControl }, computed: { listeners() { return { 'candidate-change': this.onCandidateChange, 'ordered-region-change': this.onOrderedRegionChange, 'single-region-change': this.onSingleRegionChange, 'multi-region-percentage-change': this.onMultiRegionChange, 'remove-candidate': this.onRemoveCandidate, 'change-candidate-row-settings': this.onChangeCandidateRowSettings } }, closeable() { const name = this.mode.name return ['Single Region', 'Multi Region'].includes(name) }, inNationMode() { return this.mode.name == 'National' } }, methods: { onAddCandidate() { this.$emit('add-candidate', this.mode.election) }, onCandidateChange(e) { this.$emit('candidate-change', e) }, onOrderedRegionChange(e) { this.$emit('ordered-region-change', e) }, onSingleRegionChange(e) { this.$emit('single-region-change', e) }, onMultiRegionChange(e) { this.$emit('multi-region-percentage-change', e) }, onClose() { this.$emit('close-mode') }, onEnableMultimode() { this.$emit('enable-multi-region-mode') }, onRemoveCandidate(e) { this.$emit('remove-candidate', e) }, onChangeCandidateRowSettings(e) { this.$emit('change-candidate-row-settings', e) } }, template: `

←

` })3a:Ta82,VueControlMultiTable = ({ components: { VueCandidateTable }, props: ['mode'], data: function() { return { modes: [ { name: 'National', title: () => 'National Vote Total', component: VueCandidateForm }, { name: 'Single Region', title: () => this.mode.region.title, component: VueRegionForm }, { name: 'Multi Region', title: () => 'National Vote Total (Multi Region Mode)', component: VueMultiRegionForm } ] } }, computed: { currentMode() { const {name: modeName} = this.mode const currentMode = this.modes.find(({name}) => name === modeName) return currentMode }, maxRegions() { return this.mode.election.regions.length }, formListeners() { return { 'ordered-region-change': this.onRegionRangeChange, 'candidate-change': this.onCandidateChange, 'multi-region-percentage-change': this.onMultiRegionPercentageChange, 'single-region-change': this.onTotalChange, } }, tableListeners() { return { 'remove-candidate': this.onRemoveCandidate, 'change-candidate-row-settings': this.onChangeCandidateRowSettings } }, candidates() { return this.mode.election.candidates }, electionInfo() { const election = this.currentMode.name == 'Single Region' ? this.mode.region : this.mode.election return { total: election.election.total, votes: election.election.votes } } }, methods: { onRemoveCandidate(e) { this.$emit('remove-candidate', {election: this.mode.election, candidate: e}) }, onCandidateChange(e) { this.$emit('candidate-change', {election: this.mode.election, candidate: e}) }, onRegionRangeChange(e) { this.$emit('ordered-region-change', {...e, election: this.mode.election}) }, onTotalChange(e) { this.$emit('single-region-change', { ...e, election: this.mode.election, region: this.mode.region}) }, onMultiRegionPercentageChange(e) { this.$emit('multi-region-percentage-change', { ...e, election: this.mode.election}) }, onChangeCandidateRowSettings(e) { this.$emit('change-candidate-row-settings', e) } }, template: ` ` })3b:T77f,VueCandidateTable = ({ components: { VueCandidateRow }, props: ["candidates", "votes", "total", "title", "candidateRowSettings"], computed: { listeners() { return { 'remove-candidate': e => this.$emit('remove-candidate', e), 'change-candidate-row-settings': e => this.$emit('change-candidate-row-settings', e) } }, tossupVotes: function () { return this.total - this.votes.reduce((t, c) => t + c.votes, 0) }, tossupCandidate() { return { id: null, name: 'Tossup', color: (_percentage) => 'none' } }, tossupSettings() { return { selected: false, focused: false, deletable: false, } }, }, methods: { getVotes(candidate) { return this.votes.find(({id}) => id === candidate.id).votes }, onChangeCandidateRowSettings(e) { this.$emit('change-candidate-row-settings', e) }, getCandidateSettings(candidate) { return this.candidateRowSettings.find(({id}) => id === candidate.id) }, onRemoveCandidate(e) { this.$emit('remove-candidate', e) } }, template: `

	Name	Votes	Percentage

` })3c:T6fb,VueCandidateRow = ({ props: ["candidate", "votes", "total", "settings"], methods: { onEnter: function () { this.$emit('change-candidate-row-settings', { candidate: this.candidate, settings: {...this.settings, focused: true} }) }, onLeave: function() { this.$emit('change-candidate-row-settings', { candidate: this.candidate, settings: {...this.settings, focused: false} }) }, onClick: function() { const currentSelected = this.settings.selected this.$emit('change-candidate-row-settings', { candidate: this.candidate, settings: {...this.settings, selected: !currentSelected} }) }, onRemoveCandidate() { this.$emit('remove-candidate', this.candidate) } }, computed: { percentage: function() { return Math.round(this.votes / this.total * 10000) / 100; }, listeners() { return { click: this.onClick, mouseenter: this.onEnter, mouseleave: this.onLeave } } }, template: ` {{ candidate.name }} {{ this.votes.toLocaleString('en') }} {{ percentage }}% X ` })3d:T716,VueCandidateForm = ({ components: { VueRangeNumber, VueSliderRange }, props: ["params"], data: function() { return { start: 1, end: this.params.election.regions.length, percentage: 50 } }, computed: { candidate() { return this.params.candidate }, max() { return this.params.election.regions.length } }, methods: { onNameChange: function(e) { this.$emit('candidate-change', {...this.candidate, name: e.target.value}) }, onColorChange: function(e) { const color = e.target.value this.$emit('candidate-change', { ...this.candidate, color: createColor(color), }) }, onSliderChange: function([start, end]) { this.start = start, this.end = end }, onPercentageChange: function(percentage) { this.percentage = percentage }, onApplyChange: function() { this.$emit('ordered-region-change', { candidate: this.candidate, range: { start: this.start, end: this.end, percentage: this.percentage } }) } }, template: ` ` })3e:T5c0,VueRegionForm = ({ components: { VueRangeNumber }, props: ["params"], computed: { candidateId() { return this.params.candidate.id }, region() { return this.params.region }, votes() { return this.region.election.votes.find(({id}) => id === this.candidateId).votes }, total() { return this.region.election.total }, maxVotes() { const votes = this.region.election.votes const tossup = this.total - votes.reduce((val, {votes}) => val + votes, 0) return this.votes + tossup }, maxPercentage() { return Math.round(this.maxVotes / this.total * 10000) / 100 }, percentage: function() { return Math.round(this.votes / this.total * 10000) / 100 } }, methods: { onTotalChange: function(e) { this.$emit('single-region-change', {candidate: this.params.candidate, votes: e}) }, onPercentageChange: function(e) { this.$emit('single-region-change', {candidate: this.params.candidate, votes: Math.ceil(e * this.total / 100)}) } }, template: ` ` })3f:[] 31:{"id":"8f2f18e7ddfa360f","slug":"2016-vote-allocation-map-by-county","title":"2016 Vote Allocation Map","thumbnail":"3468ec64c79a4ced63076f1eda4d33ba05b25094db7b4ab851224ed94ae4bf7a","access_level":"public","create_time":"$D2019-10-09T04:42:53.604Z","update_time":"$D2021-12-14T20:25:22.030Z","view_time":null,"first_public_time":"$D2020-02-10T06:13:13.063Z","has_unpublished_edits":null,"fork":{"id":"2695158caff5fb0c","slug":"choropleth","title":"Choropleth","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6d821c25a3f341ef","login":"zavierhenry","name":"Zavier Henry","avatar_url":"https://avatars-next.observableusercontent.com/9e621bf2ef2d3a2a52938da54c919c40b2353f2c7b9df5111ed2519514a27790","tier":"starter_2024"},"version":4631,"publish_version":4631,"role":null,"authored":false,"authors":[{"type":"individual","id":"40132f2a0a48222e","login":"zavierhenry","name":"Zavier Henry","avatar_url":"https://avatars-next.observableusercontent.com/9e621bf2ef2d3a2a52938da54c919c40b2353f2c7b9df5111ed2519514a27790","tier":null}],"members":[{"type":"individual","id":"40132f2a0a48222e","login":"zavierhenry","name":"Zavier Henry","avatar_url":"https://avatars-next.observableusercontent.com/9e621bf2ef2d3a2a52938da54c919c40b2353f2c7b9df5111ed2519514a27790","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"2016 Vote Allocation Map","cells":[{"id":0,"value":"md`# 2016 Vote Allocation Map\n\nThis interface allows you to make custom 2016 national election maps by county and by state. Scroll down to see the results of your custom map at the county and state level`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2843,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2987,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2815,"value":"countyMapResults = md`# County Map Results\n\nThis is the county level result of using the map interface. Each circle represents a county. The larger the circle, the bigger the population of the county. The color represents the winner of the county, with the intensity of the color representing the margin of victory. The grayer the color, the closer the margin of victory\n\nHover over the circle for more information on the county. You can click on the 3 dots to the left when hovering over the map to download the map as a PNG or SVG. \n\nInspiration for map shape and some of the code used to make said shape comes from [this ObservableHQ project](https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2838,"value":"md`# State Map Results\n\nThis is the state level map result of using the map interface. The color scheme is the same as the county map. Just like the county map, you can hover over each region to learn more. See the [County Map Results](https://observablehq.com/d/8f2f18e7ddfa360f#countyMapResults) section to learn how to download the map as a SVG or PNG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2284,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2211,"value":"countyChartTemplate = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, 975, 900])\n\n const simulation = createSimulation(counties)\n \n const countySelection = svg.append(\"g\")\n .selectAll(\"path\")\n .data(counties)\n .join(\"circle\")\n .classed(\"county-path\", true)\n \n const titles = countySelection.append(\"title\");\n \n const candidates = svg.append(\"g\")\n .attr(\"transform\", \"translate(70,700)\")\n \n simulation.on('tick', () => {\n countySelection\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", d => d.properties.radius)\n })\n \n return {\n svg: svg,\n countySelection: countySelection,\n titles: titles,\n candidates\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2624,"value":"stateChartTemplate = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, 975, 900])\n \n const stateSelection = svg.append(\"g\")\n .selectAll(\"path\")\n .data(stateFeatures)\n .join(\"path\")\n .classed(\"county-path\", true)\n .style(\"stroke\", \"white\")\n .attr(\"d\", path)\n \n const titles = stateSelection.append(\"title\");\n \n svg.append(\"path\")\n .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))\n .attr(\"fill\", \"none\")\n .style(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n \n const candidates = svg.append(\"g\")\n .attr(\"transform\", \"translate(70,700)\")\n \n return {\n svg: svg,\n stateSelection: stateSelection,\n titles: titles,\n candidates\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"createColor = color => {\n var length = 20\n var scale = d3.scaleLinear()\n .domain([0, 100])\n .range(['#CDCDCD', color])\n \n return x => d3.color(scale(x)).formatHex()\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2332,"value":"radiusScale = {\n const populationMax = d3.max(electionTotals, ([_, count]) => count)\n const maxRadius = 25\n \n return d3.scaleSqrt()\n .domain([0, populationMax])\n .range([1, maxRadius])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3899,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3969,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3877,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3616,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3071,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3141,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3513,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3928,"value":"VueMultiRegionForm = ({\n components: { VueRangeNumber },\n props: [\"params\"],\n data: function() {\n return { percentage: 50 }\n },\n methods: {\n applyPercentageChange() {\n this.$emit('multi-region-percentage-change', {candidate: this.params.candidate, percentage: this.percentage})\n }\n },\n template: `\n \n `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3178,"value":"VueSliderRange = {\n \n return {\n components: { VueNumber, VueDoubleRange },\n props: [\"container\", \"left\", \"right\"],\n methods: {\n onNumberChange: function(e, name) {\n if (name == 'left') {\n this.$emit('change', [e, this.right])\n } else if (name == 'right') {\n this.$emit('change', [this.left, e])\n }\n },\n onSliderChange: function(e) {\n this.$emit('change', e)\n },\n },\n template: `\n

\n \n \n \n

\n `\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3253,"value":"VueDoubleRange = ({\n props: [\"slider\", \"left\", \"right\"],\n mounted() {\n this.$nextTick(function() {\n const {min, max, step} = this.slider\n this.$el.appendChild(this.makeSlider())\n })\n },\n methods: {\n makeSlider: function() {\n const {min, max, step} = this.slider\n return rangeSlider({ min, max, step, value: [this.left, this.right], display: (_v) => \"\" })\n },\n onSliderChange: function(e) {\n this.$emit('slider-change', e.target.value)\n }\n },\n updated() {\n this.$nextTick(function() {\n const [sliderLeft, sliderRight] = this.$el.firstChild.value\n if (sliderLeft != this.left || sliderRight != this.right) {\n this.$el.replaceChild(this.makeSlider(), this.$el.firstChild)\n }\n })\n },\n template: `

`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2999,"value":"VueRangeNumber = ({\n components: { VueSingleRange, VueNumber },\n model: {\n prop: 'value', event: 'change'\n },\n props: ['container', 'value'],\n methods: {\n onChange: function(e) {\n this.$emit('change', e)\n }\n },\n template: `\n

\n \n \n

`\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3398,"value":"VueSingleRange = ({\n props: ['container', 'value'],\n methods: {\n onInput: function(e) {\n this.$emit('input', parseInt(e.target.value))\n }\n },\n template: ``\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3392,"value":"VueNumber = ({\n props: ['container', 'value'],\n methods: {\n onChangeNumber: function(e) {\n let value = parseInt(e.target.value)\n if (value > this.container.max) {\n value = this.container.max\n } else if (value < this.container.min) {\n value = this.container.min\n }\n \n this.$emit(\"change\", value)\n }\n },\n template: ``\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"electionTotals = await\nd3.csv(\"https://gist.githubusercontent.com/ZavierHenry/a3035f06be9b1461daf74ce2032aa362/raw/ca78ec931708fb3db804e38e259631cd144fafaf/election_count.csv\", ({code, count}) => [code,+count])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2779,"value":"function createSimulation(nodes) {\n const nodePadding = 0.1\n \n const simulation = d3.forceSimulation(nodes)\n .force(\"cx\", d3.forceX().x(_d => 975 / 2).strength(0.02))\n .force(\"cy\", d3.forceY().y(_d => 610 / 2).strength(0.02))\n .force(\"x\", d3.forceX().x(d => d.properties.centroid[0]).strength(0.3))\n .force(\"y\", d3.forceY().y(d => d.properties.centroid[1]).strength(0.3))\n .force(\"charge\", d3.forceManyBody().strength(-1))\n .force(\"collide\", d3.forceCollide().radius(d => d.properties.radius + nodePadding).strength(1))\n .alphaMin(0.01)\n \n invalidation.then(() => simulation.stop())\n return simulation\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"color = d3.scaleQuantize([1, 10], d3.schemeOranges[9])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3770,"value":"function binarySearchIndex(arr, target, cmpFunction) {\n let start = 0, end = arr.length - 1\n \n while (start <= end) {\n let mid = Math.floor((start + end) / 2)\n let cmp = cmpFunction(arr[mid], target)\n \n if (cmp == 0) {\n return mid\n } else if (cmp < 0) {\n start = mid + 1\n } else {\n end = mid - 1\n }\n }\n \n return -1\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4597,"value":"function binarySearch(arr, target, cmpFunction) {\n const index = binarySearchIndex(arr, target, cmpFunction)\n return (index >= 0) ? arr[index] : null\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3996,"value":"function binaryInsert(arr, target, cmpFunction) {\n \n if (arr.length == 0) {\n arr.push(target)\n return;\n }\n \n let start = 0, end = arr.length - 1\n \n while (start < end) {\n let mid = Math.floor((start + end) / 2)\n let cmp = cmpFunction(arr[mid], target)\n\n if (cmp == 0) {\n arr.splice(mid+1, 0, target)\n } else if (cmp < 0) {\n start = mid + 1\n } else {\n end = mid - 1\n }\n \n }\n \n arr.splice(cmpFunction(arr[start], target) < 0 ? start + 1 : start, 0, target)\n \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3852,"value":"stateFeatures = topojson.feature(us, us.objects.states).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3845,"value":"countyFeatures = topojson.feature(us, us.objects.counties).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2336,"value":"counties = topojson.feature(us, us.objects.counties).features.map(county => {\n const state = us.objects.states.geometries.find(state => state.id === county.id.substring(0, 2))\n const [_, count] = electionTotals.find(([id, _]) => id === county.id)\n \n return {\n ...county,\n properties: {\n ...county.properties,\n state: state.properties.name,\n population: count,\n centroid: turf.centroid(county.geometry).geometry.coordinates,\n radius: radiusScale(count)\n }\n }\n})\n.sort((a, b) => d3.descending(a.properties.population, b.properties.population))\n.map(d => {\n let geometry\n if (d.geometry.type !== \"MultiPolygon\") {\n geometry = d.geometry\n } else {\n geometry = {\n type: d.geometry.type,\n coordinates: d.geometry.coordinates.sort((a, b) => d3.descending(turf.area(turf.polygon(a)), turf.area(turf.polygon(b)))).slice(0, 1)\n }\n }\n \n return {\n ...d,\n geometry\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3833,"value":"stateBorder = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2303,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3741,"value":"VL = require(\"vue2-leaflet\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2980,"value":"Vue = require('vue')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3143,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 32:"$31:body"