2c:null 2d:["$","title",null,{"children":"F1 Top 15 Bump Chart | 🪦 dis-2025-fall | Observable"}] 32:Tbc5,bumpchartview = { const compact = drawingStyle === "compact"; const svg = d3.create("svg") .attr("cursor", "default") .attr("viewBox", [0, 0, width, height]); svg.append("g") .attr("transform", `translate(${padding + 1},0)`) .selectAll("path") .data(seq(0, years.length)) .join("path") .attr("stroke", "#ccc") .attr("stroke-width", 1) .attr("stroke-dasharray", "5,5") .attr("d", d => d3.line()([[bx(d), 0], [bx(d), height - margin.bottom + padding]])); const series = svg.selectAll(".series") .data(topChartData) .join("g") .attr("class", "series") .attr("opacity", 1) .attr("fill", d => color(d[0].rank)) .attr("stroke", d => color(d[0].rank)) .attr("transform", `translate(${padding + 1},0)`) .on("mouseover", highlight) .on("mouseout", restore); series.selectAll("path") .data(d => d.filter(v => v.rank < 15 && v.next && v.next.rank < 15)) .join("path") .attr("stroke-width", strokeWidth(drawingStyle)) .attr("fill", "none") .attr("d", d => d3.line()([[bx(d.yearIndex), by(d.rank)], [bx(d.next.yearIndex), by(d.next.rank)]]) ); const bumps = series.selectAll("g") .data((d, i) => d .filter(v => v.rank < 15) .map(v => ({driver: topDrivers[i], elo: v, first: d[0].rank})) ) .join("g") .attr("transform", d => `translate(${bx(d.elo.yearIndex)},${by(d.elo.rank)})`) .call(title); bumps.append("circle").attr("r", compact ? 4 : bumpRadius); bumps.append("text") .attr("dy", compact ? "-0.6em" : "0.35em") .attr("fill", compact ? null : "white") .attr("stroke", "none") .attr("text-anchor", "middle") .style("font-weight", "bold") .style("font-size", "12px") .text(d => d.elo.rank + 1); svg.append("g").call(g => drawAxis(g, 0, height - margin.top - margin.bottom + padding, d3.axisBottom(ax), true)); //const leftY = svg.append("g").call(g => drawAxis(g, margin.left, 0, d3.axisLeft(y.domain(left)))); const rightY = svg.append("g").call(g => drawAxis(g, width - margin.right, 0, d3.axisRight(y.domain(right)))); return svg.node(); function highlight(e, d) { this.parentNode.appendChild(this); series.filter(s => s !== d) .transition().duration(400) .attr("fill", "#eee").attr("stroke", "#eee"); //markTick(leftY, 0); markTick(rightY, years.length - 1); function markTick(axis, pos) { axis.selectAll(".tick text").filter((s, i) => i === d[pos].rank) .transition().duration(400) .attr("font-weight", "bold") .attr("fill", color(d[0].rank)); } } function restore() { series.transition().duration(400) .attr("fill", s => color(s[0].rank)).attr("stroke", s => color(s[0].rank)); //restoreTicks(leftY); restoreTicks(rightY); function restoreTicks(axis) { axis.selectAll(".tick text") .transition().duration(400) .attr("font-weight", "normal").attr("fill", "black"); } } }33:T4f5,chartData = { // Build driver/year index lookups const di = new Map(drivers.map((driver, i) => [driver, i])); const yi = new Map(years.map((year, i) => [year, i])); const matrix = Array.from(drivers, () => new Array(years.length).fill(null)); // Fill in the ELO values for (const row of data) { const driver = row.Driver; const rIdx = di.get(driver); for (const year of years) { const val = row[year] == null ? NaN : +row[year]; matrix[rIdx][yi.get(year)] = {rank: 0, elo: val, next: null}; } } // Compute ranks per year years.forEach((yr, i) => { const arr = []; matrix.forEach((d) => arr.push(d[i])); arr.sort((a, b) => (isNaN(b.elo) ? -Infinity : b.elo) - (isNaN(a.elo) ? -Infinity : a.elo)); arr.forEach((d, j) => (d.rank = j)); }); // ✨ Trim each driver’s data to only active years (with real ELOs) let trimmed = matrix.map(driverData => driverData .map((d, i) => ({ ...d, yearIndex: i })) // store year index for bx() .filter(d => !isNaN(d.elo)) // keep only active years ); // ✨ Rebuild `.next` links for trimmed arrays trimmed.forEach(d => { for (let i = 0; i < d.length - 1; i++) { d[i].next = d[i + 1]; } }); return trimmed; } 34:[{"id":"c40b865e54e8af86d155351d688094c45836dc0c62aaa235fcb4dd4711991bde9b3f4a6808d96ebdba28c4aa83e180c34b2a8b9f6eee5b3964d9f0a028ea452d","href":"https://static.observableusercontent.com/files/c40b865e54e8af86d155351d688094c45836dc0c62aaa235fcb4dd4711991bde9b3f4a6808d96ebdba28c4aa83e180c34b2a8b9f6eee5b3964d9f0a028ea452d","name":"f1_yearly_elos.csv","type":"text/csv","lastModified":1762951759039.104,"size":820890}] 30:{"id":"392e339c0cf942e0","slug":"f1-top-15-bump-chart","title":"F1 Top 15 Bump Chart","thumbnail":"feb40b32a60755c874951f3ca1dc7e66a4d1798a7695971fc3f9c93233b2ad9c","access_level":"public","create_time":"$D2025-11-12T12:49:19.039Z","update_time":"$D2025-11-20T13:41:45.571Z","view_time":null,"first_public_time":"$D2025-11-12T15:15:49.824Z","has_unpublished_edits":null,"fork":{"id":"fe876812a7caf22e","slug":"f1-bump-chart","title":"F1 Bump Chart","owner":{"id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024"},"version":662,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1ef264f5339d7a4","login":"joramkim7","name":"joramkim7","avatar_url":"https://avatars-next.observableusercontent.com/8edbe2b2ac5c20ec8b6a24583eb54d1469c4c23c0658dad5bd1652ede8bbad1a","tier":null}],"members":[{"type":"team","id":"e9b2f7fde85a5f53","login":"dis-2025-fall","name":"🪦 dis-2025-fall","avatar_url":"https://avatars-next.observableusercontent.com/a95179728f7a208605a8a434afc1723fb8e19b4266664a0a24602d1c54817cd7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"a1ef264f5339d7a4","login":"joramkim7","name":"joramkim7","avatar_url":"https://avatars-next.observableusercontent.com/8edbe2b2ac5c20ec8b6a24583eb54d1469c4c23c0658dad5bd1652ede8bbad1a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"F1 Top 15 Bump Chart","cells":[{"id":0,"value":"# F1 Top 15 Bump Chart\n\nThis bump chart visualizes the progression of ELO rankings for the top 15 Formula 1 drivers of all time until 2021. Each colored line represents a driver, and the vertical position of the line at each year shows their relative ELO ranking compared to other top 15 drivers.\n\nBy following over the lines, you can see the drivers' ranking evolve over time, revealing eras of dominance, consistency, or decline. Once a driver retires, this chart keeps the final ELO ranking that the driver retired at consistent until the end of the chart, making it a good way to compare the ELO rankings of drivers \n\nHovering over each line emphasizes that driver’s trajectory and helps you trace their performance more clearly against others. A pop up appears on your mouse, highligting the driver's name, and all time ELO rank and score at that year. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"viewof drawingStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"drawAxis = (g, x, y, axis, domain) => {\n g.attr(\"transform\", `translate(${x},${y})`)\n .call(axis)\n .attr(\"font-size\", \"12px\");\n \n if (!domain) g.select(\".domain\").remove();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"title = g => g.append(\"title\")\n .text(d => `${d.driver} - ${years[d.elo.yearIndex]}\nRank: ${d.elo.rank + 1}\nELO: ${toNumber(d.elo.elo)}`);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"strokeWidth = d3.scaleOrdinal()\n .domain([\"default\", \"transit\", \"compact\"])\n .range([5, bumpRadius * 2 + 2, 2]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"bx = d3.scalePoint()\n .domain(seq(0, years.length))\n .range([0, width - margin.right - padding * 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"by = d3.scalePoint()\n .domain(seq(0, topDrivers.length))\n .range([margin.top, height - margin.bottom - padding]);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"ax = d3.scalePoint()\n .domain(years)\n .range([padding + 1, width - margin.right - padding]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"y = d3.scalePoint()\n .range([margin.top, height - margin.bottom - padding]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"toNumber = (num) => (+num).toFixed(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"//data = d3.csvParse(await FileAttachment(\"elo_by_year@1.csv\").text(), d3.autoType)\ndata = d3.csvParse(await FileAttachment(\"f1_yearly_elos.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"f1_yearly_elos = await FileAttachment(\"f1_yearly_elos.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"f1_yearly_elos","database":"$undefined"},{"id":27,"value":"drivers = Array.from(new Set(data.map(d => d.Driver)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"//years = Object.keys(data[0]).filter(k => /^\\d{4}$/.test(k));\nyears = d3.range(1976, 2022)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"ranking = {\n const len = years.length - 1;\n const ranking = chartData.map((d, i) => ({driver: drivers[i], first: d[0].rank, last: d[len].rank}));\n return ranking;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"finalYearIndex = years.length - 1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"finalRanks = chartData.map((d, i) => ({driver: drivers[i], finalElo: d[finalYearIndex].elo, data: d}))\n .sort((a, b) => b.finalElo - a.finalElo)\n .slice(0, 15);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"topChartData = finalRanks.map(d => d.data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"topDrivers = finalRanks.map(d => d.driver);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"color = d3.scaleOrdinal(d3.schemeTableau10)\n .domain(seq(0, finalRanks.length))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"seq = (start, length) => Array.apply(null, {length: length}).map((d, i) => i + start);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"left = finalRanks.slice().sort((a, b) => a.first - b.first).map(d => d.driver)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"right = finalRanks.slice().sort((a, b) => a.last - b.last).map((d) => d.driver);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"width = Math.max(700, years.length * 35);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = Math.max(400, topDrivers.length * 45);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"bumpRadius = 7;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"padding = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"margin = ({left: 160, right: 160, top: 20, bottom: 60})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"elo_by_year1 = await FileAttachment(\"f1_yearly_elos.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"elo_by_year1","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"