31:T9bf,chart = { const container = d3.select(DOM.element('div')) container.attr("style", "overflow: auto;") const rowSize = width > 800 ? 3 : 2; const viewBox = width > 800 ? "0 0 800 750" : "0 0 500 1175"; const svg = container.append('svg') .style("width", "100%") .attr("viewBox", viewBox) .attr('class', 'chart'); svg.selectAll(".text") .data(years) .enter() .append("text") .attr("x", function(d) { return 30 + ((d - 2005) % rowSize) * 260 }) .attr("y", function(d) { return 20 + (Math.floor((d - 2005) / rowSize) * 150)}) .text(d => d) const y = d3.scaleLinear() .domain([2005, 2019]) .range([0, 1400]); const x = d3.scaleLinear() .domain([1, 22]) .range([0, 250]); const teamY = width > 800 ? [2005, 2008, 2011, 2014, 2017]: [2005, 2007, 2009, 2011, 2013, 2015, 2017, 2019]; svg.selectAll(".team") .data(teamY) .enter() .append("g") .attr("transform", d => `translate(0, ${(Math.floor((d - 2005) / rowSize) * 150)})`) .selectAll("text") .data(["RBR", "STR", "Test"]) .enter() .append("text") .text(d => d) .attr("y", (d, i) => 42 + i * 30) .attr("style", "font-size: 0.5em;") svg.selectAll(".guide") .data(years) .enter() .append("g") .attr("class", "guide") .attr("transform", d => `translate(${((d - 2005) % rowSize) * 300}, ${(Math.floor((d - 2005) / rowSize) * 150)})`) .selectAll("rect") .data(["#001830", "#7D8995", "#EDF0F1"]) .enter() .append("rect") .attr("fill", d => d) .attr("fill-opacity", 0.5) .attr("width", 300) .attr("height", 5) .attr("x", 0) .attr("y", (d, i) => 28 + i * 30) const nodes = svg.selectAll(".node") .data(data.nodes) .enter() .append("circle") .attr("class", "node") .attr("cx", function(d) { return 30 + x(d.Round) + ((d.Year - 2005) % rowSize) * 260 }) .attr("cy", function(d) { return 40 + (Math.floor((d.Year - 2005) / rowSize) * 150) + (teams.indexOf(d.Team) * 30) + ((d.CarNo - 1) * 12) }) .attr("r", d => activeDrivers.indexOf(d.Driver) > -1 ? 5 : 4) .attr("fill-opacity", d => drivers.indexOf(d.Driver) > 10 ? 0.65 : 1) .attr("fill", d => driverColor[drivers.indexOf(d.Driver)]) .append('title') .text(d => d.Driver + ' ' + d.Team + ' ' + d.Year) return container.node(); }32:Ta97,rawData = d3.csvParse(`Year,Team,Driver,Rounds,CarNo 2019,RBR,Pierre Gasly,1-12,1 2019,RBR,Alexander Albon,13-21,1 2019,RBR,Max Verstappen,1-21,2 2019,STR,Alexander Albon,1-12,1 2019,STR,Pierre Gasly,13-21,1 2019,STR,Daniil Kvyat,1-21,2 2018,RBR,Daniel Ricciardo,1-21,1 2018,RBR,Max Verstappen,1-21,2 2018,STR,Pierre Gasly,1-21,1 2018,STR,Brendon Hartley,1-21,2 2017,RBR,Daniel Ricciardo,1-20,1 2017,RBR,Max Verstappen,1-20,2 2017,STR,Daniil Kvyat,1-14,1 2017,STR,Pierre Gasly,15-16,1 2017,STR,Brendon Hartley,17-20,1 2017,STR,Carlos Sainz Jr.,1-16,2 2017,STR,Daniil Kvyat,17,2 2017,STR,Pierre Gasly,18-20,2 2016,STR,Max Verstappen,1-4,1 2016,STR,Daniil Kvyat,5-21,1 2016,STR,Carlos Sainz Jr.,1-21,2 2016,RBR,Daniel Ricciardo,1-21,1 2016,RBR,Daniil Kvyat,1-4,2 2016,RBR,Max Verstappen,5-21,2 2015,STR,Max Verstappen,1-19,1 2015,STR,Carlos Sainz Jr.,1-19,2 2015,RBR,Daniel Ricciardo,1-19,1 2015,RBR,Daniil Kvyat,1-19,2 2014,STR,Jean-Éric Vergne,1-19,1 2014,STR,Daniil Kvyat,1-19,2 2014,STR-TD,Max Verstappen,15,1 2014,STR-TD,Max Verstappen,17-18,1 2014,RBR,Sebastian Vettel,1-19,1 2014,RBR,Daniel Ricciardo,1-19,2 2013,RBR,Sebastian Vettel,1-19,1 2013,RBR,Mark Webber,1-19,2 2013,STR,Jean-Éric Vergne,1-19,1 2013,STR,Daniel Ricciardo,1-19,2 2013,STR-TD,Daniil Kvyat,18-19,1 2012,RBR,Sebastian Vettel,1-20,1 2012,RBR,Mark Webber,1-20,2 2012,STR,Jean-Éric Vergne,1-20,1 2012,STR,Daniel Ricciardo,1-20,2 2011,RBR,Sebastian Vettel,1-19,1 2011,RBR,Mark Webber,1-19,2 2011,STR,Sébastien Buemi,1-19,1 2011,STR,Jaime Alguersuari,1-19,2 2011,STR-TD,Daniel Ricciardo,1-8,1 2011,STR-TD,Jean-Éric Vergne,16,1 2011,STR-TD,Jean-Éric Vergne,18-19,1 2010,RBR,Sebastian Vettel,1-19,1 2010,RBR,Mark Webber,1-19,2 2010,STR,Sébastien Buemi,1-19,1 2010,STR,Jaime Alguersuari,1-19,2 2009,RBR,Sebastian Vettel,1-17,1 2009,RBR,Mark Webber,1-17,2 2009,STR,Sébastien Bourdais,1-9,1 2009,STR,Jaime Alguersuari,10-17,1 2009,STR,Sébastien Buemi,1-17,2 2008,RBR,David Coulthard,1-18,1 2008,RBR,Mark Webber,1-18,2 2008,STR,Sébastien Bourdais,1-18,1 2008,STR,Sebastian Vettel,1-18,2 2007,RBR,David Coulthard,1-17,1 2007,RBR,Mark Webber,1-17,2 2007,STR,Vitantonio Liuzzi,1-17,1 2007,STR,Scott Speed,1-10,2 2007,STR,Sebastian Vettel,11-17,2 2006,RBR,David Coulthard,1-18,1 2006,RBR,Christian Klien,1-15,2 2006,RBR,Robert Doornbos,16-18,2 2006,RBR-TD,Robert Doornbos,1-15,1 2006,RBR-TD,Michael Ammermüller,16-18,1 2006,STR,Vitantonio Liuzzi,1-18,1 2006,STR,Scott Speed,1-18,2 2006,STR-TD,Neel Jani,1-18,1 2005,RBR,David Coulthard,1-19,1 2005,RBR,Christian Klien,1-3,2 2005,RBR,Vitantonio Liuzzi,4-7,2 2005,RBR,Christian Klien,8-19,2 2005,RBR-TD,Scott Speed,8-9,1 2005,RBR-TD,Christian Klien,4-7,1 2005,RBR-TD,Vitantonio Liuzzi,10-19,1`)33:T67f, data = ({ nodes: formattedData, links: drivers.reduce((arr, driver) => { for (let i = 0; i < years.length - 1; i++) { const source = lineData.filter(d => d.Year === +years[i] && d.Driver === driver) const target = lineData.filter(d => d.Year === +years[i + 1] && d.Driver === driver)[0] // // const target = formattedData.map(d => d.Year + d.Round + d.Driver).indexOf(years[i + 1] + driver); const sourceLength = source.length; if(sourceLength > 0) { for(let j = 0; j < source.length - 1; j++) { const sourceIdx = dataMap.filter(d => d[0] === source[j].Year + source[j].Driver + source[j].Round)[0][1] const targetIdx = dataMap.filter(d => d[0] === source[j + 1].Year + source[j + 1].Driver + source[j + 1].Round)[0][1] if(targetIdx > -1 && sourceIdx > -1) { arr.push({ source: sourceIdx, target: targetIdx, }); } } if(target) { const sourceIdx = dataMap.filter(d => d[0] === source[sourceLength - 1].Year + source[sourceLength - 1].Driver + source[sourceLength - 1].Round)[0][1] const targetIdx = dataMap.filter(d => d[0] === target.Year + target.Driver + target.Round)[0][1] if(targetIdx > -1 && sourceIdx > -1) { arr.push({ source: sourceIdx, target: targetIdx, }); } } } } return arr; }, []) }) 34:T5ed,allFormattedData = { const dataMap = rawData.map(d => ({ ...d, x: 20 + (teams.indexOf(d.Team) * 80) + (+d.CarNo * 20), y: 20 + Math.abs(d.Year - 2005 - 14) * 40, })) const y = d3.scaleLinear() .domain([2005, 2019]) .range([0, 1000]); const x = d3.scaleOrdinal() .domain(teams) .range([0, 300]); const outputArray = []; const lineArray = []; function calcY(d) { return 10 + y(+d.Year) + (teams.indexOf(d.Team) * 10) + (+d.CarNo - 1) * 10; } for(let i = 0; i < dataMap.length; i++) { const d = dataMap[i]; const rounds = d.Rounds.split("-"); const roundStart = rounds[0]; const roundEnd = rounds[1] ? rounds[1] : rounds[0]; lineArray.push({ Year: +d.Year, Driver: d.Driver, Team: d.Team, Round: +roundStart, CarNo: +d.CarNo, x: (+roundStart * 10), y: calcY(d), idx: outputArray.length }); for(let j = +roundStart; j <= +roundEnd; j++) { outputArray.push({ Year: +d.Year, Driver: d.Driver, Team: d.Team, Round: j, CarNo: +d.CarNo, x: (j * 10), y: calcY(d), }); } if(rounds[1]) { lineArray.push({ Year: +d.Year, Driver: d.Driver, Team: d.Team, Round: +roundEnd, CarNo: +d.CarNo, x: (+roundEnd * 10), y: calcY(d), idx: outputArray.length - 1 }); } } return [outputArray, lineArray] }35:[] 2f:{"title":"Red Bull Racing Driver Changes","cells":[{"id":0,"value":"md`# Red Bull Racing Driver Changes\nMapping Red Bull driver line ups between 2005-2019. The graphic shows every round of each year, showing driver swaps that happened mid-season, and also shows test drivers (or when they did Friday Practice sessions). This shows:\n* swapping Luizzi and Klein in 2005\n* tryouts of Riccardo and Vergne in 2011 before graduating to STR in 2012\n* Kvyat and Verstappen testing in 2013 and 2014 before joining the main line up the following year.\n* Kvyat's rocky ride through STR, RBR, no driver and back to STR.\n* Gasly's mid-season demotion in 2019 from RBR, swapping with Albon.\n\nApart from 2005, each year shows Red Bull at the top two dots; STR (their junior team) 3/4 and then any test drivers below that.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"md`Drivers (**current team**):\n\n${drivers.map((d, i) => ` -1 ? \"font-weight:bold;\" : \"\"}\"> 10 ? 0.5 : 1}; border: 1px solid black; display:inline-block; height: 10px; width: 20px;\"> - ${d}`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"activeDrivers = [\"Pierre Gasly\", \"Max Verstappen\", \"Daniil Kvyat\", \"Alexander Albon\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"dataMap = lineData.map(d => [d.Year + d.Driver + d.Round, d.idx]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"lineData = allFormattedData[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"formattedData = allFormattedData[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"teams = [\"RBR\", \"STR\", \"RBR-TD\", \"STR-TD\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"colors = d3.schemeCategory10 //(d3.schemeBlues[9]).concat(d3.schemePurples[9]) //","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"driverColor = drivers.map((d, i) => colors[i % 10])","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"drivers = [\"Pierre Gasly\",\"Alexander Albon\",\"Max Verstappen\",\"Daniil Kvyat\",\"Daniel Ricciardo\",\"Brendon Hartley\",\"Carlos Sainz Jr.\",\"Jean-Éric Vergne\",\"Sebastian Vettel\",\"Mark Webber\",\"Sébastien Buemi\",\"Jaime Alguersuari\",\"Sébastien Bourdais\",\"David Coulthard\",\"Vitantonio Liuzzi\",\"Scott Speed\",\"Robert Doornbos\",\"Christian Klien\",\"Michael Ammermüller\",\"Neel Jani\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"years = Array.from(new Set(rawData.map(d => d.Year))).reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}