2f:T5d4,{ // create an object that has the candidate's names as keys and values of zero const results = candidates_in_race.reduce((agg, cur) => { agg[cur] = 0; return agg }, {}) // add up all of the results from every precinct data.features.forEach(d => { candidates_in_race.forEach(cand => { results[cand] += d.properties["results_" + subset_to_plot.value][cand] }) }) // format the data as a list of objects for Plot const to_plot = candidates_in_race.map(cand => ({candidate: cand, votes: results[cand]})) // add up how many ballots were cast const total_ballots = data.features.reduce((agg, cur) => agg + cur.properties["info_" + subset_to_plot.value]["BALLOTS CAST"], 0) // add up the total number of votes const total_votes = to_plot.reduce((agg, cur) => agg + cur.votes, 0) // add an item that is the difference between the ballots and votes to_plot.push({candidate: "Other / No Vote", votes: total_ballots - total_votes}) return Plot.plot({ y: { domain: d3.sort(to_plot, d => -d.votes).map(d => d.candidate) }, marginLeft: 200, marginRight: 75, marks: [ Plot.barX(to_plot, {x: "votes", y: "candidate", fill: d => d.candidate == "Other / No Vote" ? "#ccc" : d3.schemeSet2[2]}), Plot.text(to_plot, { x: "votes", y: "candidate", text: d => `${d.votes.toLocaleString()} (${Math.round(d.votes / total_ballots * 100)}%)`, textAnchor:"start" }) ] }) }30:T47c,{ const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); // we have to get at the data a couple times, so let's do that work once const accessor = d => d.properties["results_" + subset_to_plot.value][single_cand] // define a color scale const color = d3.scaleSequential(d3.interpolateYlOrRd).domain(d3.extent(data.features, accessor)) const legend = Legend(color, {tickFormat: d => d, title: "Votes per precinct"}) let val = "" svg.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", d => { return color(accessor(d)) }) .attr("stroke", data.features.length > 2000 ? null : "#ccc") .attr("d", path) .on("mouseover", function(e, d) { const tt = d3.select(this.parentNode.parentNode.parentNode).select(".tooltip") let val = accessor(d) tt.html(`Precinct ${d.properties.Precinct}
${val} votes`) }) return html` ${legend} ${svg.node()} ` }31:T601,{ const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); const sorted_results = d => Object.entries(d.properties["results_" + subset_to_plot.value]).sort((a,b) => d3.descending(a[1], b[1])) const winner_obj = d => sorted_results(d)[0] const runnerup_obj = d => sorted_results(d)[1] const winner = d => winner_obj(d)[0] // define a color scale const color = candidate_ordinal svg.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", d => { let obj = winner_obj(d) return obj[1] > 0 ? color(obj[0]) : "white" }) .attr("stroke", data.features.length > 2000 ? null : "#ccc") .attr("d", path) .on("mouseover", function(e, d) { const tt = d3.select(this.parentNode.parentNode.parentNode).select(".tooltip") let results_markup = sorted_results(d).map(r => r.join(": ")).join("
") tt.html(`Precinct ${d.properties.Precinct}
${results_markup}`) }) svg.append("g") .selectAll("circle") .data(data.features) .join("circle") .attr("fill", "none") .attr("stroke", data.features.length > 2000 ? null : "white") .attr("opacity", 0.25) .attr("r", d => Math.sqrt(winner_obj(d)[1] - runnerup_obj(d)[1])) .attr("transform", d => "translate(" + path.centroid(d.geometry) + ")") return html` ${svg.node()} ` }32:T643,{ const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); const accessor = (d, cand) => d.properties["results_" + subset_to_plot.value][cand] / d.properties["info_" + subset_to_plot.value]["BALLOTS CAST"] * 100 const sorted_results = d => Object.entries(d.properties["results_" + subset_to_plot.value]).sort((a,b) => d3.descending(a[1], b[1])) const ballots_cast = d => d.properties["info_" + subset_to_plot.value]["BALLOTS CAST"] const ratio = d => accessor(d, h2h_1) - accessor(d, h2h_2) // define a color scale const color = head_to_head_sequential const chosen_cands = [h2h_1, h2h_2] svg.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", d => { return color(ratio(d)) }) .attr("stroke", data.features.length > 2000 ? null : "#ccc") .attr("d", path) .on("mouseover", function(e, d) { const tt = d3.select(this.parentNode.parentNode.parentNode).select(".tooltip") let precinct_ballots = ballots_cast(d) let results_markup = sorted_results(d).filter(([cand, value]) => chosen_cands.includes(cand)).map(([cand, val]) => [cand, precinct_ballots == 0 ? 0 : Math.round(val / precinct_ballots * 100)]).map(r => r.join(": ") + "%").join("
") tt.html(`Precinct ${d.properties.Precinct}
${results_markup}`) }) // return Legend(color) return html` ${svg.node()} ` }33:T5d5,{ const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); // we have to get at the data a couple times, so let's do that work once const accessor = d => { let ballots = d.properties["info_" + subset_to_plot.value]["BALLOTS CAST"] let votes = Object.entries(d.properties["results_" + subset_to_plot.value]).reduce((agg, cur) => agg + cur[1], 0) return (ballots - votes) / ballots } // define a color scale const color = d3.scaleSequential(d3.interpolateReds).domain(d3.extent(data.features, accessor)) const legend = Legend(color, {tickFormat: d => d * 100 + "%", title: "Portion of Other/Blank Votes"}) let val = "" svg.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", d => { let val = accessor(d) return val ? color(val) : "white" }) .attr("stroke", data.features.length > 2000 ? null : "#ccc") .attr("d", path) .on("mouseover", function(e, d) { const tt = d3.select(this.parentNode.parentNode.parentNode).select(".tooltip") let val = accessor(d) let result = val ? `${Math.round(val * 100)}% of ballots left this race blank` : "No ballots returned" tt.html(`Precinct ${d.properties.Precinct}
${result}`) }) return html` ${legend} ${svg.node()} ` }34:T57b,{ const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); // we have to get at the data a couple times, so let's do that work once const accessor = d => { let ballots = d.properties["info_total"]["BALLOTS CAST"] let registration = d.properties["info_total"]["REGISTRATION"] return ballots / registration } // define a color scale const color = d3.scaleSequential(d3.interpolateGreens).domain(d3.extent(data.features, accessor)) const legend = Legend(color, {tickFormat: d => d * 100 + "%", title: "Portion of registered voters"}) let val = "" svg.append("g") .selectAll("path") .data(data.features) .join("path") .attr("fill", d => { let val = accessor(d) return val ? color(val) : "white" }) .attr("stroke", data.features.length > 2000 ? null : "#ccc") .attr("d", path) .on("mouseover", function(e, d) { const tt = d3.select(this.parentNode.parentNode.parentNode).select(".tooltip") let val = accessor(d) let result = val ? `${Math.round(val * 100)}% of voters voted` : "No registered voters" tt.html(`Precinct ${d.properties.Precinct}
${result}`) }) return html` ${legend} ${svg.node()} ` }35:T562,race_list = [ { label: "Mayor", value: FileAttachment("LOS_ANGELES_CITY_GEN-MAYOR_11-08-22_by_Precinct_PUBLIC_4300-8847@1.geojson").json(), }, { label: "Controller", value: FileAttachment("LOS_ANGELES_CITY_GEN-CNTR_11-08-22_by_Precinct_PUBLIC_4300-8849@1.geojson").json(), }, { label: "City Attorney", value: FileAttachment("LOS_ANGELES_CITY-CITY_ATTY_11-08-22_by_Precinct_PUBLIC_4300-8848@1.geojson").json() }, { label: "Sheriff", value: FileAttachment("SHERIFF_11-08-22_by_Precinct_PUBLIC_4300-8772.geojson").json(), }, { label: "Supervisor - District 3", value: FileAttachment("SUPERVISOR_3RD_DISTRICT_11-08-22_by_Precinct_PUBLIC_4300-8771.geojson").json(), }, { label: "City Council - District 5", value: FileAttachment("LOS_ANGELES_CITY_-CNC_5_11-08-22_by_Precinct_PUBLIC_4300-8867@1.geojson").json() }, { label: "City Council - District 11", value: FileAttachment("LOS_ANGELES_CITY_-CNC_11_11-08-22_by_Precinct_PUBLIC_4300-8868@1.geojson").json() }, { label: "City Council - District 13", value: FileAttachment("LOS_ANGELES_CITY-CNC_13_11-08-22_by_Precinct_PUBLIC_4300-8871@1.geojson").json() }, { label: "City Council - District 15", value: FileAttachment("LOS_ANGELES_CITY_-_CNC_15_11-08-22_by_Precinct_PUBLIC_4300-8872@1.geojson").json() } ]36:[{"id":"29665ae056ee6d0213a35ae6f975b70404b3a914ccbd6bcb2f7db9aec4b3462c0dfb910e16bdfbfa3aa080094e1d561742203f853e2d87801ac35642835087f3","href":"https://static.observableusercontent.com/files/29665ae056ee6d0213a35ae6f975b70404b3a914ccbd6bcb2f7db9aec4b3462c0dfb910e16bdfbfa3aa080094e1d561742203f853e2d87801ac35642835087f3","name":"LOS_ANGELES_CITY-CNC_13_11-08-22_by_Precinct_PUBLIC_4300-8871@1.geojson","type":"application/geo+json","lastModified":1670908482181.655,"size":413827},{"id":"678d7c1e7bebe5af08347d06b3ed5ddf28b23e521d321b2a11b755ab7e7bbe998dada8dc1e1784b2e6405aa14ecd5c8e3fe44e7d1fa9fb58a3b362d86a7b31e7","href":"https://static.observableusercontent.com/files/678d7c1e7bebe5af08347d06b3ed5ddf28b23e521d321b2a11b755ab7e7bbe998dada8dc1e1784b2e6405aa14ecd5c8e3fe44e7d1fa9fb58a3b362d86a7b31e7","name":"LOS_ANGELES_CITY_-_CNC_15_11-08-22_by_Precinct_PUBLIC_4300-8872@1.geojson","type":"application/geo+json","lastModified":1670908482427.591,"size":555754},{"id":"71f54f8f7d767d46f05c5416e30a1e375d373b1127a6fc2ac468c3d4f02519564136091131ca0f29853a292b898aeebca53ba725b0a1f34377ffc439cdc8fa30","href":"https://static.observableusercontent.com/files/71f54f8f7d767d46f05c5416e30a1e375d373b1127a6fc2ac468c3d4f02519564136091131ca0f29853a292b898aeebca53ba725b0a1f34377ffc439cdc8fa30","name":"LOS_ANGELES_CITY_-CNC_5_11-08-22_by_Precinct_PUBLIC_4300-8867@1.geojson","type":"application/geo+json","lastModified":1670908482563.356,"size":721242},{"id":"935e959a461f7ac1acc6e2fd0a33f3dbf3b8437a9c79d9ee516fae26b3935d31908d9bd91aa2f506534286a36349c58de9397104ab3ecd36651885dfc3d1d087","href":"https://static.observableusercontent.com/files/935e959a461f7ac1acc6e2fd0a33f3dbf3b8437a9c79d9ee516fae26b3935d31908d9bd91aa2f506534286a36349c58de9397104ab3ecd36651885dfc3d1d087","name":"LOS_ANGELES_CITY_-CNC_11_11-08-22_by_Precinct_PUBLIC_4300-8868@1.geojson","type":"application/geo+json","lastModified":1670908482502.12,"size":890443},{"id":"5f33397815b66adffa29091de607f538aea11d0b257713977899aeced50a15891e9d0d755e91702650868890aa3e9a6f86c2d54abde7a7943f964408ed64aca5","href":"https://static.observableusercontent.com/files/5f33397815b66adffa29091de607f538aea11d0b257713977899aeced50a15891e9d0d755e91702650868890aa3e9a6f86c2d54abde7a7943f964408ed64aca5","name":"LOS_ANGELES_CITY_GEN-CNTR_11-08-22_by_Precinct_PUBLIC_4300-8849@1.geojson","type":"application/geo+json","lastModified":1670909424620.626,"size":7645457},{"id":"11944fbcea68b030fde5b1bbea878c398dad2baccae46af504cc2082800669a6ab60f30cca6ffb0c9a2b4af69f6797430b730899cff7e0da05ce412fc1d14ab2","href":"https://static.observableusercontent.com/files/11944fbcea68b030fde5b1bbea878c398dad2baccae46af504cc2082800669a6ab60f30cca6ffb0c9a2b4af69f6797430b730899cff7e0da05ce412fc1d14ab2","name":"LOS_ANGELES_CITY-CITY_ATTY_11-08-22_by_Precinct_PUBLIC_4300-8848@1.geojson","type":"application/geo+json","lastModified":1670909425538.803,"size":7659682},{"id":"20799aeac3bf52d1b2147c0926b65a56fe93747a4ec4a82c790f30c42ee34cafd9bd20622bc8e886e39bbf1707c1e2115010e78df78ce3351705963dff9778a8","href":"https://static.observableusercontent.com/files/20799aeac3bf52d1b2147c0926b65a56fe93747a4ec4a82c790f30c42ee34cafd9bd20622bc8e886e39bbf1707c1e2115010e78df78ce3351705963dff9778a8","name":"LOS_ANGELES_CITY_GEN-MAYOR_11-08-22_by_Precinct_PUBLIC_4300-8847@1.geojson","type":"application/geo+json","lastModified":1670909425239.563,"size":7657179},{"id":"5acfad67a7dfa465dd715a9521cd3af18f9fe7c03ecc8ead22e71b2fcbfb831cf7e42a452315a583800d82e145746e4fbf8b6aa24bbbabe40290e8d2c70593b1","href":"https://static.observableusercontent.com/files/5acfad67a7dfa465dd715a9521cd3af18f9fe7c03ecc8ead22e71b2fcbfb831cf7e42a452315a583800d82e145746e4fbf8b6aa24bbbabe40290e8d2c70593b1","name":"SHERIFF_11-08-22_by_Precinct_PUBLIC_4300-8772.geojson","type":"application/geo+json","lastModified":1670909928141.926,"size":27677429},{"id":"640a3afabacfbdd2e6a10a5b807c8a74a028ee203126e4be57856d0430282f9443f3d0e3894931489bd5ec0212e05a5b47ba93d0c518bc6287916f721a079236","href":"https://static.observableusercontent.com/files/640a3afabacfbdd2e6a10a5b807c8a74a028ee203126e4be57856d0430282f9443f3d0e3894931489bd5ec0212e05a5b47ba93d0c518bc6287916f721a079236","name":"SUPERVISOR_3RD_DISTRICT_11-08-22_by_Precinct_PUBLIC_4300-8771.geojson","type":"application/geo+json","lastModified":1670909940455.779,"size":5419597}] 2d:{"title":"November 8, 2022 election results for City of Los Angeles and County of Los Angeles","cells":[{"id":0,"value":"# November 8, 2022 election results for City of Los Angeles and County of Los Angeles\n\nUse this notebook to explore some of the biggest 2022 elections in LA City and County. I created this very quickly and have spot checked the data, but there might be some little bugs here and there.","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"## Pick which race you want to look at \n\nAlso you can filter which set of ballots you're interested in. \n\n_Unless otherwise noted, your choices here are applied to all of the maps._","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"viewof race = Inputs.select(race_list, {label: \"Choose a district race\", format: x => x.label, value: race_list.find(race => race.label.includes(\"13\"))})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof subset_to_plot = Inputs.select([{\n label: \"All ballots\",\n value: \"total\"\n},\n{\n label: \"Vote by mail only\",\n value: \"vbm\"\n},\n{\n label: \"In-person only\",\n value: \"polling_place\"\n}], {label: \"Which set of ballots do you want to look at?\", format: x => x.label})","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`## The overall results\nThis is how each candidate did district wide for **${subset_to_plot.label}**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"_\"Other/No Vote\" is the difference between the candidate totals and the number of ballots cast_","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"## Single Candidate Results\nThis map shows the results of the selected candidate. It's helpful to see where in the district they had the most _relative_ support.","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"viewof single_cand = Inputs.select(Object.keys(data.features[0].properties.results_total))","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"## Best performing candidate in each precinct\nThis map shows each precinct colored by the candidate that got the most votes. It's helpful to see which candidate won the precinct\n\nThe circles show the size of the lead. Smaller circles indicate that the winner of the precinct didn't win by many more votes than the runner up.","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"Swatches(candidate_ordinal)","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"## Head to head spreads\nPick two candidates to compare the percentage point difference of their vote totals from precinct to precinct. This is helpful to see where candidates won a similar share of votes or a differing share of vote.","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"html`\n${Legend(head_to_head_sequential, {tickFormat: d => d + \" pp\"})}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"## The voters who didn't vote\nNot everyone who returned a ballot voted in this race, or for a listed candidate. This is where those voters live.\n\nThis is _not_ where turnout was low. This is where voters decided not to vote in this race.","pinned":false,"hidden":false,"mode":"md"},{"id":584,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"## Turnout\nNot everyone who is registered to vote, decided to vote or got their ballots in on time.\n\n_This map only shows **total registration** and is not filtered to your selected subset_","pinned":false,"hidden":false,"mode":"md"},{"id":597,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"## The end\nThat's it for this tool. Everything below is just code that helps make everything above work!","pinned":false,"hidden":false,"mode":"md"},{"id":226,"value":"h2h_1 = candidates_in_race[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"h2h_2 = candidates_in_race[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"anonymous_vote_share_continuous = d3.scaleSequential(d3.interpolateMagma).domain([0, 50])","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"head_to_head_sequential = d3.scaleSequential(d3.interpolateRdYlBu).domain([-50,50])","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"candidate_ordinal = d3.scaleOrdinal(d3.schemeSet2).domain(candidates_in_race)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"projection = d3.geoMercator().rotate([118,0,0]).fitExtent([[0,0], [width, height]], data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"candidates_in_race = Object.keys(data.features[0].properties.results_total)","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"data = await race.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":75,"value":"import {Choropleth} from \"@d3/choropleth\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}