Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
url = `https://int.nyt.com/applications/elections/2020/data/liveModel/2020-02-11/nh-32115-2020-02-11.json`
rawData = {
replay;
return (await fetch(url)).json()
}
duration = 50
candidates = ({
Sanders: ['sandersb', 'Bernie Sanders', await (await FileAttachment("sandersb.jpg")).url()],
Biden: ['bidenj', 'Joe Biden', await (await FileAttachment("bidenj.jpg")).url()],
Buttigieg: ['buttigiegp', 'Pete Buttigieg', await (await FileAttachment("buttigiegp.jpg")).url()],
Warren: ['warrene', 'Elizabeth Warren', await (await FileAttachment("warrene.jpg")).url()],
Klobuchar: ['klobuchara', 'Amy Klobuchar', await (await FileAttachment("klobuchara.jpg")).url()],
Steyer: ['steyert', 'Tom Steyer', await (await FileAttachment("steyert.jpg")).url()],
Yang: ['yanga', 'Andrew Yang', await (await FileAttachment("yanga.jpg")).url()],
Bloomberg: ['bloombergm', 'Mike Bloomberg', await (await FileAttachment("bloombergm.jpg")).url()],
Gabbard: ['gabbardt', 'Tulsi Gabbard', await (await FileAttachment("gabbardt.jpg")).url()]
})
rawData.races[0].timeseries
data = {
const series = rawData.races[0].timeseries;
const data = series.filter((t, i) => {
return (i > 0 && series[i - 1].vote_counted !== t.vote_counted)
}).map(d => {
let date = new Date(d.timestamp);
if (isNaN(date.getTime())) date = new Date();
return Object.entries(candidates).map(([name, [slug, fullName, image]]) => ({
date,
name: fullName,
image,
value: d[`${slug}_wp`]
}))
})
.flat();
if (data.length <= 9) {
return data.concat(
data.map(d => {
return { ...d, date: new Date(+d.date + 1000)};
})
)
}
return data;
}
barSize = 100
function images(svg) {
let image = svg.append("g")
.selectAll("image");
return ([date, data], transition) => image = image
.data(data.slice(0, n))
.join(
enter => enter.append("svg:image")
.attr("xlink:href", d => d.image)
.attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`)
.attr("height", barSize)
.attr("y", "2px")
.attr("x", "4px")
.text(d => d.name),
update => update.attr("xlink:href", d => d.image),
exit => exit.transition(transition).remove()
.attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`)
)
.call(bar => bar.transition(transition)
.attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`))
}
formatDate = d3.timeFormat("%-I:%M %p")
n = 7 // names.size
names = new Set(data.map(d => d.name))
imageLinks = new Map(data.map(d => [d.name, d.image]))
datevalues = Array.from(d3.rollup(data, ([d]) => d.value, d => +d.date, d => d.name))
.map(([date, data]) => [new Date(date), data])
.sort(([a], [b]) => d3.ascending(a, b))
function rank(value) {
const data = Array.from(names, name => ({name, image: imageLinks.get(name), value: value(name) || 0}));
data.sort((a, b) => d3.descending(a.value, b.value));
for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);
return data;
}
k = 10
keyframes = {
const keyframes = [];
let ka, a, kb, b;
for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {
for (let i = 0; i < k; ++i) {
const t = i / k;
keyframes.push([
new Date(ka * (1 - t) + kb * t),
rank(name => a.get(name) * (1 - t) + b.get(name) * t)
]);
}
}
keyframes.push([new Date(kb), rank(name => b.get(name))]);
return keyframes;
}
nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)
prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))
next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))
function bars(svg) {
let bar = svg.append("g")
.attr("fill-opacity", 0.6)
.selectAll("rect");
return ([date, data], transition) => bar = bar
.data(data.slice(0, n), d => d.name)
.join(
enter => enter.append("rect")
.attr("fill", color)
.attr("height", y.bandwidth())
.attr("x", x(0))
.attr("y", d => y((prev.get(d) || d).rank))
.attr("width", d => x((prev.get(d) || d).value) - x(0)),
update => update,
exit => exit.transition(transition).remove()
.attr("y", d => y((next.get(d) || d).rank))
.attr("width", d => x((next.get(d) || d).value) - x(0))
)
.call(bar => bar.transition(transition)
.attr("y", d => y(d.rank))
.attr("width", d => x(d.value) - x(0)));
}
function labels(svg) {
let label = svg.append("g")
.style("font", "bold 15px var(--sans-serif)")
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.selectAll("text");
return ([date, data], transition) => label = label
.data(data.slice(0, n), d => d.name)
.join(
enter => enter.append("text")
.attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`)
.attr("y", y.bandwidth() / 2)
.attr("x", -6)
.attr("dy", "-0.45em")
.attr("fill-opacity", 0.7)
.text(d => d.name)
.call(text => text.append("tspan")
.attr("x", -6)
.attr("dy", "1.35em")),
update => update,
exit => exit.transition(transition).remove()
.attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`)
.call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value)))
)
.call(bar => bar.transition(transition)
.attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`)
.call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value))));
}
function textTween(a, b) {
const i = d3.interpolateNumber(a, b);
return function(t) {
this.textContent = formatNumber(i(t));
};
}
formatNumber = d3.format(".0%")
function axis(svg) {
const g = svg.append("g")
.attr("transform", `translate(0,${margin.top})`);
const axis = d3.axisTop(x)
.ticks(width / 160)
.tickFormat(formatNumber)
.tickSizeOuter(0)
.tickSizeInner(-barSize * (n + y.padding()));
return (_, transition) => {
g.transition(transition).call(axis);
g.select(".tick:first-of-type text").remove();
g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "white");
g.select(".domain").remove();
};
}
function ticker(svg) {
const now = svg.append("text")
.style("font", `bold 50px var(--sans-serif)`)
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.attr("x", width - 6)
.attr("y", margin.top + barSize * (n - 0.45))
.attr("dy", "0.32em")
.text(formatDate(keyframes[0][0]));
return ([date], transition) => {
transition.end().then(() => now.text(formatDate(date)));
};
}
color = {
const scale = d3.scaleOrdinal(d3.schemeTableau10);
if (data.some(d => d.category !== undefined)) {
const categoryByName = new Map(data.map(d => [d.name, d.category]))
scale.domain(Array.from(categoryByName.values()));
return d => scale(categoryByName.get(d.name));
}
return d => scale(d.name);
}
x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])
y = d3.scaleBand()
.domain(d3.range(n + 1))
.rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])
.padding(0.03)
height = margin.top + barSize * n + margin.bottom
margin = ({top: 16, right: 90, bottom: 6, left: 0})
d3 = require("d3@5", "d3-array@2")
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.