31:Tafe,graphic = { const svgWidth = Math.min(640, width); const div = d3.select(DOM.element('div')) if (visualType === 'race') { const nonZeroLaps = allLapData.laps.filter(a => a.time > 0 && a.time < circuitCutoff); allLapData.aveLap = +(nonZeroLaps.map(a => a.time).reduce((a, b) => a + b) / nonZeroLaps.length).toFixed(3) let byLap = []; const fastestLapSoFar = allLapData.laps.map(a => { byLap[a.lapNo - 1] = byLap[a.lapNo - 1] || []; byLap[a.lapNo - 1].push(a) }); byLap = byLap.map((a, i) => { return { lapFastest : a.map(a => a.time).sort((a, b) => a - b)[0] } }); const currentFastestLap = [byLap[0].lapFastest]; byLap = byLap.map((a, i) => { if(i > 0 && currentFastestLap[currentFastestLap.length - 1] > a.lapFastest) { currentFastestLap.push(a.lapFastest); } return { lapFastest: a.lapFastest, isFastestSoFar: currentFastestLap[currentFastestLap.length - 1] === a.lapFastest, } }); allLapData.laps = allLapData.laps.map(a => { return { ...a, belowAverage: a.time < allLapData.aveLap, aboveAverage: a.time > allLapData.aveLap, isFastestSoFar: (a.time === byLap[a.lapNo - 1].lapFastest && byLap[a.lapNo - 1].isFastestSoFar), } }); } const driverContainer = div .selectAll('div.driver') .data(jsonData) .enter() .append('div') .attr('class', d => `driver`) driverContainer.append('span') .attr('class', 'label') .text(d => { return d.driver; }); driverContainer.append('span') .attr('class', 'ave') .text(d => { return (visualType === 'self') ? calculateLaptime(d.aveLap) : ''; }); driverContainer.selectAll('.lap') .data(d => (visualType === 'race') ? allLapData.laps.filter(a => a.driver === d.driver) : d.laps) .enter() .append('span') .attr('class', d => { let lapClass = ''; if (visualType === 'race') { if(d.aboveAverage) { lapClass = 'saa' } else if(d.belowAverage) { lapClass = 'sba' } if(d.pb) { lapClass = 'pb'; } if(d.isFastestSoFar) { lapClass = 'fsf' } if(d.pitLap) { lapClass = 'pit' } return 'lap ' + lapClass; } else { if(d.pitLap) { lapClass = 'pit' } else if(d.aboveAverage) { lapClass = 'aa' } else if(d.belowAverage) { lapClass = 'ba' } if(d.isFastest) { lapClass = 'pb'; } return 'lap ' + lapClass; } }); // spark line chart deviation average // driverContainer return div.node(); }32:[] 2f:{"title":"Azerbaijan Grand Prix Graphics","cells":[{"id":0,"value":"md`# Azerbaijan Grand Prix Graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`## ${visualType === 'self' ? \n `Graphic One: driver's laps measured against their average lap time`: `Graphic Two: driver's laps measured against the race average lap time`}\nCalculated by averaging laps quicker than ${calculateLaptime(circuitCutoff)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"html`${visualType === 'self' ? `\nLaptime is faster than driver average; slower than average or excluded from calculation (pit lap, opening lap or virtual safety car).
Drivers personal fastest lap of the race.` : \n`Laptime is faster than session average; slower than average or excluded from calculation (pit lap, opening lap or virtual safety car).\n
Drivers personal fastest lap of the race. Overall fastest lap at that point in the race.`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"viewof visualType = radio({\n title: 'Compare driver lap to:',\n options: [\n { label: 'Own average', value: 'self' },\n { label: `Race average (${calculateLaptime(sessionAverageLap)})`, value: 'race' },\n ],\n value: 'self'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`\nSource: [FIA](https://www.fia.com/events/fia-formula-one-world-championship/season-2019/eventtiming-information-8)\n\n### Notes:\nLap 40 - Virtual Safety Car\n\nLeclerc's contra-strategy waiting out a safety car (ending up with a VSC a few laps later) and then the run for the fastest lap with another pit stop in the last few laps.\n\nGiovinazzi posting his personal best (1:45.969) on lap 45, then posting the exact same time on lap 46.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"sessionFilteredLaps = allLapData.laps.filter(a => a.time > 0 && a.time < circuitCutoff)","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"sessionAverageLap = +(sessionFilteredLaps.map(a => a.time).reduce((a, b) => a + b) / sessionFilteredLaps.length).toFixed(3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"allLapData = ({\n fastestLap: 0,\n laps: jsonData.reduce((acc, curr) => {\n return acc.concat(curr.laps.map((b, i) => ({\n lapNo: i + 1,\n time: b.time,\n pitLap: b.pitLap,\n pb: b.isFastest,\n driver: curr.driver,\n })))}, []),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"jsonData = driverData.map(d => {\n const driverLaps = data.data.filter(e => e.NO === d[0]);\n let laps = driverLaps.map(f => ({\n isPit: f.PIT !== \"\",\n time: +f.TIME.split(\":\")[0] * 60 + +f.TIME.split(\":\")[1]\n }));\n \n const raceLaps = laps.filter(a => a.time !== 0 && a.time < circuitCutoff);\n const fastestLap = raceLaps.sort((a, b) => a.time - b.time)[0].time;\n const aveLap = +(raceLaps.map(d => d.time).reduce((a, b) => a + b) / raceLaps.length).toFixed(3)\n laps = laps.map(d => ({\n time: d.time,\n isFastest: d.time === fastestLap,\n belowAverage: d.time < aveLap,\n aboveAverage: d.time > aveLap,\n pitLap: d.time > circuitCutoff || d.time === 0 || d.isPit\n }));\n return {\n id: d[0],\n driver: d[1],\n laps,\n fastestLap,\n aveLap,\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"driverData = [\n['77','Valtteri BOTTAS'],\n['44','Lewis HAMILTON'],\n['5','Sebastian VETTEL'],\n['33','Max VERSTAPPEN'],\n['16','Charles LECLERC'],\n['11','Sergio PEREZ'],\n['55','Carlos SAINZ'],\n['4','Lando NORRIS'],\n['18','Lance STROLL'],\n['7','Kimi RAIKKONEN'],\n['23','Alexander ALBON'],\n['99','Antonio GIOVINAZZI'],\n['20','Kevin MAGNUSSEN'],\n['27','Nico HULKENBERG'],\n['63','George RUSSELL'],\n['88','Robert KUBICA'],\n['10','Pierre GASLY'],\n['8','Romain GROSJEAN'],\n['26','Daniil KVYAT'],\n['3','Daniel RICCIARDO']\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = d3.json(\n \"https://raw.githubusercontent.com/joshrayman/joshrayman.github.io/master/vis/laps.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"circuitCutoff = 114;","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"calculateLaptime = (s) => {\n console.log(s)\n const split = s.toString().split('.');\n return Math.floor(split[0] / 60) + \":\" + (split[0] % 60) + (split[1] ? \".\" + split[1] : '')\n};","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}