data = await FileAttachment("electoral_college@3.csv").csv({ typed: true })
contested = data
.filter(d => d.category === "none")
.sort((a, b) => d3.descending(a.votes, b.votes))
totalD = d3.sum(data.filter(d => d.category === "D").map(d => d.votes))
totalR = d3.sum(data.filter(d => d.category === "R").map(d => d.votes))
decided = new Map(
Object.entries(selectStates).filter(([key, value]) => value !== "none")
)
treeData = {
const root = {
name: "",
votes: 0,
votesD: totalD,
votesR: totalR,
pruned: false
};
function buildTree(node, depth) {
if (depth < contested.length && !winner(node)) {
const state = contested[depth];
node.children = [
{
name: state.name,
shortname: state.shortname,
party: "D",
votes: state.votes,
votesD: node.votesD + state.votes,
votesR: node.votesR,
pruned:
node.pruned ||
(decided.has(state.name) && decided.get(state.name) === "R")
},
{
name: state.name,
shortname: state.shortname,
party: "R",
votes: state.votes,
votesD: node.votesD,
votesR: node.votesR + state.votes,
pruned:
node.pruned ||
(decided.has(state.name) && decided.get(state.name) === "D")
}
];
node.children.forEach(child => buildTree(child, depth + 1));
}
return node;
}
return buildTree(root, 0);
}
function autoBox() {
document.body.appendChild(this);
const { x, y, width, height } = this.getBBox();
document.body.removeChild(this);
return [x - 5, y, width + 10, height];
}
tree = d3
.cluster()
.size([2 * Math.PI, radius])
.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)
radius = 390
targetWidth = Math.min(width, radius * 2)
circleSize = d3
.scaleSqrt()
.domain(d3.extent(contested.map(d => d.votes)))
.range([2.5, 6.5])
votesScale = d3
.scaleLinear()
.domain([0, 538])
.range([0, targetWidth])
result = d =>
d.votesD > 269
? "D"
: d.votesR > 269
? "R"
: d.votesD === 269 && d.votesR === 269
? "tie"
: null
winner = d => {
const outcome = result(d);
return !outcome || outcome === "tie" ? null : outcome;
}
partyColor = d => (d.party === "D" ? colorD : d.party === "R" ? colorR : "#888")
colorD = "#2a72c9"
colorR = "#c92a2a"
prunedOpacity = 0.05
normalOpacity = 0.3
fullOpacity = 1.0
strokeOpacity = (pruned, highlight) =>
pruned ? prunedOpacity : highlight ? fullOpacity : normalOpacity
stateLabel = d => (width > 800 ? d.name : d.shortname)
candidateD = "Biden"
candidateR = "Trump"
import { form } from "@mbostock/form-input"
d3 = require("d3@6")
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.
