EJ Fox & Ian Johnson
streaming data, code, acid, design
voteDelay = 200
leanScale = state => {
let d = leaningsByState.get(getState(state));
// if (!d) return "#999"//console.log(state, getState(state), d);
if (!d) return width / 2;
if (d.party == "R") {
return d3
.scaleLinear()
.domain(repExtent)
.range([width / 2, width])(d.value);
} else {
return d3
.scaleLinear()
.domain(demExtent)
.range([width / 2, 0])(d.value);
}
}
units2016.filter(d => d.state.indexOf("-") >= 0)
units2016 = {
let units = [];
let ui = 0;
let dems = states
.filter(
d => d[2016].electoral_D > 0 && statesReporting2016.indexOf(d.state) >= 0
)
.sort((a, b) => {
// return b.votes - a.votes;
return leanScale(a.state) - leanScale(b.state);
});
let reps = states
.filter(
d => d[2016].electoral_R > 0 && statesReporting2016.indexOf(d.state) >= 0
)
.sort((a, b) => {
// return a.votes - b.votes;
return leanScale(a.state) - leanScale(b.state);
});
let unknowns = states
.filter(
d =>
// some states didn't pledge all their votes to the 2 main candidates
d[2016].electoral_D + d[2016].electoral_R < d.votes ||
// or they didn't report yet
statesReporting2016.indexOf(d.state) < 0
)
.sort((a, b) => {
return leanScale(a.state) - leanScale(b.state);
});
dems.forEach(d => {
d3.range(d[2016].electoral_D).forEach(i => {
// add a unit for each vote
units.push({
...d,
D: 1,
i,
ui: ui++,
color: blue
});
});
});
ui++;
unknowns.forEach(d => {
let votes = d.votes;
if (statesReporting2016.indexOf(d.state) >= 0) {
votes = d.votes - (d[2016].electoral_D + d[2016].electoral_R);
}
d3.range(votes).forEach(i => {
// add a unit for each vote
units.push({
...d,
i,
ui: ui++,
color: gray
});
});
});
ui++;
reps.forEach(d => {
d3.range(d[2016].electoral_R).forEach(i => {
// add a unit for each vote
units.push({
...d,
R: 1,
i,
ui: ui++,
color: red
});
});
});
return units;
}
units2016leaning = {
let units = [];
let ui = 3;
let leaned = states
.map(d => {
return { ...d };
})
.sort((a, b) => {
return leanScale(a.state) - leanScale(b.state);
})
.forEach(d => {
if (statesReporting2016.indexOf(d.state) >= 0) {
d3.range(d[2016].electoral_D).forEach(i => {
// add a unit for each vote
units.push({
...d,
D: 1,
i,
ui: ui++,
color: blue
});
});
d3.range(d[2016].electoral_R).forEach(i => {
// add a unit for each vote
units.push({
...d,
R: 1,
i,
ui: ui++,
color: red
});
});
}
// if we don't know the result of these votes
let votes = d.votes;
if (statesReporting2016.indexOf(d.state) >= 0) {
votes = d.votes - (d[2016].electoral_D + d[2016].electoral_R);
}
d3.range(votes).forEach(i => {
// add a unit for each vote
units.push({
...d,
i,
ui: ui++,
color: gray
});
});
});
return units;
}
d3.sum(states, d => d.votes)
R2016 = d3.sum(states, d => d[2016].electoral_R)
D2016 = d3.sum(states, d => d[2016].electoral_D)
rows = 5
rw = (width - 5) / (538 / rows)
dems = states.filter(d => d[2016].electoral_D > 0)
unknowns = states.filter(
d => d[2016].electoral_D + d[2016].electoral_R < d.votes
)
reps = states.filter(d => d[2016].electoral_R > 0)
timings2016ByState = new Map(timings2016)
statesByTimings2016 = d3.group(timings2016, d => d[1])
statesReporting2016 = timings2016
.filter(d => +new Date(d[1]) <= +new Date(time2016) + 1)
.map(d => d[0])
states
states = Array.from(electoral_votes).map(([state, votes]) => {
let s = getState(state);
let c = cartogramByState.get(s);
if (!c) console.log(state, s, c);
let r2016 = results2016ByState.get(c.state_postal);
if (s == "Nebraska") {
//https://en.wikipedia.org/wiki/2016_United_States_presidential_election_in_Nebraska
r2016.electoral_R = votes;
}
if (state == "Maine") {
r2016.electoral_D = 2;
r2016.electoral_R = 0;
} else if (state == "ME-1") {
r2016.electoral_D = 1;
r2016.electoral_R = 0;
} else if (state == "ME-2") {
r2016.electoral_D = 0;
r2016.electoral_R = 1;
}
return {
state: state,
state_full: c.state_full,
state_postal: c.state_postal,
row: c.row,
column: c.column,
2016: r2016,
votes: votes
};
})
import { electoral_votes } from "@eyeseast/fivethirtyeight-2020-forecast-data"
electoral_votes
d3.sum(Array.from(electoral_votes.values()))
results2016 = FileAttachment("Table 2. Electoral & Pop Vote-Table 1.csv").csv()
results2016ByState = new Map(
results2016.map(d => [
d.STATE,
{
state_postal: d.STATE,
// TODO: deal with third parties
electoral_R: +d["ELECTORAL VOTE Trump (R)"]
.replace("**", "")
.replace("*", ""),
electoral_D: +d["ELECTORAL VOTE Clinton (D)"]
.replace("**", "")
.replace("*", "")
}
])
)
state_size = width / 14
cartogram_data
cartogram_data_mapped = cartogram_data.map(d => [d.state_full, d])
cartogramByState = new Map(cartogram_data_mapped)
margin = ({
top: 40,
left: 40,
right: 40,
bottom: 0
})
repExtent = d3.extent(
Array.from(leaningsByState).filter(d => d[1].party == "R"),
d => d[1].value
)
demExtent = d3.extent(
Array.from(leaningsByState).filter(d => d[1].party == "D"),
d => d[1].value
)
color = state => {
let d = leaningsByState.get(getState(state));
if (!d) return "#999"//console.log(state, getState(state), d);
if (d.party == "R") {
return repScale(d.value);
} else {
return demScale(d.value);
}
}
repScale = d3.scaleSequential(d3.interpolateReds).domain(repExtent)
demScale = d3.scaleSequential(d3.interpolateBlues).domain(demExtent)
leanings = d3.csv(
"https://raw.githubusercontent.com/fivethirtyeight/data/master/partisan-lean/fivethirtyeight_partisan_lean_STATES.csv"
)
leaningsByState = {
let processed = leanings.map(d => {
// let s = d.pvi_538;
let s = d[2020];
return [
d.state,
{
state: d.state,
party: s.slice(0, 1),
value: +s.slice(1)
}
];
});
return new Map(processed);
}
getCenter("Florida")
function getCenter(state) {
return centroidsByName.get(getState(state)).center;
}
function getState(state) {
let s = state;
if (state.indexOf("NE-") == 0) {
s = "Nebraska";
} else if (state.indexOf("ME-") == 0) {
s = "Maine";
}
return s
}
function stateUnits(options) {
let cols = options.columns || 10;
let r = options.r * 2 || 10;
let spacing = options.spacing || 0;
let array = [];
let i = 0;
Array.from(electoral_votes).forEach(d => {
let state = d[0];
let count = d[1];
d3.range(count).forEach(j => {
let tx = margin.left + (i % cols) * (r + spacing);
let ty = margin.top + Math.floor(i / cols) * (r + spacing);
array.push({
i: i,
x: tx,
y: ty,
tx: tx,
ty: ty,
r: r,
state
});
i += 1;
});
});
return array;
}
us = d3.json("https://unpkg.com/us-atlas@3/counties-10m.json")
stateShapes = topojson.feature(us, us.objects.states)//.features
centroids = stateShapes.features.map(d => {
let center = turf.centroid(d).geometry.coordinates;
return {
fips: d.id,
name: d.properties.name,
center: projection(center)
};
})
centroidsByName = new Map(centroids.map(d => [d.name, d]))
projection = d3.geoAlbersUsa().fitSize([width, height], stateShapes)
blue = "#002868"
red = "#bf0a30"
gray = "lightgray"
height = 620
import { slider, select } from "@jashkenas/inputs"
d3 = require("d3")
turf = require("@turf/turf@5")
topojson = require("topojson-client")
fonts = html`<span></span><link href="https://fonts.googleapis.com/css2?family=Seymour+One&family=Share+Tech+Mono&family=Ubuntu+Mono:wght@400;700&display=swap" rel="stylesheet">
`
import { twitch } from "@codingwithfire/twitch"
import { Scrubber } from "@mbostock/scrubber"
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.
