2b:null 2c:["$","title",null,{"children":"F1 Top 15 Bump Chart | 🪦 dis-2025-fall | Observable"}] 31: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"); } } }32: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; } 33:[{"id":"c40b865e54e8af86d155351d688094c45836dc0c62aaa235fcb4dd4711991bde9b3f4a6808d96ebdba28c4aa83e180c34b2a8b9f6eee5b3964d9f0a028ea452d","href":"https://static.observableusercontent.com/files/c40b865e54e8af86d155351d688094c45836dc0c62aaa235fcb4dd4711991bde9b3f4a6808d96ebdba28c4aa83e180c34b2a8b9f6eee5b3964d9f0a028ea452d","name":"f1_yearly_elos.csv","type":"text/csv","lastModified":1762951759039.104,"size":820890}] 2f:{"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","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,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","output":"","database":"$undefined"},{"id":279,"value":"viewof drawingStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":319,"value":"toNumber = (num) => (+num).toFixed(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":31,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":442,"value":"finalYearIndex = years.length - 1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":446,"value":"topChartData = finalRanks.map(d => d.data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"topDrivers = finalRanks.map(d => d.driver);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":14,"value":"width = Math.max(700, years.length * 35);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":108,"value":"bumpRadius = 7;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"padding = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"elo_by_year1","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"