2a:null 2b:["$","title",null,{"children":"Election Maps for Incomplete Results | Stephen Osserman | Observable"}] 30:T856,packedDotAnnotation = html`

In this map of ${state} current vote tallies are shown along with the estimated number of votes left to count. Each dot represents approximately ${d3.format(",.1r")(packedDotPop) + ' ' + state} voters.

One blue dot = ~${d3.format(",.1r")(packedDotPop)} Votes Counted for the Democrat

One red dot = ~${d3.format(',.1r')(packedDotPop)} Votes Counted for the Republican

One grey dot = ~${d3.format(',.1r')(packedDotPop)} Votes Left to Count

`31:T863,dotDensityAnnotation = html`

In this map of ${state} current vote tallies are shown along with the estimated number of votes left to count. Each dot represents approximately ${d3.format('0.1s')(dotPop)} Ohio voters.

One blue dot = ~${d3.format(",.1r")(dotPop)} Votes Counted for the Democrat

One red dot = ~${d3.format(',.1r')(dotPop)} Votes Counted for the Republican

One yellow dot = ~${d3.format(',.1r')(dotPop)} Votes Left to Count

`32:T497,dotsMap = { const mapSpecifier = "dots" const container = d3.create('div') const map = container.append('div').style('width',width*mapScale + 'px').style('height',height*mapScale + 'px').style('padding','0px').style('display','inline-block') const points = map.append("canvas") .style('position', 'absolute') .attr("width", width * mapScale) .attr("height", height * mapScale) const context = points.node().getContext("2d"); curDots.forEach(d => { context.fillStyle = d.color + proportionToHex(0.7); // for opacity of 0.7 context.beginPath(); context.arc(d.coordsProjected[0], d.coordsProjected[1], 0.2, 0, 2 * Math.PI, true); context.fill(); context.closePath(); }); const svg = map.append('svg') .style('position', 'absolute').style('max-width','100%') .attr('height', context.canvas.height) .attr('width', context.canvas.width) const g = svg.append('g') g.append('g').call(addCountiesToMap, mapSpecifier, 0.2) g.append('g').call(addStateOutlineToMap) g.append('g').call(addCityLabels) container.call(addSidebar, mapSpecifier) return container.node() }33:Tc4a,makeResultsTable = function(place, dd, mapSpecifier) { let [demVotes, repVotes, totalVoters] = [+dd.DemVotes, +dd.RepVotes, +dd.TotalVoters] let demoninator = demVotes + repVotes; if(mapSpecifier != 'choropleth' & mapSpecifier != 'bubbles') {demoninator = totalVoters} let outputHtml = `

${place} Results

` if (mapSpecifier != 'choropleth' & mapSpecifier != 'bubbles' ) { outputHtml += `

	Candidate	Votes
	Republican	${d3.format(",")(repVotes)}
	Democrat	${d3.format(",")(demVotes)}
	Est. Left to Count	~${d3.format(",.2r")(totalVoters - (demVotes + repVotes))}

` } else { outputHtml += `

Est. ${d3.format('.0%')((demVotes+ repVotes)/totalVoters)} votes in

` } outputHtml += `

` return outputHtml }34:[{"id":"3fb5509ed9a3d619abfd225a4acd15b4b3e95b1ce58e0a998e9ca45b1787fe61604fef10aa127f4689bec0ad6339d0279f3b491b84850fa57941cec5598bdd36","href":"https://static.observableusercontent.com/files/3fb5509ed9a3d619abfd225a4acd15b4b3e95b1ce58e0a998e9ca45b1787fe61604fef10aa127f4689bec0ad6339d0279f3b491b84850fa57941cec5598bdd36","name":"BubbleAnnot1@1.png","type":"image/png","lastModified":1635574747698.447,"size":31175},{"id":"39073dc0d9ebd711d9bf9df9c1a88016d76a2d36daf780d6d04ce4b61edf7fa089d482b98e846e458c413285022807e0d35f11e2218a7450e6ab565b3c2d431f","href":"https://static.observableusercontent.com/files/39073dc0d9ebd711d9bf9df9c1a88016d76a2d36daf780d6d04ce4b61edf7fa089d482b98e846e458c413285022807e0d35f11e2218a7450e6ab565b3c2d431f","name":"BubbleAnnot2.png","type":"image/png","lastModified":1635574924693.238,"size":28319},{"id":"6782765915aee7cff3cd0994a914a0d9140e4cd0c49c30fd2f03fa8344e0ab0bd8465191f6e3e82d7440b4682f44b37bcab6444d057388b74bb9e7664ea921e4","href":"https://static.observableusercontent.com/files/6782765915aee7cff3cd0994a914a0d9140e4cd0c49c30fd2f03fa8344e0ab0bd8465191f6e3e82d7440b4682f44b37bcab6444d057388b74bb9e7664ea921e4","name":"BubbleAnnot3.png","type":"image/png","lastModified":1635574936224.274,"size":42758},{"id":"4feaf828d91c864718bfa6b3a310b6c331477bfc945a0d96c968d9d5ca5af71aaca305438f3d03ac16a4ba7ada4925dad85a65ff25a7f2e0a8a467277d364124","href":"https://static.observableusercontent.com/files/4feaf828d91c864718bfa6b3a310b6c331477bfc945a0d96c968d9d5ca5af71aaca305438f3d03ac16a4ba7ada4925dad85a65ff25a7f2e0a8a467277d364124","name":"DonutAnnote@1.png","type":"image/png","lastModified":1635575344776.604,"size":81072},{"id":"8d929be3478bab5e56c70eef6ac2dda24a7a70dfa7f044fe704df4525a13987ff6f117aaa124f67d33f3061bedf950065658aeaf3534ce3a6582a5feed95fd3c","href":"https://static.observableusercontent.com/files/8d929be3478bab5e56c70eef6ac2dda24a7a70dfa7f044fe704df4525a13987ff6f117aaa124f67d33f3061bedf950065658aeaf3534ce3a6582a5feed95fd3c","name":"BubbleAnnot4@2.png","type":"image/png","lastModified":1635578246086.52,"size":48768},{"id":"bccb4e5313817e5263f5ab8871b177dd7b0277d3784f50ac80c4d144566c3c071fe5cc53bde89f3aaa6dbd7bdd7f3e6cb3db5ee126afcd3424f6348665bbb6a8","href":"https://static.observableusercontent.com/files/bccb4e5313817e5263f5ab8871b177dd7b0277d3784f50ac80c4d144566c3c071fe5cc53bde89f3aaa6dbd7bdd7f3e6cb3db5ee126afcd3424f6348665bbb6a8","name":"annotePackedDot.png","type":"image/png","lastModified":1639245991990.393,"size":49285},{"id":"4413a2c8d65d4142d4c75a834e9c5bd37305ac9acb2102dc00d14d5fd8fc87aedaea503fec066be920aacf0c6aa87c4b74a51454e6092a4945ef4a1658856ec9","href":"https://static.observableusercontent.com/files/4413a2c8d65d4142d4c75a834e9c5bd37305ac9acb2102dc00d14d5fd8fc87aedaea503fec066be920aacf0c6aa87c4b74a51454e6092a4945ef4a1658856ec9","name":"annoteDonut2.png","type":"image/png","lastModified":1639242854148.346,"size":124400}] 2e:{"id":"a35237992c21133d","slug":"election-maps-for-incomplete-results","title":"Election Maps for Incomplete Results","thumbnail":"80323dac87792f3ca9f94f2fb5a0d9810b3099ad7d741d528934bcd9ea185bf9","access_level":"public","create_time":"$D2021-10-15T04:56:52.253Z","update_time":"$D2024-02-23T17:20:47.280Z","view_time":null,"first_public_time":"$D2022-12-05T21:20:27.345Z","has_unpublished_edits":null,"fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"1be7bc7ec19604c8","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":"starter_2024"},"version":2327,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d0fe706fc5eb3479","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":null}],"members":[{"type":"individual","id":"d0fe706fc5eb3479","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":null,"role":"editor"}],"comments":[{"id":"64a0e55f3a799d65","reply_to_id":null,"content":"You may also test stripped circles !\nSee: https://observablehq.com/@jgaffuri/striped-circle?collection=@jgaffuri/striped-circles","create_time":"$D2024-03-08T10:47:38.281Z","update_time":"$D2024-03-08T10:48:10.590Z","resolved":false,"user":{"type":"individual","id":"b69434aca236a98c","login":"jgaffuri","name":"jgaffuri","avatar_url":"https://avatars-next.observableusercontent.com/6a614d4bdc38fdf3e8462e2ab8fed865c094d58907a82e9b357bacec416b8fca","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"1cccbd1aea17bc7b","slug":"partial-election-results","title":"Partial Election Results","owner":{"id":"1be7bc7ec19604c8","login":"osserman","name":"Stephen Osserman"}},"type":"notebook","body":{"titling":"auto","title":"Election Maps for Incomplete Results","cells":[{"id":0,"value":"# Election Maps for Incomplete Results","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2300,"value":"This notebook contains a range of election result maps developed in a collaboration with Prof. Alexander Coppock. \n\nWe undertook this project in response to the typical lack of uncounted ballots visually displayed in elections results. \n\nOur goal in exploring different approaches to visualizing partial election night results was to understand the impact of different maps on who viewers think will win, and how certain/uncertain viewers are about the outcome they expect. \n\nThese maps use simulated / hypothetical election results for different scenarios. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"viewof state = Inputs.radio([\"Arizona\", \"Florida\", \"Georgia\", \"Ohio\"], {label: \"State\", value: \"Ohio\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof scenario = Inputs.radio([\"Democrats lead early and Democrats win\", \n \"Democrats lead early and Republicans win\", \n \"Republicans lead early and Republicans win\", \n \"Republicans lead early and Democrats win\"], {label: \"Scenario\", value: \"Republicans lead early and Democrats win\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof statePctRecorded = Inputs.radio([\"10\", \"50\", \"90\"], {label: \"Vote Pct Recording\", value: \"50\", format: d=> d + '%' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2318,"value":"** Scenario **\n\n**Vote Tallied**\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1491,"value":"

Choropleth

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"choroplethAnnotation = html`

In this map of ${state} the current leader is shown in each county. The county is colored red if the Republican has the most and blue if the Democrat has the most. Counties that are grey have not had any votes counted.

$\"legend$

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"choroplethMap = {\n const mapSpecifier = \"choropleth\"\n const container = d3.create('div') \n const map = container.append('div').style('width',mapScale * 100 + '%').style('display','inline-block')\n const svg = map.append(\"svg\").attr(\"viewBox\", [0, 0, width*mapScale , height*mapScale]);\n const g = svg.append(\"g\");\n \n g.append('g').attr('id',mapSpecifier).call(addCountiesToMap, mapSpecifier) // special case in the function for chorotpleth mapSpecifier\n\n g.append('g').call(addStateOutlineToMap)\n\n g.append('g').call(addCityLabels)\n\n container.call(addSidebar, mapSpecifier)\n \n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1493,"value":"

Bubble

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1472,"value":"bubbleAnnotation = html`

In this map of ${state} the estimated voting population and the current leader is shown. Each county on the map has a bubble that is colored red if the Republican has the most votes and blue if the Democrat has the most. Counties whose bubbles are colored grey have not had any votes counted. The bubble sizes relate to the estimated voting population of the County.

\n $\"legend$ \n $\"legend$ \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"bubblesMap = {\n const mapSpecifier = \"bubbles\"\n const container = d3.create('div') \n const map = container.append('div').style('width',mapScale * 100 + '%').style('display','inline-block')\n const svg = map.append(\"svg\").attr(\"viewBox\", [0, 0, width*mapScale , height*mapScale]);\n const g = svg.append(\"g\");\n \n g.append('g').attr('id',mapSpecifier).call(addCountiesToMap, mapSpecifier) \n \n g.append('g').call(addStateOutlineToMap)\n\n g.append('g').call(addBubblesToMap)\n\n g.append('g').call(addCityLabels)\n\n container.call(addSidebar, mapSpecifier)\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"

Bubble With Outstanding

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"bubblesOpacityAnnotation = html`

In this map of ${state} the estimated voting population and the current leader is shown, as well as the estimated number of votes left to be counted. Each county on the map has a bubble that is colored red if the Republican has the most votes and blue if the Democrat has the most. Counties whose bubbles are colored grey have not had any votes counted. The bubble sizes relate to the estimated voting population of the County. For Counties with more estimated votes left to be counted the bubbles are shaded lighter / more transparent.

\n $\"legend$ \n $\"legend$ \n $\"legend$ \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"bubblesOpacityMap = {\n const mapSpecifier = \"bubblesOpacity\"\n const container = d3.create('div') \n const map = container.append('div').style('width',mapScale * 100 + '%').style('display','inline-block')\n const svg = map.append(\"svg\").attr(\"viewBox\", [0, 0, width*mapScale , height*mapScale]);\n const g = svg.append(\"g\");\n \n g.append('g').attr('id',mapSpecifier).call(addCountiesToMap, mapSpecifier) \n \n g.append('g').call(addStateOutlineToMap)\n\n g.append('g').call(addBubblesToMap, true)\n\n g.append('g').call(addCityLabels)\n\n container.call(addSidebar, mapSpecifier)\n \n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"

Bubbles - Shades of Purple + Outstanding Vote

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"

In this map of ${state} the estimated voting population and the current vote tally is shown, as well as the estimated number of votes left to be counted. Each county on the map has a bubble that is colored on a scale from red if the Republican has 100% of votes counted to blue if the Democrat has 100% of votes counted. Counties whose bubbles are colored grey have not had any votes counted. The bubble sizes relate to the estimated voting population of the County. For Counties with more estimated votes left to be counted the bubbles are shaded lighter / more transparent.

\n $\"legend$ \n $\"legend$ \n $\"legend$ \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"bubblesOpacityRampedMap = {\n const mapSpecifier = \"bubblesOpacityRamped\"\n const container = d3.create('div') \n const map = container.append('div').style('width',mapScale * 100 + '%').style('display','inline-block')\n const svg = map.append(\"svg\").attr(\"viewBox\", [0, 0, width*mapScale , height*mapScale]);\n const g = svg.append(\"g\");\n \n g.append('g').attr('id',mapSpecifier).call(addCountiesToMap, mapSpecifier) \n \n g.append('g').call(addStateOutlineToMap)\n\n g.append('g').call(addBubblesToMap, true, true)\n\n g.append('g').call(addCityLabels)\n\n container.call(addSidebar, mapSpecifier)\n \n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"

Donut

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1588,"value":"donutAnnotation = html`

In this map of ${state} the estimated voting population is shown along with the vote counts of each party, and estimated votes left to count. Each county on the map has a graphic. The graphic is split into 3 sections, with their sizes based on Democratic votes counted (in blue), Republican votes counted (in red) and estimated votes left to count (in grey). The size of the graphic relates to the estimated voting population of the County.

$\"legend$

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"donutsMaps = { \n const mapSpecifier = \"donuts\"\n const container = d3.create('div') \n const map = container.append('div').style('width',mapScale * 100 + '%').style('display','inline-block')\n const svg = map.append(\"svg\").attr(\"viewBox\", [0, 0, width*mapScale , height*mapScale]);\n const g = svg.append(\"g\");\n \n g.append('g').attr('id',mapSpecifier).call(addCountiesToMap, mapSpecifier) \n \n g.append('g').call(addCountiesToMap, mapSpecifier, '0.2')\n\n g.append('g').call(addStateOutlineToMap)\n \n g.append('g').call(addDonutsToMap)\n \n g.append('g').call(addCityLabels)\n\n container.call(addSidebar, mapSpecifier)\n\n return container.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1617,"value":"

Packed Dot

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"packedDotsMap = { \n const mapSpecifier = \"packedDots\"\n const container = d3.create('div') \n const map = container.append('div').style('width',mapScale * 100 + '%').style('display','inline-block')\n const svg = map.append(\"svg\").attr(\"viewBox\", [0, 0, width*mapScale , height*mapScale]);\n const g = svg.append(\"g\");\n \n g.append('g').attr('id',mapSpecifier).call(addCountiesToMap, mapSpecifier) \n \n g.append('g').call(addCountiesToMap, mapSpecifier, '0.2')\n\n g.append('g').call(addStateOutlineToMap)\n \n g.append('g')\n .selectAll('g').data(circlePackData).join('g')\n .attr('transform', d=> 'translate(' + (d.x-d.r) + ' ' + (d.y-d.r) + ')' )\n .selectAll('circle').data(d=> d.children).join('circle')\n .attr('cx', d=> d.x).attr('cy', d=> d.y).attr('r', d=> d.r).attr('fill',d=> d.col) \n \n g.append('g').call(addCityLabels)\n\n container.call(addSidebar, mapSpecifier)\n\n return container.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1695,"value":"

Dot Density

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md `## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"### Load Data and Prepare With Current Selections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {data, states, countyShapes, stateCitiesGeo, stateShapes, stateDots, countyPartyProps} from \"0669feac40db8ca4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2096,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"curData = data.filter(d => d.State == state & d.Scenario == scenario & d.StatePctRecorded == statePctRecorded)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"curStateData = ({\n 'DemVotes': d3.sum(curData, d=> +d.DemVotes),\n 'RepVotes': d3.sum(curData, d=> +d.RepVotes),\n 'TotalVoters': d3.sum(curData, d=> (+d.DemVotes) + (+d.RepVotes) + (+d.RemainingVotes))\n}) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"curStateShape = stateShapes.features.filter(d => d.id == states.get(state).FIPS)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"curCountyShapes = countyShapes.features.filter(d => d.id.slice(0,2) == states.get(state).FIPS)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2298,"value":"curCountyShapes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"shapesWithDataCounty = curCountyShapes // Counties for current state selected \n .map(s => {\n let curCountyResults = curData.filter(d=> d.FIPS == s.id)[0]\n let curColor = curCountyResults && +curCountyResults.DemVotes == +curCountyResults.RepVotes ? '#ccc' : \n curCountyResults && +curCountyResults.DemVotes > +curCountyResults.RepVotes ? '#2e74c0' : \n '#cb454a';\n let colRamp = d3.scaleLinear().domain([0, 1]).range([\"#2e74c0\", \"#cb454a\"])\n let curColorRamped = colRamp(+curCountyResults.RepVotes / (+curCountyResults.DemVotes + +curCountyResults.RepVotes))\n return ({ \n ...s,\n ...curCountyResults,\n color: curColor,\n colorRamped: curColorRamped,\n centroid: turf.centroid(s),\n TotalVoters: (+curCountyResults.DemVotes) + (+curCountyResults.RepVotes) + (+curCountyResults.RemainingVotes)\n })\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1631,"value":"colRamp = d3.scaleLinear().domain([0, 1]).range([\"#2e74c0\", \"#cb454a\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"colRamp(0.75)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"curStateCities = stateCitiesGeo.get(state)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"### Prepare Donut and Dot Packing Data and Elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"pie = d3.pie()\n .startAngle( Math.PI).endAngle(-1* Math.PI)\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"circles = {\n let localNodes = shapesWithDataCounty\n .map(d => {\n let p = projection(d.centroid.geometry.coordinates) || [0, 0];\n return {\n ...d,\n r: donutRadiusScale(d.TotalVoters),\n cx: p[0],\n cy: p[1], \n x: p[0],\n y: p[1]\n };\n })\n .filter(d => !isNaN(d.TotalVoters));\n\n \n let simulation = d3\n .forceSimulation(localNodes)\n .force(\n \"collide\",\n d3\n .forceCollide()\n .radius(d => d.r * 1.05) // for spacing by metric\n .strength(0.65)\n )\n .force(\n \"x\",\n d3.forceX(d => {\n return d.cx;\n })\n )\n .force(\n \"y\",\n d3.forceY(d => {\n return d.cy;\n })\n );\n\n simulation.tick(200);\n\n localNodes.sort((a, b) => a.metric - b.metric);\n return localNodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"pieData = circles.map(d => ({id: d.id, \n data: [\n {name: 'rep', value: d.RepVotes, ...d}, \n {name: 'remaining', value: d.RemainingVotes, ...d}, \n {name: 'dem', value: d.DemVotes, ...d}\n ]\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"colors = ({dem :\"#2e74c0\",rep : \"#cb454a\", remaining: '#bbb' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1284,"value":"packedDotRadius = ( 0.037 * width * mapScale )* (1.5 / 30 ) // radius for inner dot. Should probably change it to function of max donut size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"maxPackedDots = 208 // number of dots to put in the biggest County. ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1269,"value":"packedDotPop = // population associated with 1 dot it biggest County. \n d3.max(shapesWithDataCounty, d=> d.TotalVoters) / maxPackedDots","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"pack = (data,outerRadius) => d3.pack()\n .size([outerRadius*2, outerRadius*2])\n .padding(1)\n .radius(d=> d3.min([packedDotRadius, outerRadius]))\n (d3.hierarchy(data));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"circlePackData = \n circles.map( d=> {\n let packedDotCount = d3.max([1, Math.round(d.TotalVoters / packedDotPop)]) // d3.max to ensure dots > 0\n let countyPack = pack( {children:d3.range(packedDotCount)}, d.r) \n return { \n r: countyPack.children.length > 1 ? countyPack.r : d.r, \n x: d.x,\n y: d.y, \n children: countyPack.children.map(c => ({x: c.x, y: c.y, r: c.r, col: circlePackDotColor(d.DemVotes, d.RepVotes, d.TotalVoters)}))\n } ;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"circlePackDotColor = (demVoters, repVoters, totalVoters, colorScale = ({dem: \"#2e74c0\", rep: \"#cb454a\", remaining: '#BBB' })) => {\n let rand = Math.random() \n if (rand < +demVoters / +totalVoters ) { \n return colorScale.dem \n } else if (rand < (+demVoters + +repVoters)/ +totalVoters) {\n return colorScale.rep\n } else {\n return colorScale.remaining\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"### Prepare Dot Map Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"curProps = countyPartyProps.get(state).get(scenario).get(statePctRecorded)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2196,"value":"dotPop = // population associated with 1 dot. \n d3.sum(shapesWithDataCounty, d=> d.TotalVoters) / curDots.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"dotColor = function(propArray, randNum, colorScale = ({dem: \"#2e74c0\", rep: \"#cb454a\", remaining: '#fbf418' })) {\n if(+randNum < +propArray[0]){\n return colorScale.dem\n } else if(+randNum < +propArray[1]) {\n return colorScale.rep \n } else { \n return colorScale.remaining\n } \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"curDots = stateDots.get(state)\n .map( d => {\n return {coordsProjected: projection(d.coords), \n color: dotColor(curProps.get(d.FIPS), d.rand) \n } \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"proportionToHex = x => (Math.round(x * 255)).toString(16); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"proportionToHex(0.75)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"### Prepare Projection for All Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"stateScales = ({\n Arizona: 6000,//4500,\n Florida: 5500,//4000, \n Georgia: 8500,//6000,\n Ohio: 8500//6000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"curStateCentroidCoords = turf.centroid(curStateShape[0]).geometry.coordinates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"projection = \n d3.geoAlbers()\n .rotate([(state == 'Arizona' ? 111.5 : -curStateCentroidCoords[0]), 0])\n .center([0, curStateCentroidCoords[1]])\n .fitSize([width*mapScale, height*mapScale], curStateShape[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"### Prepare Other Generic Map Elements and Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"mapScale = (sidebarPlotPixels > 0.12 * width ? 1 : 0.75)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"height = width * 7/9","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"bubbleRadiusScale = d3.scaleSqrt()\n .domain([0, d3.max(shapesWithDataCounty.map(d=> d.TotalVoters))])\n .range([0, 0.035 * width * mapScale])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"donutRadiusScale = d3.scaleSqrt()\n .domain([0, d3.max(shapesWithDataCounty.map(d=> d.TotalVoters))])\n .range([0, 0.037 * width * mapScale])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"addStateOutlineToMap = (g) => {\n g.append( \"path\" )\n .attr( \"d\", d3.geoPath().projection(projection)(curStateShape[0] ))\n .attr( \"stroke\", \"#888\")\n .attr( \"fill\", \"none\")\n .attr( \"stroke-width\", 1.8)\n .attr( \"opacity\", 0.8 )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2296,"value":"curStateShape[0] ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2294,"value":"d3.geoPath().projection(projection)(curStateShape[0] )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2292,"value":"curStateShape[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"addCountiesToMap = (g, mapSpecifier, opacity = 0.8) =>\n g.selectAll(\"path\")\n .data(shapesWithDataCounty)\n .join( \"path\" )\n .attr( \"fill\",d => (mapSpecifier == \"choropleth\" ? d.color : \"#FFFFFF00\"))\n //.attr( \"fill\",d => (mapSpecifier == \"choropleth\" ? d.color : \"white\"))\n .attr( \"opacity\", opacity )\n .attr( \"stroke\", \"#999\")\n .attr( \"d\", d3.geoPath().projection(projection) )\n .on('click', function(event, d) {console.log(d)} )\n .on('mouseenter', function(event,d) {\n d3.select('#county-results-' + mapSpecifier).style('visibility','visible')\n .html(makeResultsTable(d.properties.name + ' County', d, mapSpecifier)) \n })\n .on('mouseleave', function(event,d){ \n d3.select('#county-results-' + mapSpecifier).style('visibility','hidden')\n })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"addCityLabels = g => {\n g.style('pointer-events', 'none')\n g.selectAll(\"circle\")\n .data(curStateCities.features)\n .join(\"circle\")\n .attr(\"fill\", \"#333\")\n .attr(\"r\", 2)\n .attr(\"transform\", d => {\n let p = projection(d.geometry.coordinates)\n return `translate(${p})`\n })\n \n g.selectAll(\"text\")\n .data(curStateCities.features)\n .join(\"text\")\n .attr(\"fill\", \"#222222\")\n .text(d=> d.id)\n .style('font-weight', 'bold')\n .style('font-size', '19px')\n .attr(\"x\", 4)\n .attr(\"y\", 10)\n .attr(\"transform\", d => {\n let p = projection(d.geometry.coordinates)\n return `translate(${p})`\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"addBubblesToMap = (g, remainingOpacity = false, colorRamp = false) => {\n let opacityMultiplier = (d) => remainingOpacity == false ? 1 : (1.5 * (+d.DemVotes + +d.RepVotes)/+d.TotalVoters)\n g.style('pointer-events', 'none')\n g.selectAll( \"circle\" )\n .data(shapesWithDataCounty)\n .join( \"circle\" )\n .attr( \"fill\", d=> colorRamp ? d.colorRamped : d.color )\n .attr( \"fill-opacity\", d=> 0.4 * opacityMultiplier(d) )\n .attr( \"stroke\", d=> colorRamp ? d.colorRamped : d.color)\n .attr( \"stroke-opacity\", d=> 0.4 + ( 0.4* opacityMultiplier(d)))\n .attr('r',d=> bubbleRadiusScale(d.TotalVoters))\n .attr(\"transform\", d => {\n let p = projection(d.centroid.geometry.coordinates)\n return `translate(${p})`\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"addDonutsToMap = g => {\n g.style('pointer-events', 'none')\n g.selectAll(\"g\")\n .data( pieData ) \n .join('g')\n .attr(\"class\", 'circles')\n .attr(\"id\", d => ('circles' + d.id))\n .attr('opacity', 0.75)\n .selectAll('path') \n .data((d,i)=> pie( pieData[i].data ))\n .join(\"path\")\n .attr(\"fill\", d => colors[d.data.name])\n .attr(\"d\", d3.arc()\n .innerRadius( d=> 0.4 * d.data.r)\n .outerRadius(d=> d.data.r))\n .attr(\"transform\", d=> \"translate(\" + d.data.x + \",\" + d.data.y + \")\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"### Prepare Sidebar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"addSidebar = (container, mapSpecifier) => {\n // add sidebar with counts for current state and placeholder for counties (to be triggered on mouseenter of counties). \n const sidebar = container.append('div').style('width','23%').style('vertical-align','top').style('display','inline-block') \n sidebar.append('div').html(makeResultsTable(state, curStateData, mapSpecifier))\n sidebar.append('div').style('padding-top','40px').attr('id', 'county-results-' + mapSpecifier).style('visibility','hidden')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"sidebarPlotPixels = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1948,"value":"sideBarColOpacityHex = 'B3'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"### Annotation Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"annote1Url = FileAttachment(\"BubbleAnnot1@1.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"annote2Url = FileAttachment(\"BubbleAnnot2.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"annote3Url = FileAttachment(\"BubbleAnnot3.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"annote4Url = FileAttachment(\"BubbleAnnot4@2.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"annoteDonut = FileAttachment(\"annoteDonut2.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2119,"value":"annotePackedDot = FileAttachment(\"annotePackedDot.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"### Load Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"turf = require('https://bundle.run/turf@3.0.14')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 2f:"$2e:body"