chart = {
replay;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const updateBars = bars(svg);
const updateAxis = axis(svg);
const updateLabels = labels(svg);
const updateTicker = ticker(svg);
yield svg.node();
for (const keyframe of keyframes) {
const transition = svg.transition()
.duration(duration)
.ease(d3.easeLinear);
// Extract the top bar’s value.
x.domain([0, keyframe[1][0].matched_clips]);
updateAxis(keyframe, transition);
updateBars(keyframe, transition);
updateLabels(keyframe, transition);
updateTicker(keyframe, transition);
invalidation.then(() => svg.interrupt());
await transition.end();
}
}
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).matched_clips) - 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).matched_clips) - x(0))
)
.call(bar => bar.transition(transition)
.attr("y", d => y(d.rank))
.attr("width", d => x(d.matched_clips) - x(0)));
}
function ticker(svg) {
const now = svg.append("text")
.style("font", `bold ${barSize}px var(--sans-serif)`)
.style("font-variant-numeric", "tabular-nums")
.attr("text-anchor", "end")
.attr("x", width - 6)
.attr("y", margin.top + barSize * (n - .6))
.attr("dy", "0.32em")
.text(formatDate(keyframes[0][0]));
const ticker = svg.append("line")
.attr("transform", `translate(${width - margin.right - tickerSize},${margin.top + barSize * n})`)
.attr("x2", tickerSize)
.attr("stroke", "#ddd")
.clone()
.attr("stroke", "#000");
let t0 = 0;
return ([date], transition) => {
const t1 = tickerProgress(date);
const i = d3.interpolateNumber(t0, t1 < t0 ? t1 + 1 : t1);
t0 = t1;
ticker.transition(transition).attrTween("x2", () => t => i(t) % 1 * tickerSize);
transition.end().then(() => now.text(formatDate(date)));
};
}
duration = 100
n = 12
data = d3.csvParse(await FileAttachment("cable_weekly@6.csv").text(), d3.autoType)
names = new Set(data.map(d => d.name))
datevalues = Array.from(d3.rollup(data, ([d]) => d.matched_clips, d => d.date, d => d.name))
.map(([date, data]) => [new Date(date), data])
.sort(([a], [b]) => d3.ascending(a, b))
function rank(matched_clips) {
const data = Array.from(names, name => ({name, matched_clips: matched_clips(name) || 0}));
data.sort((a, b) => d3.descending(a.matched_clips, b.matched_clips));
for (let i = 0, n = data.length; i < n; ++i) data[i].rank = i;
return data;
}
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;
}
k = 10
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 textTween(a, b) {
const i = d3.interpolateNumber(a, b);
return function(t) {
this.textContent = formatNumber(i(t));
};
}
formatNumber = d3.format(",d")
tickerProgress = date => {
const y0 = d3.utcMonth(date);
const y1 = d3.utcMonth.offset(y0);
return (date - y0) / (y1 - y0);
}
formatDate = d3.utcFormat("%B")
tickerSize = 200 // The width of formatDate.
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(m))
.range([margin.top, margin.top + barSize * (m + 0.1)])
.padding(0.1)
m = names.size
height = margin.top + barSize * n + margin.bottom
barSize = 48
margin = ({top: 16, right: 6, bottom: 6, left: 6})
d3 = require("d3@5", "d3-array@2")
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.
