Public
Edited
Oct 30, 2024
14 stars
data = d3.csvParse(csv, d3.autoType)
contested = data
.filter((d) => d.category === "none")
.sort(sortStates)
sortStates = (a, b) => {
// Sort in descending order by votes and then ascending order by name
if (d3.descending(a.votes, b.votes) === 0) {
return d3.ascending(a.name, b.name);
} else {
return 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
};
const states = contested.sort((a, b) => {
if (decided.has(a.name)) {
return -1;
} else if (decided.has(b.name)) {
return 1;
} else return sortStates(a, b);
});
function buildTree(node, depth) {
if (depth < states.length && !winner(node)) {
const state = states[depth];
const status = decided.get(state.name);
node.children = [];
if (!status || status === "D") {
node.children.push({
name: state.name,
shortname: state.shortname,
party: "D",
votes: state.votes,
votesD: node.votesD + state.votes,
votesR: node.votesR
});
}
if (!status || status === "R") {
node.children.push({
name: state.name,
shortname: state.shortname,
party: "R",
votes: state.votes,
votesD: node.votesD,
votesR: node.votesR + state.votes
});
}
node.children.forEach((child) => buildTree(child, depth + 1));
}
return node;
}
return buildTree(root, 0);
}
tree = d3.tree().size([targetHeight, targetWidth])
root = tree(d3.hierarchy(treeData))
linkWidth = d3.scaleLinear().domain([root.height, 0]).range([1, 7])
targetWidth = Math.min(width, 780)
targetHeight = 600
circleSize = d3
.scaleSqrt()
.domain(d3.extent(contested.map((d) => d.votes)))
.range([2.5, 5.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;
}
isDecided = (d) => {
return decided.has(d.name);
}
partyColor = d => (d.party === "D" ? colorD : d.party === "R" ? colorR : "#888")
colorD = "#2a72c9"
colorR = "#c92a2a"
normalOpacity = 0.3
fullOpacity = 1.0
strokeOpacity = (highlight) => (highlight ? fullOpacity : normalOpacity)
stateLabel = d => (width > 800 ? d.name : d.shortname)
candidateD = "Harris"
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.
