The avatar for @codingwithfire
Coding with Fire
EJ Fox & Ian Johnson streaming data, code, acid, design
Published
Election Explorations
Edited
Nov 4, 2020
Fork of Where Are Votes Outstanding? Visualization Ideas
3 stars
2
Insert cell
Insert cell
Insert cell
Insert cell
cartogram
Insert cell
Insert cell
red = "#bf0a30"
Insert cell
lightred = "#ee448a"
Insert cell
blue = "#002868"
Insert cell
lightblue = "#52b2e8"
Insert cell
opacityScale = d3
.scaleLinear()
.domain([0, 1])
.range([0.4, 1])
Insert cell
nytPresStatesByAbbr.get("FL")
Insert cell
winners2016 = new Map(
countyElectionResults.map(d => {
return [
d.combined_fips,
+d.votes_gop > +d.votes_dem ? "republican" : "democrat"
];
})
)
Insert cell
Insert cell
tooltip = html`<div id="svg-tip" style="position:fixed; pointer-events: none; background: rgba(255,255,255,0.8); padding: 5px;">
Name: <span class="county-name"></span> County<br>
<!-- 2020 Value: <span class="county-value2020"></span><br> -->
2020 Votes: <span class="county-votes2020"></span><br>
2020 Expected: <span class="county-expected"></span><br>
2016 Votes: <span class="county-votes2016"></span><br>
</div>`
Insert cell
counties = nytPresCounties.map(d => {
let v = 1 - d.votes / (d.exp_tot_vote ? d.exp_tot_vote : d.votes2016);
if (v < 0) v = 0;
return {
...d,
value: v
};
})
Insert cell
diffScale = d3
.scaleSequential(d3.interpolateGreys)
// .domain(diffExtent)
// .domain([minCounty, 1])
.domain([-0.3, 1.5])
Insert cell
numformat = d3.format(",d")
Insert cell
cartogram
Insert cell
cartogram_data
Insert cell
Insert cell
stateToFips = d3.json(
"https://gist.githubusercontent.com/wavded/1250983/raw/bf7c1c08f7b1596ca10822baeb8049d7350b0a4b/stateCodeToFips.json"
)
Insert cell
nytPresCounties
Insert cell
import {
nytPresCounties,
nytPresStatesByAbbr
} from "@codingwithfire/live-election-data"
Insert cell
Insert cell
Insert cell
margin = ({top: 140, right: 20, bottom: 20, left: 20})

Insert cell
{
let svg = d3
.create("svg")
.attr("width", 200)
.attr("height", 200);

let g = svg.append("g");
colorTreemap(g, counties.slice(0, 154));

return svg.node();
}
Insert cell
treemapSize = state_size
Insert cell
height = 8 * state_size
Insert cell
legend({ color: diffScale })
Insert cell
import { cartogram_data, x_column, y_column, axisPosition } with {
state_size,
margin
} from "@aboutaaron/small-multiple-chart-cartogram"
Insert cell
// md`
// ${fips} - ${eav.Jurisdiction_Name}
// Percent of votes counted:
// **${format(calculatePercent(countySVG.id) * 100)}%**
// `
Insert cell
projection = d3.geoAlbersUsa().fitSize([width - 10, height - 30], countyShapes)
Insert cell
minCounty = d3.min(counties, d => 1 - d.value)
Insert cell
turf.centroid(countyShapes.features[0])
Insert cell
center = d => {
return projection(turf.centroid(d).geometry.coordinates) || [0, 0];
}
Insert cell
allYearsFlat = FileAttachment("allYearsFlat@1.csv").csv({ typed: false })
Insert cell
allYearsFlat.filter(d => d.State_Full == "WISCONSIN")
Insert cell
eavsByCounty = new Map(
allYearsFlat.map(d => {
let s = String(d.FIPSCode);
return [s.slice(0, s.length - 5).padStart(5, "0"), d];
})
)
Insert cell
voteJitter = 5 // The amount added or subtracted from state percentage
Insert cell
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
countySVG
Insert cell
fips = countySVG ? countySVG.id : ""
Insert cell
eav = eavsByCounty.get(fips)
Insert cell
eav ? eav : ""
Insert cell
pop2016 = demographicsData[2016].get(fips)["B01003_001E"]
Insert cell
pop2018 = demographicsData[2018].get(fips)["B01003_001E"]
Insert cell
views = ["outstanding", "outstandingvs2016"]
Insert cell
Insert cell
format = d3.format(",d")
Insert cell
import { countyElectionResults } from '@codingwithfire/where-are-votes-at-risk'
Insert cell
import {
demographicsData,
selectedFields,
niceLabel,
countyShapes,
stateShapes
} from "@enjalot/us-county-datasets"
Insert cell
d3 = require("d3@6")
Insert cell
FileAttachment("keyLables.json").json()
Insert cell
turf = require('https://bundle.run/turf@3.0.14')
Insert cell
import { twitch } from "@codingwithfire/twitch"
Insert cell
import { rangeSlider } from "@mootari/range-slider"
Insert cell
Chance = require("chance")
Insert cell
_ = require('lodash')
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more