Race Lap Time Interactive Graph<\/title>\n<script src=\"https:\/\/cdn.plot.ly\/plotly-2.26.0.min.js\"><\/script>\n<style>\n body{margin:20px;background:#fff;color:#000;}\n .driver-toggle{\n display:inline-block;\n padding:4px 8px;\n margin:2px 4px;\n border:1px solid #ccc;\n border-radius:4px;\n cursor:pointer;\n user-select:none;\n font-weight:bold;\n color:#000;\n }\n .driver-toggle.active{border:1px solid #000;}\n #selectAll,#clearAll{\n margin-left:10px;\n padding:6px 12px;\n cursor:pointer;\n font-size:1.1em;\n }\n #controls,\n #controls strong,\n .driver-toggle,\n #selectAll,\n #clearAll{\n font-family:\"Times New Roman\",serif;\n }\n<\/style>\n<\/head>\n<body>\n\n<h2>Lap Times<\/h2>\n<div id=\"controls\">\n <strong>Drivers:<\/strong>\n <span id=\"driverButtons\"><\/span>\n <button id=\"selectAll\">Select All<\/button>\n <button id=\"clearAll\">Clear All<\/button>\n<\/div>\n<div id=\"lapChart\" style=\"width:100%;max-width:1200px;height:520px;\"><\/div>\n\n<h2>Gap to Leader<\/h2>\n<div id=\"gapChart\" style=\"width:100%;max-width:1200px;height:650px;\"><\/div>\n\n<script>\nconst DATA_FILE = \"australia_2026_lap_times.tsv\";\n\n\/*\n 2026 Australian GP\n \u4e26\u3073\u9806 = 2025 \u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u30ba\u9806\u4f4d\u9806\n McLaren \u2192 Mercedes \u2192 Red Bull \u2192 Ferrari \u2192 Williams\n \u2192 Racing Bulls \u2192 Aston Martin \u2192 Haas \u2192 Kick Sauber \u2192 Alpine \u2192 Cadillac\n*\/\nconst DRIVERS = [\n \"NOR\",\"PIA\",\n \"RUS\",\"ANT\",\n \"VER\",\"HAD\",\n \"LEC\",\"HAM\",\n \"ALB\",\"SAI\",\n \"LAW\",\"LIN\",\n \"ALO\",\"STR\",\n \"OCO\",\"BEA\",\n \"HUL\",\"BOR\",\n \"GAS\",\"COL\",\n \"PER\",\"BOT\"\n];\n\nconst NAME_MAP = {\n \"Lando NORRIS\":\"NOR\",\n \"Oscar PIASTRI\":\"PIA\",\n \"George RUSSELL\":\"RUS\",\n \"Kimi ANTONELLI\":\"ANT\",\n \"Max VERSTAPPEN\":\"VER\",\n \"Isack HADJAR\":\"HAD\",\n \"Charles LECLERC\":\"LEC\",\n \"Lewis HAMILTON\":\"HAM\",\n \"Alexander ALBON\":\"ALB\",\n \"Carlos SAINZ\":\"SAI\",\n \"Liam LAWSON\":\"LAW\",\n \"Arvid LINDBLAD\":\"LIN\",\n \"Fernando ALONSO\":\"ALO\",\n \"Lance STROLL\":\"STR\",\n \"Esteban OCON\":\"OCO\",\n \"Oliver BEARMAN\":\"BEA\",\n \"Nico HULKENBERG\":\"HUL\",\n \"Gabriel BORTOLETO\":\"BOR\",\n \"Pierre GASLY\":\"GAS\",\n \"Franco COLAPINTO\":\"COL\",\n \"Sergio PEREZ\":\"PER\",\n \"Valtteri BOTTAS\":\"BOT\"\n};\n\nconst DRIVER_COLORS = {\n NOR:\"rgb(255,128,0)\",\n PIA:\"rgb(255,192,128)\",\n\n RUS:\"rgb(166,166,166)\",\n ANT:\"rgb(0,176,80)\",\n\n VER:\"rgb(0,32,96)\",\n HAD:\"rgb(102,255,0)\",\n\n LEC:\"rgb(255,0,0)\",\n HAM:\"rgb(255,192,192)\",\n\n ALB:\"rgb(192,176,224)\",\n SAI:\"rgb(0,112,192)\",\n\n LAW:\"rgb(180,198,231)\",\n LIN:\"rgb(112,48,160)\",\n\n ALO:\"rgb(0,176,240)\",\n STR:\"rgb(0,112,112)\",\n\n OCO:\"rgb(0,0,0)\",\n BEA:\"rgb(128,128,128)\",\n\n HUL:\"rgb(255,193,37)\",\n BOR:\"rgb(192,0,0)\",\n\n GAS:\"rgb(0,128,255)\",\n COL:\"rgb(255,0,255)\",\n\n PER:\"rgb(255,140,0)\",\n BOT:\"rgb(0,150,136)\"\n};\n\nconst WHITE_TEXT = new Set([\n \"VER\",\"LIN\",\"STR\",\"OCO\",\"BEA\",\"SAI\",\"GAS\",\"BOR\",\"BOT\"\n]);\n\nconst timeStrToSec = s => {\n if(!s) return null;\n const [m, rest] = s.split(\":\");\n return parseInt(m, 10) * 60 + parseFloat(rest);\n};\n\nconst secToTime = s => {\n const m = Math.floor(s \/ 60);\n return m + \":\" + (\"0\" + (s - m * 60).toFixed(3)).slice(-6);\n};\n\n\/\/ \u9078\u629e\u9806\u3092\u51e1\u4f8b\u30bd\u30fc\u30c8\u306b\u4f1d\u3048\u308b\u305f\u3081\u306e\u30ab\u30a6\u30f3\u30bf\u30fc\nlet legendCounter = 0;\n\nfetch(DATA_FILE).then(r => r.text()).then(tsv => {\n const rows = tsv.trim().split(\/\\r?\\n\/).map(l => l.split(\"\\t\"));\n const headers = rows[0];\n const lapCnt = rows.length - 1;\n\n const laps = [];\n const times = {};\n const cum = {};\n\n DRIVERS.forEach(d => {\n times[d] = [];\n cum[d] = [];\n });\n\n for(let i = 1; i < rows.length; i++){\n const cells = rows[i];\n const lap = parseInt(cells[0], 10);\n laps.push(lap);\n\n const row = {};\n for(let j = 1; j < cells.length; j++){\n row[headers[j]] = cells[j];\n }\n\n DRIVERS.forEach(d => {\n const full = Object.keys(NAME_MAP).find(k => NAME_MAP[k] === d);\n const t = timeStrToSec(row[full]);\n times[d].push(t);\n cum[d].push((i > 1 ? cum[d][i - 2] : 0) + (t ?? 0));\n });\n }\n\n let fastest = Infinity;\n DRIVERS.forEach(d => times[d].forEach(v => {\n if(v && v < fastest) fastest = v;\n }));\n\n const yMin = Math.floor(fastest);\n const yMax = yMin + 8;\n const tickVals = Array.from({length: yMax - yMin + 1}, (_, k) => yMin + k);\n\n const within = {};\n DRIVERS.forEach(d => within[d] = Array(lapCnt).fill(false));\n\n for(let i = 0; i < lapCnt; i++){\n const running = DRIVERS\n .filter(d => times[d][i] != null)\n .sort((a, b) => cum[a][i] - cum[b][i]);\n\n for(let j = 1; j < running.length; j++){\n if(cum[running[j]][i] - cum[running[j - 1]][i] <= 2){\n within[running[j]][i] = true;\n }\n }\n }\n\n const tracesLap = [];\n const tracesGap = [];\n\n DRIVERS.forEach(d => {\n tracesLap.push({\n name: d,\n x: laps,\n y: times[d],\n mode: \"lines\",\n line: {color: DRIVER_COLORS[d], width: 2},\n visible: false,\n showlegend: false\n });\n\n tracesLap.push({\n x: laps,\n y: times[d],\n mode: \"markers\",\n marker: {\n size: 6,\n color: within[d].map(f => f ? \"#ffffff\" : DRIVER_COLORS[d]),\n symbol: \"circle\",\n line: {color: DRIVER_COLORS[d], width: 2}\n },\n hoverinfo: \"skip\",\n showlegend: false,\n visible: false\n });\n\n tracesGap.push({\n name: d,\n x: laps,\n y: cum[d].map((v, i) => {\n if(times[d][i] == null) return null;\n const live = DRIVERS.filter(x => times[x][i] != null);\n const leader = live.reduce((m, x) => cum[x][i] < cum[m][i] ? x : m, live[0]);\n return v - cum[leader][i];\n }),\n mode: \"lines\",\n connectgaps: false,\n line: {color: DRIVER_COLORS[d], width: 2},\n visible: false,\n showlegend: false\n });\n });\n\n const fontAll = {family:\"Times New Roman, Times, serif\"};\n const legendCfg = {itemclick:false, itemdoubleclick:false};\n\n Plotly.newPlot(\"lapChart\", tracesLap, {\n font: fontAll,\n legend: legendCfg,\n xaxis: {\n title: {text:\"Lap\", font: fontAll},\n tickfont: fontAll\n },\n yaxis: {\n title: {text:\"Time (m:s)\", font: fontAll},\n tickfont: fontAll,\n range: [yMax, yMin],\n autorange: false,\n tickvals: tickVals,\n ticktext: tickVals.map(secToTime)\n },\n margin: {t:40}\n }, {responsive:true});\n\n Plotly.newPlot(\"gapChart\", tracesGap, {\n font: fontAll,\n legend: legendCfg,\n xaxis: {\n title: {text:\"Lap\", font: fontAll},\n tickfont: fontAll\n },\n yaxis: {\n title: {text:\"Gap (s)\", font: fontAll},\n tickfont: fontAll,\n range: [0, 250],\n autorange: false\n },\n margin: {t:40}\n }, {responsive:true});\n\n const box = document.getElementById(\"driverButtons\");\n\n function showDriver(idx){\n const lineIdx = 2 * idx;\n const markerIdx = lineIdx + 1;\n legendCounter += 1;\n\n Plotly.restyle(\"lapChart\", {\n visible: true,\n showlegend: true,\n legendrank: legendCounter\n }, [lineIdx]);\n\n Plotly.restyle(\"lapChart\", {\n visible: true\n }, [markerIdx]);\n\n Plotly.restyle(\"gapChart\", {\n visible: true,\n showlegend: true,\n legendrank: legendCounter\n }, [idx]);\n }\n\n function hideDriver(idx){\n const lineIdx = 2 * idx;\n const markerIdx = lineIdx + 1;\n\n Plotly.restyle(\"lapChart\", {\n visible: false,\n showlegend: false,\n legendrank: null\n }, [lineIdx]);\n\n Plotly.restyle(\"lapChart\", {\n visible: false\n }, [markerIdx]);\n\n Plotly.restyle(\"gapChart\", {\n visible: false,\n showlegend: false,\n legendrank: null\n }, [idx]);\n }\n\n const toggle = (d, btn) => {\n const idx = DRIVERS.indexOf(d);\n if(btn.classList.toggle(\"active\")){\n showDriver(idx);\n }else{\n hideDriver(idx);\n }\n };\n\n DRIVERS.forEach(d => {\n const b = document.createElement(\"span\");\n b.textContent = d;\n b.className = \"driver-toggle\";\n b.style.backgroundColor = DRIVER_COLORS[d];\n if(WHITE_TEXT.has(d)) b.style.color = \"#fff\";\n b.onclick = () => toggle(d, b);\n box.appendChild(b);\n });\n\n document.getElementById(\"selectAll\").onclick = () => {\n legendCounter = 0;\n document.querySelectorAll(\".driver-toggle\").forEach((btn, idx) => {\n if(!btn.classList.contains(\"active\")) btn.classList.add(\"active\");\n legendCounter += 1;\n\n const lineIdx = 2 * idx;\n const markerIdx = lineIdx + 1;\n\n Plotly.restyle(\"lapChart\", {\n visible: true,\n showlegend: true,\n legendrank: legendCounter\n }, [lineIdx]);\n\n Plotly.restyle(\"lapChart\", {\n visible: true\n }, [markerIdx]);\n\n Plotly.restyle(\"gapChart\", {\n visible: true,\n showlegend: true,\n legendrank: legendCounter\n }, [idx]);\n });\n };\n\n document.getElementById(\"clearAll\").onclick = () => {\n legendCounter = 0;\n document.querySelectorAll(\".driver-toggle.active\").forEach(btn => {\n const idx = DRIVERS.indexOf(btn.textContent);\n btn.classList.remove(\"active\");\n hideDriver(idx);\n });\n };\n\n}).catch(e => {\n console.error(e);\n alert(\"TSV \u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\");\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u6ce8\u610f\u70b9\uff1a<\/strong><\/p>\n\n\n\n<p>\u30e9\u30c3\u30d7\u30bf\u30a4\u30e0\u30b0\u30e9\u30d5\u306b\u304a\u3044\u3066\u3001\u30c0\u30fc\u30c6\u30a3\u30a8\u30a2\u306e\u30e9\u30c3\u30d7\uff08\u524d\u65b92\u79d2\u4ee5\u5185\u306b\u4ed6\u8eca\u304c\u3044\u308b\uff09\u306f\u5404\u30c7\u30fc\u30bf\u70b9\u3092\u767d\u629c\u304d\u3001\u30af\u30ea\u30a2\u30a8\u30a2\u306e\u30e9\u30c3\u30d7\u306f\u5857\u308a\u3064\u3076\u3057\u305f\u3002<\/p>\n\n\n\n<p><a href=\"https:\/\/press.pirelli.com\/norris-chooses-a-different-tyre-strategy-to-seal-his-first-title\/\" target=\"_blank\" rel=\"noopener\" title=\"\">\u5404\u30c9\u30e9\u30a4\u30d0\u30fc\u306e\u4f7f\u7528\u30bf\u30a4\u30e4\u306f\u30d4\u30ec\u30ea\u516c\u5f0f\u3088\u308a<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Race Lap Time Interactive Graph Lap Times Drivers: Select All Clear All Gap to Leader \u6ce8\u610f\u70b9\uff1a \u30e9\u30c3\u30d7\u30bf\u30a4\u30e0\u30b0\u30e9\u30d5\u306b\u304a\u3044\u3066\u3001\u30c0\u30fc\u30c6\u30a3\u30a8 […]<\/p>\n","protected":false},"author":1,"featured_media":16623,"parent":16624,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16613","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages\/16613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16613"}],"version-history":[{"count":5,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages\/16613\/revisions"}],"predecessor-version":[{"id":16630,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages\/16613\/revisions\/16630"}],"up":[{"embeddable":true,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages\/16624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/media\/16623"}],"wp:attachment":[{"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":16613,"date":"2026-03-09T11:22:58","date_gmt":"2026-03-09T02:22:58","guid":{"rendered":"https:\/\/f1-lap-time.com\/?page_id=16613"},"modified":"2026-03-09T13:06:36","modified_gmt":"2026-03-09T04:06:36","slug":"%e3%80%90%e3%82%aa%e3%83%bc%e3%82%b9%e3%83%88%e3%83%a9%e3%83%aa%e3%82%a2gp%e3%80%91%e3%83%a9%e3%83%83%e3%83%97%e3%82%bf%e3%82%a4%e3%83%a0%e3%81%a8%e3%82%ae%e3%83%a3%e3%83%83%e3%83%97","status":"publish","type":"page","link":"https:\/\/f1-lap-time.com\/?page_id=16613","title":{"rendered":"\u3010\u30aa\u30fc\u30b9\u30c8\u30e9\u30ea\u30a2GP\u3011\u30e9\u30c3\u30d7\u30bf\u30a4\u30e0\u3068\u30ae\u30e3\u30c3\u30d7"},"content":{"rendered":"\n\n\n\n\nRace Lap Time Interactive Graph<\/title>\n<script src=\"https:\/\/cdn.plot.ly\/plotly-2.26.0.min.js\"><\/script>\n<style>\n body{margin:20px;background:#fff;color:#000;}\n .driver-toggle{\n display:inline-block;\n padding:4px 8px;\n margin:2px 4px;\n border:1px solid #ccc;\n border-radius:4px;\n cursor:pointer;\n user-select:none;\n font-weight:bold;\n color:#000;\n }\n .driver-toggle.active{border:1px solid #000;}\n #selectAll,#clearAll{\n margin-left:10px;\n padding:6px 12px;\n cursor:pointer;\n font-size:1.1em;\n }\n #controls,\n #controls strong,\n .driver-toggle,\n #selectAll,\n #clearAll{\n font-family:\"Times New Roman\",serif;\n }\n<\/style>\n<\/head>\n<body>\n\n<h2>Lap Times<\/h2>\n<div id=\"controls\">\n <strong>Drivers:<\/strong>\n <span id=\"driverButtons\"><\/span>\n <button id=\"selectAll\">Select All<\/button>\n <button id=\"clearAll\">Clear All<\/button>\n<\/div>\n<div id=\"lapChart\" style=\"width:100%;max-width:1200px;height:520px;\"><\/div>\n\n<h2>Gap to Leader<\/h2>\n<div id=\"gapChart\" style=\"width:100%;max-width:1200px;height:650px;\"><\/div>\n\n<script>\nconst DATA_FILE = \"australia_2026_lap_times.tsv\";\n\n\/*\n 2026 Australian GP\n \u4e26\u3073\u9806 = 2025 \u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\u30ba\u9806\u4f4d\u9806\n McLaren \u2192 Mercedes \u2192 Red Bull \u2192 Ferrari \u2192 Williams\n \u2192 Racing Bulls \u2192 Aston Martin \u2192 Haas \u2192 Kick Sauber \u2192 Alpine \u2192 Cadillac\n*\/\nconst DRIVERS = [\n \"NOR\",\"PIA\",\n \"RUS\",\"ANT\",\n \"VER\",\"HAD\",\n \"LEC\",\"HAM\",\n \"ALB\",\"SAI\",\n \"LAW\",\"LIN\",\n \"ALO\",\"STR\",\n \"OCO\",\"BEA\",\n \"HUL\",\"BOR\",\n \"GAS\",\"COL\",\n \"PER\",\"BOT\"\n];\n\nconst NAME_MAP = {\n \"Lando NORRIS\":\"NOR\",\n \"Oscar PIASTRI\":\"PIA\",\n \"George RUSSELL\":\"RUS\",\n \"Kimi ANTONELLI\":\"ANT\",\n \"Max VERSTAPPEN\":\"VER\",\n \"Isack HADJAR\":\"HAD\",\n \"Charles LECLERC\":\"LEC\",\n \"Lewis HAMILTON\":\"HAM\",\n \"Alexander ALBON\":\"ALB\",\n \"Carlos SAINZ\":\"SAI\",\n \"Liam LAWSON\":\"LAW\",\n \"Arvid LINDBLAD\":\"LIN\",\n \"Fernando ALONSO\":\"ALO\",\n \"Lance STROLL\":\"STR\",\n \"Esteban OCON\":\"OCO\",\n \"Oliver BEARMAN\":\"BEA\",\n \"Nico HULKENBERG\":\"HUL\",\n \"Gabriel BORTOLETO\":\"BOR\",\n \"Pierre GASLY\":\"GAS\",\n \"Franco COLAPINTO\":\"COL\",\n \"Sergio PEREZ\":\"PER\",\n \"Valtteri BOTTAS\":\"BOT\"\n};\n\nconst DRIVER_COLORS = {\n NOR:\"rgb(255,128,0)\",\n PIA:\"rgb(255,192,128)\",\n\n RUS:\"rgb(166,166,166)\",\n ANT:\"rgb(0,176,80)\",\n\n VER:\"rgb(0,32,96)\",\n HAD:\"rgb(102,255,0)\",\n\n LEC:\"rgb(255,0,0)\",\n HAM:\"rgb(255,192,192)\",\n\n ALB:\"rgb(192,176,224)\",\n SAI:\"rgb(0,112,192)\",\n\n LAW:\"rgb(180,198,231)\",\n LIN:\"rgb(112,48,160)\",\n\n ALO:\"rgb(0,176,240)\",\n STR:\"rgb(0,112,112)\",\n\n OCO:\"rgb(0,0,0)\",\n BEA:\"rgb(128,128,128)\",\n\n HUL:\"rgb(255,193,37)\",\n BOR:\"rgb(192,0,0)\",\n\n GAS:\"rgb(0,128,255)\",\n COL:\"rgb(255,0,255)\",\n\n PER:\"rgb(255,140,0)\",\n BOT:\"rgb(0,150,136)\"\n};\n\nconst WHITE_TEXT = new Set([\n \"VER\",\"LIN\",\"STR\",\"OCO\",\"BEA\",\"SAI\",\"GAS\",\"BOR\",\"BOT\"\n]);\n\nconst timeStrToSec = s => {\n if(!s) return null;\n const [m, rest] = s.split(\":\");\n return parseInt(m, 10) * 60 + parseFloat(rest);\n};\n\nconst secToTime = s => {\n const m = Math.floor(s \/ 60);\n return m + \":\" + (\"0\" + (s - m * 60).toFixed(3)).slice(-6);\n};\n\n\/\/ \u9078\u629e\u9806\u3092\u51e1\u4f8b\u30bd\u30fc\u30c8\u306b\u4f1d\u3048\u308b\u305f\u3081\u306e\u30ab\u30a6\u30f3\u30bf\u30fc\nlet legendCounter = 0;\n\nfetch(DATA_FILE).then(r => r.text()).then(tsv => {\n const rows = tsv.trim().split(\/\\r?\\n\/).map(l => l.split(\"\\t\"));\n const headers = rows[0];\n const lapCnt = rows.length - 1;\n\n const laps = [];\n const times = {};\n const cum = {};\n\n DRIVERS.forEach(d => {\n times[d] = [];\n cum[d] = [];\n });\n\n for(let i = 1; i < rows.length; i++){\n const cells = rows[i];\n const lap = parseInt(cells[0], 10);\n laps.push(lap);\n\n const row = {};\n for(let j = 1; j < cells.length; j++){\n row[headers[j]] = cells[j];\n }\n\n DRIVERS.forEach(d => {\n const full = Object.keys(NAME_MAP).find(k => NAME_MAP[k] === d);\n const t = timeStrToSec(row[full]);\n times[d].push(t);\n cum[d].push((i > 1 ? cum[d][i - 2] : 0) + (t ?? 0));\n });\n }\n\n let fastest = Infinity;\n DRIVERS.forEach(d => times[d].forEach(v => {\n if(v && v < fastest) fastest = v;\n }));\n\n const yMin = Math.floor(fastest);\n const yMax = yMin + 8;\n const tickVals = Array.from({length: yMax - yMin + 1}, (_, k) => yMin + k);\n\n const within = {};\n DRIVERS.forEach(d => within[d] = Array(lapCnt).fill(false));\n\n for(let i = 0; i < lapCnt; i++){\n const running = DRIVERS\n .filter(d => times[d][i] != null)\n .sort((a, b) => cum[a][i] - cum[b][i]);\n\n for(let j = 1; j < running.length; j++){\n if(cum[running[j]][i] - cum[running[j - 1]][i] <= 2){\n within[running[j]][i] = true;\n }\n }\n }\n\n const tracesLap = [];\n const tracesGap = [];\n\n DRIVERS.forEach(d => {\n tracesLap.push({\n name: d,\n x: laps,\n y: times[d],\n mode: \"lines\",\n line: {color: DRIVER_COLORS[d], width: 2},\n visible: false,\n showlegend: false\n });\n\n tracesLap.push({\n x: laps,\n y: times[d],\n mode: \"markers\",\n marker: {\n size: 6,\n color: within[d].map(f => f ? \"#ffffff\" : DRIVER_COLORS[d]),\n symbol: \"circle\",\n line: {color: DRIVER_COLORS[d], width: 2}\n },\n hoverinfo: \"skip\",\n showlegend: false,\n visible: false\n });\n\n tracesGap.push({\n name: d,\n x: laps,\n y: cum[d].map((v, i) => {\n if(times[d][i] == null) return null;\n const live = DRIVERS.filter(x => times[x][i] != null);\n const leader = live.reduce((m, x) => cum[x][i] < cum[m][i] ? x : m, live[0]);\n return v - cum[leader][i];\n }),\n mode: \"lines\",\n connectgaps: false,\n line: {color: DRIVER_COLORS[d], width: 2},\n visible: false,\n showlegend: false\n });\n });\n\n const fontAll = {family:\"Times New Roman, Times, serif\"};\n const legendCfg = {itemclick:false, itemdoubleclick:false};\n\n Plotly.newPlot(\"lapChart\", tracesLap, {\n font: fontAll,\n legend: legendCfg,\n xaxis: {\n title: {text:\"Lap\", font: fontAll},\n tickfont: fontAll\n },\n yaxis: {\n title: {text:\"Time (m:s)\", font: fontAll},\n tickfont: fontAll,\n range: [yMax, yMin],\n autorange: false,\n tickvals: tickVals,\n ticktext: tickVals.map(secToTime)\n },\n margin: {t:40}\n }, {responsive:true});\n\n Plotly.newPlot(\"gapChart\", tracesGap, {\n font: fontAll,\n legend: legendCfg,\n xaxis: {\n title: {text:\"Lap\", font: fontAll},\n tickfont: fontAll\n },\n yaxis: {\n title: {text:\"Gap (s)\", font: fontAll},\n tickfont: fontAll,\n range: [0, 250],\n autorange: false\n },\n margin: {t:40}\n }, {responsive:true});\n\n const box = document.getElementById(\"driverButtons\");\n\n function showDriver(idx){\n const lineIdx = 2 * idx;\n const markerIdx = lineIdx + 1;\n legendCounter += 1;\n\n Plotly.restyle(\"lapChart\", {\n visible: true,\n showlegend: true,\n legendrank: legendCounter\n }, [lineIdx]);\n\n Plotly.restyle(\"lapChart\", {\n visible: true\n }, [markerIdx]);\n\n Plotly.restyle(\"gapChart\", {\n visible: true,\n showlegend: true,\n legendrank: legendCounter\n }, [idx]);\n }\n\n function hideDriver(idx){\n const lineIdx = 2 * idx;\n const markerIdx = lineIdx + 1;\n\n Plotly.restyle(\"lapChart\", {\n visible: false,\n showlegend: false,\n legendrank: null\n }, [lineIdx]);\n\n Plotly.restyle(\"lapChart\", {\n visible: false\n }, [markerIdx]);\n\n Plotly.restyle(\"gapChart\", {\n visible: false,\n showlegend: false,\n legendrank: null\n }, [idx]);\n }\n\n const toggle = (d, btn) => {\n const idx = DRIVERS.indexOf(d);\n if(btn.classList.toggle(\"active\")){\n showDriver(idx);\n }else{\n hideDriver(idx);\n }\n };\n\n DRIVERS.forEach(d => {\n const b = document.createElement(\"span\");\n b.textContent = d;\n b.className = \"driver-toggle\";\n b.style.backgroundColor = DRIVER_COLORS[d];\n if(WHITE_TEXT.has(d)) b.style.color = \"#fff\";\n b.onclick = () => toggle(d, b);\n box.appendChild(b);\n });\n\n document.getElementById(\"selectAll\").onclick = () => {\n legendCounter = 0;\n document.querySelectorAll(\".driver-toggle\").forEach((btn, idx) => {\n if(!btn.classList.contains(\"active\")) btn.classList.add(\"active\");\n legendCounter += 1;\n\n const lineIdx = 2 * idx;\n const markerIdx = lineIdx + 1;\n\n Plotly.restyle(\"lapChart\", {\n visible: true,\n showlegend: true,\n legendrank: legendCounter\n }, [lineIdx]);\n\n Plotly.restyle(\"lapChart\", {\n visible: true\n }, [markerIdx]);\n\n Plotly.restyle(\"gapChart\", {\n visible: true,\n showlegend: true,\n legendrank: legendCounter\n }, [idx]);\n });\n };\n\n document.getElementById(\"clearAll\").onclick = () => {\n legendCounter = 0;\n document.querySelectorAll(\".driver-toggle.active\").forEach(btn => {\n const idx = DRIVERS.indexOf(btn.textContent);\n btn.classList.remove(\"active\");\n hideDriver(idx);\n });\n };\n\n}).catch(e => {\n console.error(e);\n alert(\"TSV \u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\");\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-medium-font-size\"><strong>\u6ce8\u610f\u70b9\uff1a<\/strong><\/p>\n\n\n\n<p>\u30e9\u30c3\u30d7\u30bf\u30a4\u30e0\u30b0\u30e9\u30d5\u306b\u304a\u3044\u3066\u3001\u30c0\u30fc\u30c6\u30a3\u30a8\u30a2\u306e\u30e9\u30c3\u30d7\uff08\u524d\u65b92\u79d2\u4ee5\u5185\u306b\u4ed6\u8eca\u304c\u3044\u308b\uff09\u306f\u5404\u30c7\u30fc\u30bf\u70b9\u3092\u767d\u629c\u304d\u3001\u30af\u30ea\u30a2\u30a8\u30a2\u306e\u30e9\u30c3\u30d7\u306f\u5857\u308a\u3064\u3076\u3057\u305f\u3002<\/p>\n\n\n\n<p><a href=\"https:\/\/press.pirelli.com\/norris-chooses-a-different-tyre-strategy-to-seal-his-first-title\/\" target=\"_blank\" rel=\"noopener\" title=\"\">\u5404\u30c9\u30e9\u30a4\u30d0\u30fc\u306e\u4f7f\u7528\u30bf\u30a4\u30e4\u306f\u30d4\u30ec\u30ea\u516c\u5f0f\u3088\u308a<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Race Lap Time Interactive Graph Lap Times Drivers: Select All Clear All Gap to Leader \u6ce8\u610f\u70b9\uff1a \u30e9\u30c3\u30d7\u30bf\u30a4\u30e0\u30b0\u30e9\u30d5\u306b\u304a\u3044\u3066\u3001\u30c0\u30fc\u30c6\u30a3\u30a8 […]<\/p>\n","protected":false},"author":1,"featured_media":16623,"parent":16624,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16613","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages\/16613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16613"}],"version-history":[{"count":5,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages\/16613\/revisions"}],"predecessor-version":[{"id":16630,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages\/16613\/revisions\/16630"}],"up":[{"embeddable":true,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/pages\/16624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=\/wp\/v2\/media\/16623"}],"wp:attachment":[{"href":"https:\/\/f1-lap-time.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}