2b:null 2c:["$","title",null,{"children":"updated bump chart | 🪦 dis-2025-fall | Observable"}] 31:T1517,newbumpchartview = { 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("transform", `translate(${padding + 1},0)`); series.selectAll(".road-base") .data((d, driverIndex) => d.filter(v => !isNaN(v.elo) && v.next && !isNaN(v.next.elo) ) .map(v => ({ ...v, next: v.next, driverIndex })) ) .join("path") .attr("class", "road-base") .attr("stroke", d => color(d.driverIndex)) .attr("stroke-width", compact ? 6 : 10) .attr("stroke-linecap", "round") .attr("fill", "none") .attr("d", d => d3.line()([ [bx(d.yearIndex), by(d.topRank)], [bx(d.next.yearIndex), by(d.next.topRank)] ]) ); series.selectAll(".road-overlay") .data((d, driverIndex) => d.filter(v => !isNaN(v.elo) && v.next && !isNaN(v.next.elo) ) .map(v => ({ ...v, next: v.next, driverIndex })) ) .join("path") .attr("class", "road-overlay") .attr("stroke", "#FFFFFF") .attr("stroke-width", compact ? 2 : 3) .attr("stroke-dasharray", "6,6") .attr("stroke-linecap", "round") .attr("fill", "none") .attr("d", d => d3.line()([ [bx(d.yearIndex), by(d.topRank)], [bx(d.next.yearIndex), by(d.next.topRank)] ]) ); const bumps = series.selectAll("g.bump") .data((d, driverIndex) => { if (!d || d.length === 0) return []; const lastPoint = d[d.length - 1]; return [ { elo: lastPoint, driverIndex, type: "end" } ]; }) .join("g") .attr("class", "bump") .attr("transform", d => `translate(${bx(d.elo.yearIndex)}, ${by(d.elo.topRank)})` ) .call(title); bumps.append("circle") .attr("r", d => d.type === "start" ? 5 : bumpRadius) .attr("fill", d => color(d.driverIndex)) .attr("stroke", d => color(d.driverIndex)); bumps.append("image") .attr("href", racecar) .attr("width", 20) .attr("height", 20) .attr("x", -10) .attr("y", -10) .style("display", d => d.type === "start" ? "none" : "block"); const hoverGroup = svg.append("g") .attr("class", "hover-group") .attr("transform", `translate(${padding + 1},0)`); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "4px 8px") .style("border-radius", "4px") .style("font-size", "16px") .style("display", "none"); topChartData.forEach((driverData, driverIndex) => { hoverGroup.selectAll(`.hover-${driverIndex}`) .data(driverData) .join("circle") .attr("class", `hover-${driverIndex}`) .attr("cx", d => bx(d.yearIndex)) .attr("cy", d => by(d.topRank)) .attr("r", 6) .attr("fill", "transparent") .attr("opacity", 0.4) .attr("pointer-events", "all") .on("mouseover", (event, d) => { highlight(event, driverIndex, d); // d.driver is included tooltip.style("display", "block") .html(` ${d.driver}
Year: ${d.yearIndex + 1978}
Rank: ${d.rank + 1}
Elo: ${d.elo.toFixed(2)} `) .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY + 10}px`); }) .on("mousemove", (event) => { tooltip.style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY + 10}px`); }) .on("mouseout", () => { restore(); tooltip.style("display", "none"); }); }); svg.append("g") .call(g => drawAxis(g, 0, height - margin.top - margin.bottom + padding, d3.axisBottom(ax), true )); const rightY = svg.append("g") .call(g => drawAxis(g, width - margin.right, 0, d3.axisRight(y.domain(right)))); rightY.selectAll("text") .attr("font-size", "17px") return svg.node(); function highlight(event, driverIndex, dSeries) { series.filter((s, i) => i !== driverIndex) .transition().duration(400) .attr("opacity", 0.15); markTick(rightY, driverIndex, dSeries); } function restore() { series.transition().duration(400) .attr("opacity", 1); rightY.selectAll(".tick text") .transition().duration(400) .attr("font-weight", "normal") .attr("fill", "black"); } function markTick(axis, driverIndex, dSeries) { const driverName = dSeries.driver; axis.selectAll(".tick text") .filter((s, i) => right[i] === driverName) // match driver name .transition().duration(400) .attr("font-weight", "bold") .attr("fill", color(driverIndex)); } }32:T842,function _chartData(drivers, years, data) { const di = new Map(drivers.map((d, i) => [d, i])); const yi = new Map(years.map((y, i) => [y, i])); const matrix = Array.from(drivers, () => years.map(() => ({ elo: NaN, rank: 0, next: null })) ); for (const row of data) { const r = di.get(row.Driver); for (const year of years) { const val = row[year]; matrix[r][yi.get(year)].elo = val == null ? NaN : +val; } } matrix.forEach(driverData => { for (let i = 0; i < driverData.length; i++) { if (driverData[i].elo === 0) driverData[i].elo = NaN; } }); matrix.forEach(driverData => { let last = NaN; let debutFound = false; for (let i = 0; i < driverData.length; i++) { if (!isNaN(driverData[i].elo)) { last = driverData[i].elo; debutFound = true; } // only fill after debut if (debutFound && !isNaN(last)) driverData[i].elo = last; } }); matrix.forEach(driverData => { let debutFound = false; for (let i = 0; i < driverData.length; i++) { if (!isNaN(driverData[i].elo)) { debutFound = true; } else if (!debutFound) { // keep NaN before debut driverData[i].elo = NaN; } } }); years.forEach((year, i) => { const col = matrix.map(driverData => driverData[i]); col.slice() .sort((a, b) => (isNaN(b.elo) ? -Infinity : b.elo) - (isNaN(a.elo) ? -Infinity : a.elo)) .forEach((d, rank) => d.rank = rank); }); const topDriverIndices = topDriversAllTime.map(driver => drivers.indexOf(driver)); years.forEach((year, i) => { const topCol = topDriverIndices.map(idx => matrix[idx][i]); topCol.slice() .sort((a, b) => (isNaN(b.elo) ? -Infinity : b.elo) - (isNaN(a.elo) ? -Infinity : a.elo)) .forEach((d, rank) => d.topRank = rank); }); matrix.forEach(driverData => { driverData.forEach((d, i) => d.yearIndex = i); for (let i = 0; i < driverData.length - 1; i++) { driverData[i].next = driverData[i + 1]; } }); return matrix; } 33:[{"id":"c99cf91ab1a4d720283284ff6b837c6ed2910282596574de1826dcc15568116c86c48683f2f1dbb021be718253d1379a9db3c759ba34c66fbe1d0fbd7ef9c82d","href":"https://static.observableusercontent.com/files/c99cf91ab1a4d720283284ff6b837c6ed2910282596574de1826dcc15568116c86c48683f2f1dbb021be718253d1379a9db3c759ba34c66fbe1d0fbd7ef9c82d","name":"y.png","type":"image/png","lastModified":1763991630172.564,"size":83563},{"id":"ef5301bf42ea902f395278be086862a6cca7690b7370fe20cbc0beab655a00bed791f8efafaf7da5a5ff45b33ed1ccb8d064bdd952b7aaf67916e600de2ca1eb","href":"https://static.observableusercontent.com/files/ef5301bf42ea902f395278be086862a6cca7690b7370fe20cbc0beab655a00bed791f8efafaf7da5a5ff45b33ed1ccb8d064bdd952b7aaf67916e600de2ca1eb","name":"elo_by_year_color@4.csv","type":"text/csv","lastModified":1764333646302.946,"size":862240},{"id":"fc7876f4efa4805e64be249f6add6b5c85477fe2479c48cc05311e08cb28eeb4c48ada705cb671c7b4d7ff209d9adc4239aa2127040936069efc60a7a86d763c","href":"https://static.observableusercontent.com/files/fc7876f4efa4805e64be249f6add6b5c85477fe2479c48cc05311e08cb28eeb4c48ada705cb671c7b4d7ff209d9adc4239aa2127040936069efc60a7a86d763c","name":"elo_by_race_color@2.csv","type":"text/csv","lastModified":1764333646220.768,"size":2887562},{"id":"a98984117d458f9b84927b5f889fb91b9bb9614bfbd1091d9ea2f3f33a5eee8a0b35e639e8811ed6077470730ced4d35bf72f0a19e980c4d48ed6e10fd041edf","href":"https://static.observableusercontent.com/files/a98984117d458f9b84927b5f889fb91b9bb9614bfbd1091d9ea2f3f33a5eee8a0b35e639e8811ed6077470730ced4d35bf72f0a19e980c4d48ed6e10fd041edf","name":"colors@4.csv","type":"text/csv","lastModified":1764341050845.674,"size":32228}] 2f:{"id":"8d638101d8df5605","slug":"newbumpchart","title":"updated bump chart","thumbnail":"797362756048713da5227a4d0ece7fc37507c5d4975fdd0076b33e95ae347080","access_level":"public","create_time":"$D2025-11-18T20:08:43.382Z","update_time":"$D2025-12-03T13:02:47.156Z","view_time":null,"first_public_time":"$D2025-11-24T14:58:42.501Z","fork":{"id":"392e339c0cf942e0","slug":"f1-top-15-bump-chart","title":"F1 Top 15 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":1149,"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":0,"collection":null,"type":"notebook","body":{"title":"updated bump chart","cells":[{"id":891,"value":"# updated bump chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"\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":880,"value":"function _drawingStyle(html){return(\nhtml``\n)}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"width1=600","pinned":true,"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":671,"value":"racecar = FileAttachment(\"y.png\").url()","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 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":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_color@4.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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 = d3.range(1978, 2025)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"chartData = _chartData(drivers, years, data, topDriversAllTime)","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":444,"value":"finalRanks = topDriversAllTime.map(driverName => {\n const index = drivers.indexOf(driverName);\n return {\n driver: driverName,\n data: chartData[index]\n };\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"topChartData = finalRanks.map(d =>\n d.data.map(point => ({ ...point, driver: d.driver }))\n);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"topDrivers = topDriversAllTime;","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":56,"value":"right = topChartData\n .map(series => series[series.length - 1])\n .sort((a, b) => a.rank - b.rank)\n .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 * 55);","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":898,"value":"zzz = d3.csvParse(\n await FileAttachment(\"elo_by_race_color@2.csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":900,"value":"allTimePeaks = d3.rollups(\n zzz,\n v => d3.max(v, d => d[\"New Elo\"]),\n d => d.Driver\n).map(([driver, maxElo]) => ({driver, maxElo}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"top15AllTime = allTimePeaks\n .sort((a, b) => d3.descending(a.maxElo, b.maxElo))\n .slice(0, 15);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"topDriversAllTime = top15AllTime.map(d => d.driver);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"colors = d3.csvParse(await FileAttachment(\"colors@4.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"colorMap = new Map(colors.map(d => [d.Driver, d.color]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"color = i => {\n const driverName = topDriversAllTime[i];\n return colorMap.get(driverName) || \"#000000\";\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"