Election 2020 County Vote Distribution within a State2020 Presidential Election Time Series AnomaliesMontana 2020 Legislative OutcomesDot-density election maps with WebglPennsylvania 2020 General Election Mail Ballot Requests AnalysisElection Night Results2020 Presidential Election Time SeriesUS Electoral College Results 1900 - 2020Facebook Advertising in the 2020 Presidential ElectionUS Presidential Election Results (1976 - 2020)2020 Presidential Election in ChicagoBlue waveElection 2020: How reliable are different results at different stages?Election 2020 Vote–Time Correlation CartogramWhat’s the connection between these two election bar charts?Spinning counties, November 2020A Better Way to Visualize US Elections 2020 ResultsUS Elections 2020 Results - Deeper LookUS Election 2020Indian Country Today #NativeVote2020Indian Country Today #NativeVote2020As votes are countedTry to impeach this? Challenge accepted!Early Voting Wait Times in Gwinnett County, GeorgiaVOTE LogoDonor Age Distribution of 2020 Contributions by Individuals: Trump vs. Sanders2020: Where Donation $$ EmergeUnique Individual Donors contributing to the 2020 Presidential CandidatesContributions: Trump vs. Biden 2020Changes to polling placesElectoral College Unit ShuffleAs votes come in, what would it take for the trailing candidate to win?Electoral College Decision Tree2004 - 2016 Presidential Margin of Victory per County2020 State Probabilities by Election Model - Shaded Table2020 Presidential Election ForecastsElection Maps: 2016Working With Election Data: EAVS3a. Historical participation in early voting vs. Election Day votingNC Election MapSouth Carolina Early and Absentee Voting DataRace Bar Chart utilitiesNC Congressional DistrictsGrid cartogramsPaths to the White House (Inferred)US Elections 2018How well does population density predict U.S. voting outcomes?US Election Convention MapElection Data Tutorial2020 Presidential Election Forecasts2016 U.S. presidential election (PEPSI Remix)2016 U.S. presidential electionUSPS collection box changesU.S. Geographic DataU.S. County Visualization IdeasRejected Mail Ballots in North Carolina
Election 2020 Vote Count Speed Cartogram
Also listed in…
Election
chart = {
const w = gridWidth * cellSize + 2 * svgPadding;
const h = gridHeight * cellSize + 2 * svgPadding;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, w, h])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.style("background", "white");
const g = svg
.append("g")
.attr("transform", `translate(${svgPadding}, ${svgPadding})`);
g.append("g").call(legend);
g.append("text")
.attr("x", w - svgPadding)
.attr("y", h - svgPadding)
.attr("dy", "-1em")
.attr("text-anchor", "end")
.text(d3.timeFormat("%x %X")(new Date(president.meta.timestamp)));
const cell = g
.append("g")
.selectAll("g")
.data(parsed)
.join("g")
.attr("transform", ([statecode]) => {
const [i, j] = position.get(statecode);
return `translate(${i * cellSize},${j * cellSize})`;
});
const inner = cell
.append("g")
.attr("class", "cell-inner")
.attr("transform", `translate(${cellPadding}, ${cellPadding})`);
inner
.append("rect")
.attr("width", cellInner)
.attr("height", cellInner)
.attr("fill", "#eee")
.attr("opacity", 0.5);
inner
.append("text")
.attr("pointer-events", "none")
.attr("text-anchor", "start")
.attr("x", 2)
.attr("y", 3)
.attr("dy", "0.71em")
.attr("font-size", cellInner / 4)
.text(([statecode]) => statecode);
inner
.append("path")
.attr("stroke", ([, { ninety }]) => color(ninety))
.attr("stroke-width", 1.75)
.attr("fill", "none")
.attr("d", ([, { ts }]) => line(ts));
inner
.filter(d => d[1].call)
.append("circle")
.attr("r", callCircleRadius)
.attr("cx", ([, { call }]) => x(call.time))
.attr("cy", ([, { call }]) => y(call[yType]))
.attr("fill", ([, { ninety }]) => color(ninety));
return svg.node();
}
import { president, presidentByState } from "1342cadc9354cc67"
parsed = await Promise.all(
Array.from(presidentByState.keys()).map(parseStateData)
)
parseStateData = key => {
const state = presidentByState.get(key);
const ts = state.timeseries
.filter(d => d.votes !== 0)
.map(({ votes, eevp, timestamp }) => ({
votes: votes,
percentage: eevp / 100,
time: new Date(timestamp)
}));
let call;
if (state.winnerCalledTimestamp) {
const beforeCall = ts
.filter(
d =>
!state.winnerCalledTimestamp || +d.time <= state.winnerCalledTimestamp
)
.reverse();
call = beforeCall.length ? beforeCall[0] : ts[0];
}
let ninety = ts.find(d => d.percentage > 0.9);
ninety = ninety ? ninety.time : new Date();
return [key, { ts, call, ninety }];
}
line = d3
.line()
.x(d => x(d.time))
.y(d => y(d[yType]))
callCircleRadius = 2.5
x = d3.scaleTime(d3.extent(parsed.flatMap(([, {ts}]) => ts.map(d => d.time))), [
0,
cellInner
])
y = d3
.scaleLinear(
d3.extent(parsed.flatMap(([, { ts }]) => ts.map(d => d[yType]))),
[cellInner, 0]
)
.nice(yType === "percentage")
color = d3.scaleSequential(
d3
.extent(
parsed.map(([, { ts }]) => {
const ninety = ts.find(d => d.percentage > 0.9);
return ninety ? ninety.time : new Date();
})
)
.reverse(),
t => d3.interpolateRainbow(t / 3 + 0.25)
)
legend = g =>
g
.attr("transform", `translate(${cellPadding},${cellPadding})`)
.call(g =>
g
.append("rect")
.attr("width", cellInner)
.attr("height", cellInner)
.attr("fill", "#eee")
.attr("opacity", 0.5)
)
.call(g =>
g
.append("path")
.attr("stroke", "black")
.attr("fill", "none")
.attr("d", `M 0 ${cellInner + 0.5} H ${cellInner} V 0`)
)
.call(xAxis)
.call(yAxis)
.call(colorLegend)
xAxis = g =>
g
.append("g")
.attr("transform", `translate(0, ${cellInner})`)
.call(
d3
.axisBottom(x)
.ticks(4)
.tickFormat(d => d.getDate())
)
.call(g => g.select(".domain").remove())
.call(g =>
g
.select(".tick:nth-child(3) text")
.append("tspan")
.attr("x", 0)
.attr("dy", "1em")
.text(
x
.domain()[0]
.toLocaleString("default", { month: "long", year: "numeric" })
)
)
yAxis = g =>
g
.append("g")
.attr("transform", `translate(${cellInner}, 0)`)
.call(
d3
.axisRight(y)
.ticks(3)
.tickFormat(yType === "percentage" ? d3.format(".0%") : d3.format(","))
)
.call(g => g.select(".domain").remove())
.call(g =>
g.select(".tick:last-of-type text").text(function(d, i) {
return (
this.textContent +
(yType === "percentage" ? " of votes counted" : " votes counted")
);
})
)
colorLegend = g =>
g
.append("g")
.attr("transform", `translate(${3 * cellSize}, 5)`)
.call(g =>
g
.append("path")
.attr("d", `M -4 4 4 -4`)
.attr("stroke", "black")
.attr("stroke-width", 1.75)
)
.call(g => g.append("circle").attr("r", callCircleRadius))
.call(g =>
g
.append("text")
.attr("dy", "0.31em")
.attr("dx", "1em")
.text("Race called")
)
.selectAll("g.color-legend")
.data([...color.domain(), d3.mean(color.domain())].sort())
.join("g")
.attr("transform", (d, i) => `translate(0, ${(i + 1) * 20})`)
.call(g =>
g
.append("path")
.attr("d", `M -4 4 4 -4`)
.attr("stroke", d => color(d))
.attr("stroke-width", 1.75)
)
.call(g =>
g
.append("text")
.attr("dy", "0.31em")
.attr("dx", "1em")
.text(
d => "90% counted by " + d3.timeFormat("%b %d %H:%M")(new Date(d))
)
)
position = // grid`
// NV,AZ
// GA,PA`
grid`
, , , , , , , , , ,ME
, , , , ,WI, , , ,VT,NH
WA,ID,MT,ND,MN,IL,MI, ,NY,MA,
OR,NV,WY,SD,IA,IN,OH,PA,NJ,CT,RI
CA,UT,CO,NE,MO,KY,WV,VA,MD,DE,
,AZ,NM,KS,AR,TN,NC,SC,DC, ,
, , ,OK,LA,MS,AL,GA, , ,
HI,AK, ,TX, , , , ,FL, , `
function grid() {
const positionById = new Map;
d3.csvParseRows(String.raw.apply(String, arguments).replace(/^\n|\n$/g, ""), (row, j) => {
row.forEach((id, i) => {
if (id = id.trim()) {
positionById.set(id, [i, j]);
}
});
});
return positionById;
}
gridWidth = d3.max(position, ([, [i]]) => i) + 1
gridHeight = d3.max(position, ([, [, j]]) => j) + 1
cellSize = 80
cellPadding = 1
cellInner = cellSize - cellPadding * 2
svgPadding = 5
d3 = require("d3@6")
import { radio } from "@jashkenas/inputs"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.