31:T606,graphic = (year) => { const svgWidth = Math.min(640, width); const div = d3.select(DOM.element('div')); const yAxis = d3.scaleLinear() .domain([range,-1 * range]) .range([0,barHeight]); const driverContainer = div .selectAll('div.driver') .data(jsonData) .enter() .append('div') .attr('class', `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[year].ave) : ''; }); driverContainer.selectAll('.lap') .data(d => d[year].laps) .enter() .append('span') .attr('class', 'lap') .append('span') .attr('style', d => { const slowOffset = yAxis(d.diff); const slowHeight = (barHeight / 2) - yAxis(d.diff); const fastOffset = barHeight / 2; const h = d.pitLap ? barHeight : (d.diff > 0 ? slowHeight : slowOffset - (barHeight / 2)); const t = d.pitLap ? 0 : (d.diff > 0 ? slowOffset : fastOffset); return `height:${h}px; position: relative; top: ${t}px`; }) .attr('class', d => { let lapClass = ''; if(d.pitLap) { lapClass = 'pit' } else if(d.aboveAverage) { lapClass = 'aa' } else if(d.belowAverage) { lapClass = 'ba' } if(d.isFastest) { lapClass = 'pb'; } return lapClass; }); return div.node(); }32:T6f2,jsonData = driverData.map(d => { const driverLaps = data.data.filter(e => e.Driver === d); let laps2018 = driverLaps.filter(e => e.Year === 2018).map(f => ({ isPit: f.Pit !== "", time: +f.Time.split(":")[0] * 60 + +f.Time.split(":")[1] })); let laps2019 = driverLaps.filter(e => e.Year === 2019).map(f => ({ isPit: f.Pit !== "", time: +f.Time.split(":")[0] * 60 + +f.Time.split(":")[1] })); const raceLaps2018 = laps2018.filter(a => a.time !== 0 && a.time < circuitCutoff); const fastestLap2018 = raceLaps2018.sort((a, b) => a.time - b.time)[0].time; const aveLap2018 = +(raceLaps2018.map(d => d.time).reduce((a, b) => a + b) / raceLaps2018.length).toFixed(3) laps2018 = laps2018.map(d => ({ time: d.time, isFastest: d.time === fastestLap2018, belowAverage: d.time < aveLap2018, aboveAverage: d.time > aveLap2018, diff: (d.time - aveLap2018), pitLap: d.time > circuitCutoff || d.time === 0 || d.isPit })); const raceLaps2019 = laps2019.filter(a => a.time !== 0 && a.time < circuitCutoff); const fastestLap2019 = raceLaps2019.sort((a, b) => a.time - b.time)[0].time; const aveLap2019 = +(raceLaps2019.map(d => d.time).reduce((a, b) => a + b) / raceLaps2019.length).toFixed(3) laps2019 = laps2019.map(d => ({ time: d.time, isFastest: d.time === fastestLap2019, belowAverage: d.time < aveLap2019, aboveAverage: d.time > aveLap2019, diff: (d.time - aveLap2019), pitLap: d.time > circuitCutoff || d.time === 0 || d.isPit })); return { id: d, driver: d, y2018: { laps: laps2018, fl: fastestLap2018, ave: aveLap2018 }, y2019: { laps: laps2019, fl: fastestLap2019, ave: aveLap2019 }, } });33:[] 2f:{"title":"Formula E Gen 1 vs Gen 2 lap times","cells":[{"id":0,"value":"md`# Formula E Gen 1 vs Gen 2 lap times`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`## ${visualType === 'self' ? \n `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)}.\n\nCompared at Mexico City E-Prix in [2018](https://www.youtube.com/watch?v=7sMmY_fVBpw) and [2019](https://www.youtube.com/watch?v=9NoeleP_UB4).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"html`\nLaptime is faster than driver average; slower than average or excluded from calculation (pit lap, opening lap or race stoppage).
Driver's fastest lap of the race.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"md`## 2018 Race Laps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"graphic('y2018')","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"md`## 2019 Race Laps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"graphic('y2019')","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"md`\nSource: [Formula E](http://results.fiaformulae.com/)\n## Notes:\nThere was a race stoppage in 2019, accounting for the excluded laps after the race start. In 2018, drivers had to pit in the middle to change cars, as the range of the first generation car did not reach the full race distance.\n\nThe race shape appears to be different between the two cars, although how much of that could be attributed to the race stoppage in 2019 is unclear. The old gen car allowed drivers to push towards the end of the race, whereas the 2019 race had a curve where the drivers pushed at the start and end of the stint, but slowed up in the middle and over the last couple of laps, when the power would be at it's lowest.\n\nGenerally, Di Grassi's pace seems to vary more over the course of a stint, whereas Abt stays closer to his average lap time.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"barHeight = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"driverData = ['Di Grassi', 'Abt']","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/fe-mexico.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 = 68;","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) + \":0\" + (split[0] % 60) + (split[1] ? \".\" + split[1] : '')\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"visualType = 'self'","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"range = 2","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}