EJ Fox & Ian Johnson
streaming data, code, acid, design
Electoral College Unit Charts With Text
Also listed in…
Season 1
function stateUnits(options) {
let cols = options.columns || 10;
let r = options.r * 2 || 10;
let spacing = options.spacing || 0;
let array = [];
let i = 0;
let votes = Array.from(electoral_votes).map(d => ({ ...d }));
votes.sort((a, b) => {
let leanA = leaningsByState.get(getState(a[0]));
let leanB = leaningsByState.get(getState(b[0]));
if (!leanA || !leanB) return 0;
return leanA.value - leanB.value;
// return getCenter(a[0])[1] - getCenter(b[0])[1];
});
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;
}
import { electoral_votes } from "@eyeseast/fivethirtyeight-2020-forecast-data"
electoral_votes
d3.sum(Array.from(electoral_votes.values()))
md`force layout`
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("**", ""),
electoral_D: +d["ELECTORAL VOTE Clinton (D)"].replace("**", "")
}
])
)
simulation.nodes().map(d => x_column(cartogramByState.get(getState(d.state))))
state_size = width / 14
cartogram_data
cartogram_data_mapped = cartogram_data.map(d => [d.state_full, d])
cartogramByState = new Map(cartogram_data_mapped)
import { cartogram_data, x_column, y_column, axisPosition } with {
state_size,
margin
} from "@aboutaaron/small-multiple-chart-cartogram"
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);
}
{
simulation
.force("x", d3.forceX(forceX).strength(0.08))
.force("y", d3.forceY(forceY).strength(0.08));
simulation.alphaDecay(0.03);
simulation.alphaTarget(0.5);
simulation.restart();
}
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
}
simulation.nodes()
d3.group(simulation.nodes(), d => d.state)
simulation = {
let processed_electoral_votes = stateUnits({
r: radius,
spacing,
columns
});
return (
d3
.forceSimulation(processed_electoral_votes)
// .force("x", d3.forceX(width / 2).strength(0.001))
// .force("y", d3.forceY(height / 2).strength(0.001))
.force('charge', d3.forceManyBody().strength(0.1))
.force('center', d3.forceCenter(width / 2, height / 2).strength(0.000001))
.force('collision', d3.forceCollide().radius(d => d.r * 0.9))
);
}
gridUnits(538)
function gridUnits(number, options = {}) {
let cols = options.columns || 10;
let r = options.r * 2 || 10;
let spacing = options.spacing || 0;
let array = d3.range(number).map(i => {
return {
i: i,
x: margin.left + (i % cols) * (r + spacing),
y: margin.top + Math.floor(i / cols) * (r + spacing)
};
});
return array;
}
electoral_votes
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)
height = 620
import { slider, select } from "@jashkenas/inputs"
d3 = require("d3")
turf = require("@turf/turf@5")
topojson = require("topojson-client")
font = html`<link href="https://fonts.googleapis.com/css2?family=Seymour+One&display=swap" rel="stylesheet">
`
import { twitch } from "@codingwithfire/twitch"
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.
