Vote Cone — UninterpolatedVote Cone TransitionsReflecting on “Vote Cones”Vote Cones in Vega-LiteElection 2020: How reliable are different results at different stages?Election 2020 Vote Count Speed CartogramElection Cone — Iowa Senate 2016Election Cones — President 2016Election Cones — Senate 2016What’s the connection between these two election bar charts?Election 2020 DataElection 2020 Vote Margin CartogramElection 2020 Cone with Colored ContoursElection 2020 Cone with Labeled ContoursCalculate the percentage of remaining vote needed to overcome given absolute margin
Election 2020 Vote–Time Correlation Cartogram
Also listed in…
Elections
import { president, presidentByState } from "1342cadc9354cc67"
parsed = Array.from(presidentByState.keys()).map(parseStateData)
parsed.find(d => d[0] === "GA")[1]
a = presidentByState.get("MA").candidates.find(d => d.party_id === "republican")
b = presidentByState.get("MA").candidates.find(d => d.party_id === "democrat")
parseStateData = key => {
const state = presidentByState.get(key);
const margins = state.timeseries
.filter(({ votes }) => votes)
.map(({ votes, vote_shares, timestamp }) => ({
a: Math.round(vote_shares[a.candidate_key] * votes),
b: Math.round(vote_shares[b.candidate_key] * votes),
timestamp: new Date(timestamp)
}))
.map(({ a, b, timestamp }, i, arr) =>
!i
? { da: a, db: b, timestamp }
: { da: a - arr[i - 1].a, db: b - arr[i - 1].b, timestamp }
)
.map(({ da, db, timestamp }) => ({ margin: da - db, timestamp, key }))
.filter(
({ timestamp }) =>
xUpperBoundOption === "mostRecent" ||
(timestamp >= electionNight[0] && timestamp <= electionNight[1])
);
const marginsArrays = margins.map(({ margin, timestamp }) => [
+timestamp,
margin
]);
const corr =
marginsArrays.length > 2
? stats.sampleCorrelation(...d3.transpose(marginsArrays))
: 0;
const regressionFn = stats.linearRegressionLine(
stats.linearRegression(marginsArrays)
);
const regressionLine = d3
.extent(margins, d => d.timestamp)
.map(d => ({ timestamp: d, margin: regressionFn(+d) }));
return [key, { margins, marginsArrays, corr, regressionLine }];
}
line = d3
.line()
.x(d => x(d.timestamp))
.y(d => y(d.margin))
callCircleRadius = 2.5
electionNight = [
new Date("2020-11-03T23:00:00Z"),
new Date("2020-11-04T08:00:00Z")
]
x = d3.scaleTime(
xUpperBoundOption === "electionNight"
? electionNight
: d3.extent(
parsed.flatMap(([, { margins }]) => margins.map(d => d.timestamp))
),
[0, cellInner]
)
y = d3.scaleLinear(yDomain, [cellInner, 0]).clamp(true)
yDomain = {
const allMargins = parsed.flatMap(([, { margins }]) =>
margins.map(d => d.margin)
);
const extent = [0.01, 0.99].map(p => Math.abs(d3.quantile(allMargins, p)));
const max = Math.max(...extent);
return [-max, max];
}
color = d3.scaleLinear([-maxCorr, 0, maxCorr], ["black", "#ccc", "black"])
maxCorr = Math.max(...parsed.map(([, { corr }]) => Math.abs(corr)))
red = "#dd2c35"
blue = "#0080c9"
function halo(text) {
text
.select(function() {
return this.parentNode.insertBefore(this.cloneNode(true), this);
})
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 4)
.attr("stroke-linejoin", "round");
}
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 / 2 +
0.5} H ${cellInner} M ${cellInner} ${cellInner} V 0`
)
)
.call(xAxis)
.call(yAxis)
.call(colorLegend)
xAxis = g =>
g
.append("g")
.attr("transform", `translate(0, ${y(0)})`)
.call(
d3
.axisBottom(x)
.ticks(4)
.tickFormat(d =>
d[xUpperBoundOption === "mostRecent" ? "getDate" : "getHours"]()
)
)
.call(g => g.select(".domain").remove())
.call(g =>
g
.append("text")
.attr("fill", "black")
.attr("x", cellInner / 2)
.attr("dy", "2.5em")
.attr("text-anchor", "middle")
.text(
x.domain()[0].toLocaleString("default", {
month: "long",
day: xUpperBoundOption === "mostRecent" ? undefined : "numeric",
year: "numeric"
})
)
)
yAxis = g =>
g
.append("g")
.attr("transform", `translate(${cellInner}, 0)`)
.call(
d3
.axisRight(y)
.ticks(3)
.tickFormat(
d =>
`Net ${d3.format(",")(Math.abs(d))} ${
d > 0
? "for " + a.last_name
: d < 0
? "for " + b.last_name
: "votes"
}`
)
)
.call(g => g.select(".domain").remove())
colorLegend = g =>
g
.append("g")
.attr("transform", `translate(${3 * cellSize}, ${y(0)})`)
.selectAll("g.color-legend")
.data(color.domain())
.join("g")
.attr("transform", (d, i) => `translate(0, ${(i - 1) * 20})`)
.call(g =>
g
.append("path")
.attr("d", d => `M -4 ${d * 4} 4 ${-d * 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 =>
d === 0
? "No correlation between when vote was counted and candidate favored"
: "Votes counted later tended toward " + (d > 0 ? a : b).last_name
)
)
position = 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")
stats = require("simple-statistics")
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.