30:T26ff,chartStandingsDrivers = { const height = 730 const margin = ({ top: 110, right: 125, bottom: 80, left: 75 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-driver-standings"; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); // let viewPoints = in; let displayNum = driverOptions.displayNum; const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let y = d3.scaleLinear() .domain([1,standings.driver_max]) .range([0, innerHeight]); let x = d3.scaleLinear() .domain([1,standings.gp_max]) .range([25, innerWidth-25]); let yAxis = d3.axisLeft(y).ticks(standings.driver_max); let xAxis = d3.axisTop(x).tickFormat(d3.format("d")); // group.append("g") // .attr("class", "x axis") // .attr("transform", "translate("+ 0 + "," + (-20) + ")") // .call(xAxis) // .call(g => g.selectAll(".domain").remove()); group.append("g") .attr("class", "y axis") .call(yAxis) .call(g => g.selectAll(".domain").remove()); // Title // group.append("text") // .text('Races') // .attr("text-anchor", "middle") // .attr("class", "x-axis-label") // .attr("y", -29) // .attr("x", innerWidth + 25) // .style('fill', '#999') // .style('font-size', '14px') // .style('font-family','sans-serif' ); group.append("text") .text('Driver Standings') .attr("text-anchor", "middle") .attr("class", "y-axis-label") .attr("transform", "translate(" + (0 - margin.left * 0.65) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#999') .style('font-size', '14px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // Custom X Axis Labels - GP Names group.append("text") .text('Races') .attr("text-anchor", "start") .attr("class", "x-axis-label") .attr("y", -80) .attr("x", 15) //.attr("x", innerWidth + 25) .style('fill', '#999') .style('font-size', '14px') .style('font-family','sans-serif' ); let gpnames = group.append("g") .attr("class", "gp-names") let gpname = gpnames.selectAll("g") .data(standings.mapGp) .join("g") .attr("transform", function(d) { return `translate(${x(d[1][0].gp_no)},${-20})`; }) .append("text") .attr("class", "gp-name") .text( (d) => { return d[1][0].gp }) .attr("transform", "rotate(-45)") .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // Source Text group.append("text") .attr("class", "graph-source") .text("Data: Formula1.com Standings & Motorsport.com Results / Design: @benoldenburg") .attr("text-anchor", "left") .attr("x", 0) .attr("y", innerHeight + margin.bottom - 18) .style('fill', '#999') .style('font-size', '.60em') .style('font-family', 'sans-serif'); // Custom Place Grid // The 11th and 12th places that don't run the full width are trimmed progammatically // Should be converted to an automated data subset. var gridlines = group.append("g") .attr("class", "gridlines") let gridpositions = [] for(var i = 1; i <= standings.driver_max; i++){ gridpositions.push(i); } let grid = gridlines.selectAll("line") .data(gridpositions) .join("line") .attr("class", "line-grid") .attr("style", "fill:none !important") .attr("stroke-width", 24) .attr("stroke", "#EFEFEF") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-opacity", 1.0) .attr('x1', x(1)) .attr('x2', x(standings.gp_max)) .attr('y1', d => y(d)) .attr('y2', d => y(d)) // Lines var lines = group.append("g") .attr("class", "driver-lines") var line = d3.line() .defined(d => d !== null ) .x(function(d, i) { return x(i+1); }) .y(function(d) { return y(d); }) .curve(curveDiagonal(0.25)); let team = lines.selectAll("g") .data(standings.dataDrivers) .join("g") .attr("class", (d) => "driver-line " + d.driver_no) team.append("path") .attr("class", "background") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 8) .attr("stroke", "#FFFFFF") .attr("stroke-opacity", 0.8) .attr('d', (d) => line(d.rank)) team.append("path") .attr("class", "primary") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 4) .attr("stroke", (d) => teamColors[d.teamClass]) .attr("stroke-opacity", 0.8) .attr('d', (d) => line(d.rank)) // Race Result Nodes var nodes = group.append("g") .attr("class", "driver-races") var node = nodes.selectAll("node") .data(standings.data) .join("g") .attr("transform", function(d) { return "translate(" + x(d.gp_no) + "," + y(d.rank) + ")"; }) .attr("class", function(d) { return 'driver-race ' + d.driver_no}) .on('mousemove', (event, d) => { chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipTmpDriver(d)); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip }); node.append("circle") .attr("r", 10) .attr('fill', (d) => { if (d.pos === "DNS" || d.pos === "DNF") { return '#888'; } else if (d.pos <= 10) { return '#444'; } else { return '#888'; } })// (d) => teamColors[d.teamClass] //.attr("r", function(d) { return size(d['goals_for']) }) .attr('opacity', '1.0') .on('mousemove', (event, d) => { d3.select(event.target) .attr('stroke', '#000') .attr('stroke-width', 3); }) .on('mouseout', (event) => { d3.select(event.target) .attr('stroke', 'none') .attr('stroke-width', 0); }); node.append("text") .attr("class", 'label') .attr('x', function(d) { return 0 }) .attr('dy', '.35em') //.attr('alignment-baseline', 'middle') .attr("text-anchor", "middle") .attr('pointer-events', 'none') .text(d => { if (displayNum === "pti") { if (d.points > 0) { return d.points; } else { return (d.pos === "NC") ? d.dn : 0; } } else if(displayNum === "ptc") { return d.points_c; } else { return (d.pos === "NC") ? d.dn : d.pos; } }) .attr('fill', "#FFF") .style('font-family', 'Oswald, sans-serif') .style('font-weight', 'bold') .style('font-size', d => { return (displayNum !== "ptc" && d.pos === "NC") ? "8px" : "10px"; }) // Line Labels var labels = group.append("g") .attr("class", "line-labels") var label = labels.selectAll("text") .data(standings.dataDrivers) .join("text") .attr("class", "line-label") .text( (d) => { return d.driver }) .attr('x', (d) => { return x(standings.gp_max) + 20 }) .attr('y', (d) => { return y(d.rank[standings.gp_max-1]) }) .attr('dy', '.35em') .style('fill', (d) => { return teamColors[d.teamClass] }) .style('font-size', '14px') .style('font-weight', 'bold') .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + chartid + " .driver-line") .transition().style('opacity', g => { return g.driver_no === d.driver_no ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .driver-label") .transition().style('opacity', g => { return g.driver_no === d.driver_no ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .driver-race") .transition().style('opacity', g => { return g.driver_no === d.driver_no ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + chartid + " .driver-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .driver-label") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .driver-race") .transition().style('opacity', 1 ); }); // Legend let legend = group.append("g") .attr("class", "legend") .attr("transform", "translate("+ 0 + "," + (innerHeight+34) + ")") var legendElement = legend.selectAll("engine") .data([{type: 'pts', label: 'Top 10 Finish'},{type: 'non', label: 'No Points / DNF'}]) .enter().append("g") .attr("class", (d) => { return 'type-' + d.type }) .attr("transform", function(d, i) { return "translate(" + (x(1)+(i*120)) + "," + 0 + ")"; }) legendElement.append("circle") .attr("r", 7) .attr('fill', d => (d.type === "pts") ? '#444' : '#888') .attr('opacity', '1.0'); legendElement.append("text") .attr("class", function(d) { return 'label' }) .attr('x', 12) .attr('dy', '.35em') .attr("text-anchor", "start") .text(function(d) { return d.label }) .attr('fill', function(d) { // return d[1].c return '#555'; }) //.style('font-weight', 'bold') .style('font-size', '12px') //.style('font-family', 'sans-serif'); return svg.node(); }31:T52f,md`#### Notes + When two drivers have the same number of points, a system known as "countback" is employed where the driver with the most finishes in the highest position is ranked ahead. ([source](https://bleacherreport.com/articles/2599103-ranking-the-formula-1-drivers-on-how-many-points-they-beat-their-team-mates-by#:~:text=When%20two%20drivers%20have%20the,highest%20position%20is%20ranked%20ahead)). That consideration is automated here but may not be fully representative of the FIA's final rankings in every situation where two teams shared the same amount of points. + Nico Hulkenberg was a substitute driver when Sergio Perez tested positive for Covid-19 at the British GP (but did not start due to car issues) and at the 70th Anniversary GP. He was also a substitute for Lance Stroll at the Eifel GP due to illness. + A number of driver changes took place at the Sakhir GP with Lewis Hamilton unable to race due to testing positive for Covid-19 and Romain Grosjean out due to injuries sustained at the previous race. Williams driver George Russel (and member of the Mercedes junior driver program) was called on the fill Lewis's seat at Mercedes. Williams reserve driver Jack Aitken and Hass test driver Pietro Fittipaldi filled the remaining open seats both making their Formula 1 debuts.

`32:T210b,chartStandingsTeams = { const height = 420 const margin = ({ top: 110, right: 125, bottom: 70, left: 75 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-team-standings"; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let y = d3.scaleLinear() .domain([1,standings.teams.length]) .range([0, innerHeight]); let x = d3.scaleLinear() .domain([1,standings.gp_max]) .range([25, innerWidth-25]); let yAxis = d3.axisLeft(y).ticks(standings.teams.length); let xAxis = d3.axisTop(x).tickFormat(d3.format("d")); // group.append("g") // .attr("class", "x axis") // .attr("transform", "translate("+ 0 + "," + (-20) + ")") // .call(xAxis) // .call(g => g.selectAll(".domain").remove()); group.append("g") .attr("class", "y axis") .call(yAxis) .call(g => g.selectAll(".domain").remove()); // Title // group.append("text") // .text('Races') // .attr("text-anchor", "middle") // .attr("class", "x-axis-label") // .attr("y", -29) // .attr("x", innerWidth + 25) // .style('fill', '#999') // .style('font-size', '14px') // .style('font-family','sans-serif' ); group.append("text") .text('Team Standings') .attr("text-anchor", "middle") .attr("class", "y-axis-label") .attr("transform", "translate(" + (0 - margin.left * 0.65) + "," + (innerHeight/2) + ") rotate(-90)") .style('fill', '#999') .style('font-size', '14px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // Source Text group.append("text") .attr("class", "graph-source") .text("Data: Formula1.com Standings & Motorsport.com Results / Design: @benoldenburg") .attr("text-anchor", "left") .attr("x", 0) .attr("y", innerHeight + margin.bottom - 18) .style('fill', '#999') .style('font-size', '.60em') .style('font-family', 'sans-serif'); // Custom X Axis Labels - GP Names group.append("text") .text('Races') .attr("text-anchor", "start") .attr("class", "x-axis-label") .attr("y", -80) .attr("x", 15) //.attr("x", innerWidth + 25) .style('fill', '#999') .style('font-size', '14px') .style('font-family','sans-serif' ); let gpnames = group.append("g") .attr("class", "gp-names") let gpname = gpnames.selectAll("g") .data(standings.mapGp) .join("g") .attr("transform", function(d) { return `translate(${x(d[1][0].gp_no)},${-20})`; }) .append("text") .attr("class", "gp-name") .text( (d) => { return d[1][0].gp }) .attr("transform", "rotate(-45)") .style('fill', '#999') .style('font-size', '12px') .style('font-weight', 'bold') .style('font-family','sans-serif' ); // Custom Place Grid // The 11th and 12th places that don't run the full width are trimmed progammatically // Should be converted to an automated data subset. var gridlines = group.append("g") .attr("class", "gridlines") let gridpositions = [] for(var i = 1; i <= standings.teams.length; i++){ gridpositions.push(i); } let grid = gridlines.selectAll("line") .data(gridpositions) .join("line") .attr("class", "line-grid") .attr("style", "fill:none !important") .attr("stroke-width", 24) .attr("stroke", "#EFEFEF") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-opacity", 1.0) .attr('x1', x(1)) .attr('x2', x(standings.gp_max)) .attr('y1', d => y(d)) .attr('y2', d => y(d)) // Lines var lines = group.append("g") .attr("class", "team-lines") var line = d3.line() .defined(d => d !== null ) .x(function(d, i) { return x(i+1); }) .y(function(d) { return y(d); }) .curve(curveDiagonal(0.25)); let team = lines.selectAll("g") .data(standings.dataTeams) .join("g") .attr("class", (d) => "team-line " + d.teamClass) team.append("path") .attr("class", "background") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 8) .attr("stroke", "#FFFFFF") .attr("stroke-opacity", 0.8) .attr('d', (d) => line(d.rank)) team.append("path") .attr("class", "primary") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 4) .attr("stroke", (d) => teamColors[d.teamClass]) .attr("stroke-opacity", 0.8) .attr('d', (d) => line(d.rank)) // Result Nodes var nodes = group.append("g") .attr("class", "team-results") var node = nodes.selectAll("node") .data(standings.dataTeamsCR) .join("g") .attr("transform", function(d) { return "translate(" + x(d.gp_no) + "," + y(d.rank) + ")"; }) .attr("class", function(d) { return 'team-result ' + d.teamClass}) .on('mousemove', (event, d) => { chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipTmpTeam(d)); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip }); node.append("circle") .attr("r", 10) .attr('fill', (d) => { if (d.points > 0) { return '#414042'; } else { return '#888'; } })// (d) => teamColors[d.teamClass] //.attr("r", function(d) { return size(d['goals_for']) }) .attr('opacity', '1.0') .on('mousemove', (event, d) => { d3.select(event.target) .attr('stroke', '#000') .attr('stroke-width', 3); }) .on('mouseout', (event) => { d3.select(event.target) .attr('stroke', 'none') .attr('stroke-width', 0); }); node.append("text") .attr("class", 'label') .attr('x', function(d) { return 0 }) .attr('dy', '.35em') //.attr('alignment-baseline', 'middle') .attr("text-anchor", "middle") .attr('pointer-events', 'none') .text(d => d.points_c) .attr('fill', "#FFF") .style('font-family', 'Oswald, sans-serif') .style('font-weight', 'bold') .style('font-size', d => { return (d.pos === "DNS" || d.pos === "DNF") ? "7px" : "10px"; }) // Line Labels var labels = group.append("g") .attr("class", "line-labels") var label = labels.selectAll("text") .data(standings.dataTeams) .join("text") .attr("class", "line-label") .text( (d) => { return d.team }) .attr('x', (d) => { return x(standings.gp_max) + 20 }) .attr('y', (d) => { return y(d.rank[standings.gp_max-1]) }) .attr('dy', '.35em') .style('fill', (d) => { return teamColors[d.teamClass] }) .style('font-size', '14px') .style('font-weight', 'bold') .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); d3.selectAll("#" + chartid + " .team-line") .transition().style('opacity', g => { return g.teamClass === d.teamClass ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .team-label") .transition().style('opacity', g => { return g.teamClass === d.teamClass ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .team-result") .transition().style('opacity', g => { return g.teamClass === d.teamClass ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); d3.selectAll("#" + chartid + " .team-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .team-label") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .team-result") .transition().style('opacity', 1 ); }); return svg.node(); }33:T1b37,sceduleChart = { const height = 800 const margin = ({ top: 50, right: 15, bottom: 50, left: 75 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-places"; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); let y = d3.scaleTime() .domain(schedule.domain) .range([0, innerHeight]) .nice(); let yAxis = d3.axisLeft(y).tickFormat(d3.timeFormat("%b")); group.append("g") .attr("class", "y axis") .call(yAxis) .call(g => g.selectAll(".domain").remove()); // Title group.append("text") .text(`Original (${schedule.original.length} Races)`) .attr("text-anchor", "start") .attr("class", "x-axis-label") .attr("y", y(schedule.original[0]['prev_date']) - 18) .attr("x", 19 ) .style('fill', '#999') .style('font-size', '14px') .style('font-family','sans-serif' ); // Title group.append("text") .text(`Modified (${schedule.modified.length} Races)`) .attr("text-anchor", "start") .attr("class", "x-axis-label") .attr("y", y(schedule.modified[0]['date']) - 18 ) .attr("x", innerWidth/2 + 9 ) .style('fill', '#999') .style('font-size', '14px') .style('font-family','sans-serif' ); // Lines var lines = group.append("g") .attr("class", "schedule-change") let change = lines.selectAll("g") .data(schedule.keep) .join("g") .attr("class", (d) => "team-line " + d.teamClass) change.append("path") .attr("class", "primary") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 2) .attr("stroke", (d) => "#CECECE") .attr("stroke-opacity", 1.0) //.attr('d', (d) => line(d)) .attr('d', (d) => { let path = d3.path(); let x0 = 10; let y0 = y(d.prev_date); let cpx1 = innerWidth*0.25; let cpy1 = y(d.prev_date); let cpx2 = innerWidth*0.25; let cpy2 = y(d.date); let x1 = innerWidth/2 let y1 = y(d.date); path.moveTo(x0, y0); path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x1, y1); return path; }) // Event Nodes var nodes = group.append("g") .attr("class", "events") var original = nodes.selectAll("original") .data(schedule.original) .join("g") .attr("transform", function(d) { return "translate(" + 10 + "," + y(d.prev_date) + ")"; }) //.attr("class", function(d) { return 'team-result ' + d.teamClass}) .on('mousemove', (event, d) => { chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipTmpSchedule(d)); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip }); original.append("circle") .attr("r", 6) .attr('fill', (d) => { if (d.round === null) { return '#f69679'; } else { return '#888'; } })// (d) => teamColors[d.teamClass] //.attr("r", function(d) { return size(d['goals_for']) }) .attr('opacity', '1.0'); original.append("text") .attr("class", 'label') .attr('x', function(d) { return 9 }) .attr('dy', '.35em') //.attr('alignment-baseline', 'middle') .attr("text-anchor", "start") .text(d => `${d.gp} (${d.circuit_abbr})`) .attr('fill', "#444") //.style('font-family', 'Oswald, sans-serif') .style('font-weight', 'bold') .style('font-size', d => 12) var modified = nodes.selectAll("modified") .data(schedule.modified) .join("g") .attr("transform", function(d) { return "translate(" + innerWidth/2 + "," + y(d.date) + ")"; }) //.attr("class", function(d) { return 'team-result ' + d.teamClass}) .on('mousemove', (event, d) => { chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (24+200) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .style("width", 200) .html(tipTmpSchedule(d)); }) .on('mouseout', (event) => { chartTip.style("display", "none"); // Hide toolTip }); modified.append("circle") .attr("r", 6) .attr('fill', (d) => { if (d.prev_round === null) { return '#7af48c'; } else { return '#888'; } })// (d) => teamColors[d.teamClass] //.attr("r", function(d) { return size(d['goals_for']) }) .attr('opacity', '1.0'); modified.append("text") .attr("class", 'label') .attr('x', function(d) { return 9 }) .attr('dy', '.35em') //.attr('alignment-baseline', 'middle') .attr("text-anchor", "start") .text(d => `${d.gp} (${d.circuit_abbr})`) .attr('fill', "#444") //.style('font-family', 'Oswald, sans-serif') .style('font-weight', 'bold') .style('font-size', d => 12) var legend = group.append("g") .attr("class", "legend") .attr("transform", function(d) { return "translate(" + innerWidth/2 + "," + 0 + ")"; }) var legend_item = legend.selectAll("modified") .data([ {option: 1, label: "Stay/Rescheduled" }, {option: 2, label: "Cancelled" }, {option: 3, label: "New Circuit/Second Race" } ]) .join("g") .attr("transform", function(d, i) { return "translate(" + 0 + "," + i*18 + ")"; }) legend_item.append("circle") .attr("r", 6) .attr('fill', (d) => { if (d.option === 3) { return '#7af48c'; } else if (d.option === 2) { return '#f69679'; } else { return '#888'; } })// (d) => teamColors[d.teamClass] //.attr("r", function(d) { return size(d['goals_for']) }) .attr('opacity', '1.0'); legend_item.append("text") .attr("class", 'label') .attr('x', function(d) { return 9 }) .attr('dy', '.35em') //.attr('alignment-baseline', 'middle') .attr("text-anchor", "start") .text(d => d.label) .attr('fill', "#444") //.style('font-family', 'Oswald, sans-serif') .style('font-size', d => 12) return svg.node(); }34:T2c1e,map = { const chartid = "schedule-map"; let ellipsePadding = 5; let showBuffer = false; let projection = d3.geoNaturalEarth1() let outline = ({type: "Sphere"}) let graticule = d3.geoGraticule10() //d3.geoPath(projection.fitWidth(width, outline)).bounds(outline); let path = d3.geoPath(projection) const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline); const mapHeight = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), mapHeight); projection.scale(projection.scale() * (l - 1) / l).precision(0.2); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, mapHeight]) .attr("id", chartid); const defs = svg.append("defs"); defs.append("path") .attr("id", "outline") .attr("d", path(outline)); defs.append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", new URL("#outline", location)); const g = svg.append("g") .attr("clip-path", `url(${new URL("#clip", location)})`); g.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "#fff"); g.append("path") .attr("d", path(graticule)) .attr("stroke", "#ddd") .attr("fill", "none"); let countries = topojson.feature(world, world.objects.countries); let borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b); g.append("path") .attr("d", path(countries)) .attr("fill", "#DDD"); g.append("path") .attr("d", path(borders)) .attr("fill", "none") .attr("stroke", "#EFEFEF"); svg.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("stroke", "#999") .attr("fill", "none"); // Generate Data for Force Labels let mapNodes = [] let mapLinks = [] schedule.data.map(d => { let id = d.gp.trim().toLowerCase().replace(/ /g, '-'); let x = projection([d.lon, d.lat])[0] let y = projection([d.lon, d.lat])[1] // nodes.push({id, type: data, }) mapNodes.push(Object.assign({id, gid: id, x, y, px: x, py: y, type: "data", fixed: true}, d)) mapNodes.push(Object.assign({id: id+"_label", gid: id, x, y, px: x, py: y, type: "label"}, d)) mapLinks.push({source: id, target: `${id}_label`, gid: id}) }) console.log(mapLinks) const simulation = d3.forceSimulation(mapNodes) .force('y', d3.forceY().y(d => d.py ).strength(0.5)) .force('x', d3.forceX().x(d => d.px ).strength(0.5)) .force("charge", d3.forceManyBody().strength(d => d.type === 'data' ? 0: -20)) .force("link", d3.forceLink(mapLinks).id(d => d.id).strength(0.9)) .on("tick", ticked); let elements = svg.append("g") .attr('class', 'elements') let links = elements.append("g") .attr('class', 'links') const link = links.selectAll('line.link') .data(mapLinks) .join('line') .attr('class', 'link') .attr('stroke-width', 1) .attr('stroke', 'grey'); let nodes = elements.append("g") .attr('class', 'nodes') // The actual points const place = nodes.selectAll("g.location") .data(mapNodes.filter(d => d.type == "data")) .join("g") .attr('class', 'location') .attr("transform", d => { d.fx = d.x; d.fy = d.y; return `translate(${d.x},${d.y} )` }) place.append("circle") .attr("r", 3) .attr('fill', (d) => { if (d.prev_round === null) { return '#7af48c'; } else if (d.round === null) { return '#f69679'; } else { return '#888'; } }) // const labels = svg.selectAll("g.label") // .data(mapNodes.filter(d => d.type == "label")) // .enter().append('g') // .attr('class', 'label') // .on('click', update_selection); const label = nodes.selectAll('g.label') .data(mapNodes.filter(d => d.type == "label")) .join('g') .attr('transform', function(d, i) { return `translate(${d.x},${d.y})` }) .attr('class', 'label') .call(drag(simulation)) .on("mouseover", (event, d) => { d3.select(event.target).style("cursor", "pointer"); link.transition().style('opacity', g => { return g.gid === d.gid ? 1 : 0.2; }); place.transition().style('opacity', g => { return g.gid === d.gid ? 1 : 0.2; }); label.transition().style('opacity', g => { return g.gid === d.gid ? 1 : 0.2; }); // Show toolTip chartTip.style("left", () => { console.log(d.x) console.log(width - d.x) // if ((innerWidth - d3.pointer(event)[0]) < 120) { // return event.pageX - (24+240) + "px"; // } else { // return event.pageX + 24 + "px"; // } if ((width - d.x) < 160) { return event.pageX - (24+240) + "px"; } else { return event.pageX + 24 + "px"; } }) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipTmpSchedule(d)); }) .on("mouseout", (event, d) => { d3.select(event.target).style("cursor", "default"); link.transition().style('opacity', 1 ); place.transition().style('opacity', 1 ); label.transition().style('opacity', 1 ); chartTip.style("display", "none"); // Hide toolTip }); label.append('text') .attr("class", 'lfl-text') .text(d => d.gp) .attr('fill', (d, i) => { if (d.round === null) { return '#777'; } else { return '#333'; } }) .attr('text-anchor', 'middle') .attr('alignment-baseline', 'middle') .style('font-size', '.75em') let firstTick = true; let firstTickAction = function () { label.select(function(d, i) { d.bbox = this.getBBox(); // d.width = d.bbox.width; // d.height = d.bbox.height; d.rx = d.bbox.width/2 + ellipsePadding; d.ry = d.bbox.height/2 + ellipsePadding; //d.r = d.width/2; }) place.select(function(d, i) { d.rx = 10; d.ry = 10; //d.r = d.width/2; }) if (showBuffer){ label.append('ellipse') .attr("class", 'ellipse') .attr("rx", function(d) { return d.rx; }) .attr("ry", function(d) { return d.ry; }) .attr('fill', "none") .attr('stroke', "#ccc"); place.append('ellipse') .attr("class", 'ellipse') .attr("rx", function(d) { return d.rx; }) .attr("ry", function(d) { return d.ry; }) .attr('fill', "none") .attr('stroke', "#ccc"); } simulation.force("ellipseForce", ellipseForce(2)); firstTick = false; } function drag(simulation){ function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); } function ticked() { if(firstTick){ firstTickAction() } label .attr('transform', d => `translate(${d.x}, ${d.y})`) link.select(function(d, i) { d.point = linkTargetByEllipse(d.source.x, d.source.y, d.target.x, d.target.y, d.target.rx, d.target.ry) }) link .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.point[0]) .attr('y2', d => d.point[1]); } // Previous implementations // // Force Line Labels // // Advances version using custom rectangle collision force to deal with the denser placement // let forceLabelOffset = 14 // offset of labels from right side of chart // let forceLabels = svg.append("g") // .attr('class', 'line-force-labels') // let labelset = schedule.data.filter(d => d.status !== "Second" ) // labelset.forEach(d => { // d.px = projection([d.lon, d.lat])[0] // d.py = projection([d.lon, d.lat])[1] // }); // const forceLabelLeader = forceLabels.selectAll('line') // .data(labelset) // .join('line') // .attr("class", 'lfl-leader') // .attr('x1', d => d.px ) // .attr('x2', d => d.px ) // .attr('y1', d => d.py ) // .attr('y2', d => d.py ) // .attr('stroke', '#999') // const forceLabel = forceLabels.selectAll('g') // .data(labelset) // .join('g') // .attr('transform', function(d, i) { // // contrains node x,y to bounds // d.x = d.px; // d.y = d.py; // initializes the labels in a stepped // return `translate(${d.x},${d.y})` // }) // forceLabel.append('text') // .attr("class", 'lfl-text') // .text(d => d.gp) // .attr('fill', (d, i) => { // if (d.round === null) { // return '#777'; // } else { // return '#333'; // } // }) // .attr('alignment-baseline', 'middle') // .style('font-size', '.75em'); // forceLabel.append('rect') // .attr("class", 'lfl-rect') // .attr("fill", "none"); // // .attr("stroke", "#EEE"); // displays the collision boundary - dev only // let firstTick = true; // let firstTickAction = function () { // d3.selectAll("#" + chartid + " .lfl-text") // .select(function(d, i) { // d.bbox = this.getBBox(); // d.width = d.bbox.width; // d.height = d.bbox.height; // }) // d3.selectAll("#" + chartid + " .lfl-rect") // .attr("width", d => d.width) // .attr("height", d => d.height) // .attr('transform', function(d) { return 'translate(' + 0 + ',' + (-d.height / 2) + ')'; }); // firstTick = false; // } // const simulation = d3.forceSimulation(labelset) // .force("charge", d3.forceManyBody().strength(-10)) // .force('y', d3.forceY().y(d => d.py )) // .force('x', d3.forceX().x(d => d.px )) // //.force("rect_collision", rectCollide()) // .force('collision', d3.forceCollide().radius(20)) // simulation.on('tick', () => { // if(firstTick){ firstTickAction() } // forceLabel.attr('transform', function(d) { // d.x = Math.max(d.width, Math.min(width - d.width/2, d.x)); // d.y = Math.max(d.height, Math.min(mapHeight - d.height/2, d.y)); // return `translate(${d.x},${d.y})` // }) // .attr("text-anchor", d => { // return (d.x < d.px) ? "end" : "start"; // }); // forceLabelLeader // .attr("x2", d => d.x) // .attr("y2", d => d.y) // }) return svg.node(); }35:T15ca,standings = { let result = {}; // object to return // Temp Map to Lookup Last Position by Team and Last Year Appearing result.data = data; result.mapTeam = d3.group(data, d => d['team']); result.mapDriverNo = d3.group(data, d => d['driver_no']); result.mapGp = d3.group(data, d => d['gp_no']); result.mapGpDriverNo = d3.group(data, d => d['gp_no'], d => d['driver_no']); result.gp_max = d3.max(data, d => d['gp_no']); result.driver_max = result.mapDriverNo.size; result.gp_nos = [] for(var i = 1; i <= result.gp_max; i++){ result.gp_nos.push(i); } result.teams = Array.from(result.mapTeam).map(d => d[0]) result.driver_nos = Array.from(result.mapDriverNo).map(d => d[0]) // result.driversData = {} // result.driversData = {} // result.teams.map(d => { // result.driversData // }) result.dataTeamsCR = []; result.dataTeams = result.teams.map(d => { let obj = {}; obj.data = result.mapTeam.get(d); obj.dataMapGp = d3.group(obj.data, d => d['gp_no']); obj.team = obj.data[0]["team"]; obj.teamClass = obj.data[0]["team"].toLowerCase().replace(/ /g, '-'); obj.points = new Array(result.gp_max).fill(null); obj.points_r = new Array(result.gp_max).fill(null); obj.finishes = new Array(result.gp_max).fill(null); obj.places = new Array(result.gp_max).fill(null); obj.laps = new Array(result.gp_max).fill(null); obj.rank = new Array(result.gp_max).fill(null); result.gp_nos.map(g => { let lookup = obj.dataMapGp.get(g) let finishes = 0; let places = 0; let laps = 0; lookup.forEach(p => { if (p.pos !== null && Number.isInteger(p.pos)) { finishes++ places += p.pos } laps += p.laps }) let teamPoints = d3.sum(lookup, p => p.points); obj.points[g-1] = teamPoints; // Points Race // Process Team Penalties if (obj.teamClass === 'racing-point' && g === 2){ teamPoints = teamPoints-15; } obj.points_r[g-1] = teamPoints; // Points Real (including penalty) obj.finishes[g-1] = finishes; obj.places[g-1] = places; obj.laps[g-1] = laps; }) obj.points_c = [].slice.call((d3.cumsum(obj.points_r))); obj.finishes_c = [].slice.call((d3.cumsum(obj.finishes))); obj.places_c = [].slice.call((d3.cumsum(obj.places))); obj.laps_c = [].slice.call((d3.cumsum(obj.laps))); return obj }) result.dataTeamsMap = d3.group(result.dataTeams, d => d["team"]); result.dataDrivers = result.driver_nos.map(d => { let obj = {} obj.data = result.mapDriverNo.get(d) obj.driver_no = d obj.driver = obj.data[0]["driver"] obj.team = obj.data[0]["team"] obj.teamClass = obj.data[0]["team"].toLowerCase().replace(/ /g, '-'); obj.start = d3.min(obj.data, d => d.gp_no); obj.points = []; obj.finishes = []; obj.place = []; obj.laps = []; obj.raced = [] obj.rank = new Array(result.gp_max).fill(null); result.gp_nos.map(g => { let lookup = result.mapGpDriverNo.get(g).get(obj.driver_no); let raced = lookup !== undefined; obj.raced.push(raced) obj.points.push( (raced) ? lookup[0]['points'] : 0 ); //let finish = (raced) ? lookup[0]['pos'] : null; let finish = (raced) ? lookup[0]['pos'] : null; obj.finishes.push( (finish !== null && Number.isInteger(finish)) ? 1 : 0 ) obj.place.push( (raced) ? lookup[0]['pos'] : "X" ); }) obj.points_c = [].slice.call((d3.cumsum(obj.points))); obj.finishes_c = [].slice.call((d3.cumsum(obj.finishes))); return obj //result.driversData[d] = obj; }) for(var i = 0; i < result.gp_max; i++){ result.dataDrivers .sort((a, b) => d3.descending(a.finishes_c[i], b.finishes_c[i])) //.sort((a, b) => d3.ascending(a.place[i], b.place[i])) .sort((a, b) => d3.descending(a.points_c[i], b.points_c[i])); // p result.dataDrivers.forEach((d, j) => { if (d.start <= i+1){ d.rank[i] = j+1 } }) result.dataTeams .sort((a, b) => d3.descending(a.laps[i], b.laps[i])) .sort((a, b) => d3.descending(a.finishes_c[i], b.finishes_c[i])) .sort((a, b) => d3.descending(a.points_c[i], b.points_c[i])); // p result.dataTeams.forEach((d, j) => { d.rank[i] = j+1 result.dataTeamsCR.push({ gp_no: i+1, gp: d.dataMapGp.get(i+1)[0].gp, team: d.team, teamClass: d.teamClass, points: d.points[i], points_c: d.points_c[i], finishes: d.finishes[i], rank: d.rank[i] }) }) } // Create a map of the drivers data to use in lookup result.dataDriversMap = d3.group(result.dataDrivers, d => d['driver_no']); // attach rank and cumulative points to race data result.data.forEach(d => { d.teamClass = d.team.toLowerCase().replace(/ /g, '-'); d.rank = result.dataDriversMap.get(d['driver_no'])[0].rank[(d['gp_no']-1)] d.points_c = result.dataDriversMap.get(d['driver_no'])[0].points_c[(d['gp_no']-1)] }) return result; }36:T4e4,function tipTmpDriver(d) { // Tooltip Template for Driver let tipContent = ``; // Start content string let time = (d.time !== null) ? `${d.time}` : 'N/A'; let pits = isNum(d.pits) ? `${d.pits}` : 'N/A'; let laps = isNum(d.laps) ? `${d.laps}` : 'N/A'; tipContent += `

${d.driver} (#${d.driver_no})

` tipContent += `

` tipContent += `GP: ${d.gp}
` tipContent += `Team: ${d.team}
` if (d.pos !== 'NC'){ tipContent += `Place: ${d.pos} / ` tipContent += (d.points > 0) ? `${d.points} Pts` : `0 Pts`; tipContent += (d.fastest === 'Y') ? ` (fastest lap)` : ``; tipContent += `
`; } else { tipContent += `Place: ${d.dn} (${d.retirement})
` } tipContent += `Time: ${time}
Laps: ${laps} / Pits: ${pits}
` // tipContent += `Points - Race: ${d.points} / Total: ${d.points_c}
` if (d.penalty !== null){ tipContent += `Penalty: ${d.penalty}
` } tipContent += `

Standing: ${d.rank} / ${d.points_c} Pts

` tipContent += `

` return tipContent; }37:T445,function tipTmpTeam(d) { // Tooltip Template for Team Standings let tipContent = ``; // Start content string tipContent += `

${d.team}

` tipContent += `

` tipContent += `GP: ${d.gp}
` tipContent += `Team Points: ${d.points}
` let drivers = standings.dataTeamsMap.get(d.team)[0].dataMapGp.get(d.gp_no); tipContent += `

Drivers

`; drivers.map(d => { tipContent += `${d.driver} (#${d.driver_no})
` if (d.pos !== 'NC'){ tipContent += `Place: ${d.pos} / ` tipContent += (d.points > 0) ? `${d.points} Pts` : `0 Pts`; tipContent += (d.fastest === 'Y') ? ` (fastest lap)` : ``; tipContent += `
`; } else { tipContent += `Place: ${d.dn} (${d.retirement})
` } }) tipContent += `

Standing: ${d.rank} / ${d.points_c} Pts

` tipContent += `

` return tipContent; }38:T59b,function tipTmpSchedule(d) { // Tooltip Template for Team Standings let tipContent = ``; // Start content string tipContent += `${d.gp} GP
` tipContent += `${d.circuit}
` tipContent += `${d.location}
` let cNew = '#7af48c'; let cCancel = '#f69679'; let cNormal = '#888'; if(d.status === 'Cancelled'){ tipContent += `${d.status}
` tipContent += `Originally: ${tipDateFormat(d.prev_date)} (Round ${d.prev_round}/22)
` } if(d.status === 'Rescheduled'){ tipContent += `${d.status}
` tipContent += `${tipDateFormat(d.date)} (Round ${d.round}/17)
` tipContent += `Originally: ${tipDateFormat(d.prev_date)} (Round ${d.prev_round}/22)
` } if(d.status === 'On Scehdule'){ tipContent += `${d.status}
` tipContent += `${tipDateFormat(d.date)} (Round ${d.round}/17)
` } if(d.status === 'New'){ tipContent += `New Race
` tipContent += `${tipDateFormat(d.date)} (Round ${d.round}/17)
` } if(d.status === 'Second'){ tipContent += `Second Race
` tipContent += `${tipDateFormat(d.date)} (Round ${d.round}/17)
` } return tipContent; }39:T1698,ellipseForce = function (padding, innerRepulsion, outerRepulsion) { // https://bl.ocks.org/jpurma/6dd2081cf25a5d2dfcdcab1a4868f237 var nodes; function constant(x) { return function() { return x; }; } if (typeof padding !== "function") padding = constant(padding == null ? 4 : +padding); innerRepulsion = innerRepulsion == null ? 0.5 : +innerRepulsion; outerRepulsion = outerRepulsion == null ? 0.5 : +outerRepulsion; function force(alpha) { var i, j, n = nodes.length, // dimensions of this node node, my_padding, my_w, my_h, my_x, my_y, // often used multiples my_w2, my_h2, my_wh, // dimensions of the other node other, other_padding, other_w, other_h, other_x, other_y, // distance between nodes dist_x, dist_y, // components for the overall result force_ratio, dist, gap, repulsion, x_component, y_component, // computing elliptical force g, g2, x1, y1, x2, y2, d1, d2, force_ratio1, force_ratio2, // parameters myOuterRepulsion = outerRepulsion * 16; for (i = 0; i < n; ++i) { node = nodes[i]; my_padding = +padding(node, i, nodes); my_w = node.rx + my_padding; my_h = node.ry + my_padding; my_w2 = my_w * my_w; my_h2 = my_h * my_h; my_wh = my_w * my_h; my_x = node.x + node.vx; my_y = node.y + node.vy; for (j = 0; j < n; ++j) { if (j == i) { continue; } other = nodes[j]; other_padding = +padding(other, j, nodes); other_w = other.rx + other_padding; other_h = other.ry + other_padding; other_x = other.x + other.vx; other_y = other.y + other.vy; dist_x = my_x - other_x; dist_y = my_y - other_y; if (dist_x == 0 && dist_y == 0) { node.vx += (Math.random() * 4) - 2; node.vy += (Math.random() * 4) - 2; continue; } else if (dist_x == 0) { force_ratio = (my_h / my_w + other_h / other_w) / 2; dist = Math.abs(dist_y); gap = dist - my_h - other_h; } else if (dist_y == 0) { force_ratio = 1; dist = Math.abs(dist_x); gap = dist - my_w - other_w; } else { // ellipse is defined as x^2 y^2 // --- + --- = 1 // w^2 h^2 // here x,y are points on ellipse's arc. // we have a line going between center points of two ellipses and we want to know // the point where it crosses the ellipse's arc. Because we know the line, we // know that y = g * x, where g = dist_y / dist_x; // now the only unknown in ellipse above is x, and thus we can find it by // moving pieces around (pen and paper work). equation becomes: // w * h // x = --------------------- // sqrt(h^2 + g^2 * w^2) g2 = g * g; x1 = my_wh / Math.sqrt(my_h2 + g2 * my_w2); y1 = g * x1; // the length of the little bit from the center of ellipse to its margin. // For circle it would be 'r', but for ellipse it varies. d1 = Math.sqrt(x1 * x1 + y1 * y1); // Strength of force that this ellipse eminates is modified by ratio of this bit // to the ellipse's width. (It doesn't matter if we use width or height as reference // point) force_ratio1 = d1 / my_w; // And same for the other ellipse: x2 = (other_w * other_h) / Math.sqrt(other_h * other_h + g2 * other_w * other_w); y2 = g * x2; d2 = Math.sqrt(x2 * x2 + y2 * y2); force_ratio2 = d2 / other_w; // now we can calculate the gap or overlap between two ellipses, and force ratio on // how strongly they should push as average of their force_ratios dist = Math.sqrt(dist_x * dist_x + dist_y * dist_y); gap = dist - d2 - d1; force_ratio = (force_ratio1 + force_ratio2) / 2; } x_component = dist_x / dist; y_component = dist_y / dist; if (gap < 0) { // force GROWS as gap goes further into negative repulsion = Math.min(Math.max(1.0, innerRepulsion * force_ratio * -gap), 5.0); node.vx += repulsion * x_component; node.vy += repulsion * y_component; } else { // force DIMINISHES as gap becomes larger repulsion = Math.min(20.0, (force_ratio * myOuterRepulsion * alpha) / gap); node.vx += repulsion * x_component; node.vy += repulsion * y_component; } } } } force.initialize = function(my_nodes) { nodes = my_nodes; }; force.outerRepulsion = function(my_outerRepulsion) { if (arguments.length) { outerRepulsion = +my_outerRepulsion; return force; } else { return outerRepulsion; } }; force.innerRepulsion = function(my_innerRepulsion) { if (arguments.length) { innerRepulsion = +my_innerRepulsion; return force; } else { return innerRepulsion; } }; force.padding = function(my_padding) { if (arguments.length) { if (typeof my_padding === "function") { padding = my_padding; } else { padding = constant(+my_padding); } return force; } else { return padding; } }; return force; };3a:[{"id":"5885faa335932d55c0afbd6d03db0ae7d76ac03323041bc6ef7ade1d6dc6cf91d4ef635aec5ac19bbbaaeb261bb6b2acb3157de4e6e502954abfd76b61569fd3","href":"https://static.observableusercontent.com/files/5885faa335932d55c0afbd6d03db0ae7d76ac03323041bc6ef7ade1d6dc6cf91d4ef635aec5ac19bbbaaeb261bb6b2acb3157de4e6e502954abfd76b61569fd3","name":"f1-2020-gp13-times.tsv","type":"text/tab-separated-values","lastModified":1604517105845.079,"size":5433},{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1604810704155.427,"size":107761},{"id":"c3ddbafda9ef7fa8405b6bfd915da47a6b1e68299cbad596bc302956c12851d024a624373948026db3e644d4c70ca5ea7f1f92115bc524d762bcd2eb23a73356","href":"https://static.observableusercontent.com/files/c3ddbafda9ef7fa8405b6bfd915da47a6b1e68299cbad596bc302956c12851d024a624373948026db3e644d4c70ca5ea7f1f92115bc524d762bcd2eb23a73356","name":"f1-2020-schedule@6.tsv","type":"text/tab-separated-values","lastModified":1606942003491.539,"size":5752},{"id":"8fa43f3048bba13499381fca0904d0298b093776778e6592f644586cc49d76fa0e1bc1ac628d159a3167ec4ef0ffce798f271773bbbeea98ff5218750f1a7bf0","href":"https://static.observableusercontent.com/files/8fa43f3048bba13499381fca0904d0298b093776778e6592f644586cc49d76fa0e1bc1ac628d159a3167ec4ef0ffce798f271773bbbeea98ff5218750f1a7bf0","name":"f1-2020-driver-results-latest.tsv","type":"text/tab-separated-values","lastModified":1607294476066.488,"size":33531},{"id":"a93460e8b72d3661cb5f6eaec3455ff776eb507beff6e0d277831b98f77d29599dbf9a21b75327205d31fce3f70ccffca248e03688e0d36ebcc0846b934541bc","href":"https://static.observableusercontent.com/files/a93460e8b72d3661cb5f6eaec3455ff776eb507beff6e0d277831b98f77d29599dbf9a21b75327205d31fce3f70ccffca248e03688e0d36ebcc0846b934541bc","name":"f1-2020-driver-results-latest@1.tsv","type":"text/tab-separated-values","lastModified":1608064337440.207,"size":35646}] 2e:{"title":"F1 2020 Season","cells":[{"id":0,"value":"md`# F1 2020 Season\nThis notebooks builds on the work done in [Contructor Standing 2010-2019](https://observablehq.com/@benoldenburg/f1-constructor-standings-2010-2019) to look how the standings change standings over the course of 2020 Forumla 1 season. It also looks at the schedule changes that took place due to the impact of Covid-19. Race results are referenced from [formula1.com](https://www.formula1.com/en/results.html) standings and [motorsport.com](https://www.motorsport.com/f1/results/2020/) and will be updated as the season progresses.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`## Driver Standings Over the 2020 Formula 1 Season`","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"viewof driverOptions = inputsGroup(\n[\n [\n select({\n //title: 'Transit Mode',\n description: 'Select Display Value',\n options: [\n { value: 'pos', label: 'Individual Race Finish'},\n { value: 'pti', label: 'Individual Race Points'},\n { value: 'ptc', label: 'Cumulative Points'},\n ],\n value: 'pos' // set initial value\n })\n ]\n],\n \n[\n ['displayNum']\n]\n \n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`## Team Standings Over the 2020 Formula 1 Season and Cumulative Points Earned`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"md`#### Notes\n\n+ On August 7, 2020 a protest about the legality of Racing Point's car design was upheald assigning a 15 point team penalty (7.5 points per car) on the Styrian GP. Driver points were not affected. ([Source](https://www.formula1.com/en/latest/article.breaking-racing-point-deducted-15-points-and-fined-heavily-as-renault.7j9tsLSAm7rXnWHxH1Uy9c.html))\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`## Revised 2020 Schedule\nDue the the impact of Covid-19 on the 2020 season, including pushing the start from March to July, there were a number of changes to the schedule. What was to be a record 22 race season was reduced to 17. This also included three back to back race weekends at the same circuit.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`## Race Locations\nThe FIA's code normally stipulates that a world championship must visit a least three contintents but the revised 2020 season has been limited largely to Europe and Western Asia.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"// Data Processing","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"schedule = {\n let result = {}\n \n result.data = d3.tsvParse(await FileAttachment(\"f1-2020-schedule@6.tsv\").text(), d3.autoType)\n \n result.domain = [d3.min(result.data, d => d.prev_date), d3.max(result.data, d => d.date)]\n \n result.original = result.data.filter(d => d.prev_round !== null ).sort((a, b) => d3.ascending(a.prev_round, b.prev_round))\n result.modified = result.data.filter(d => d.round !== null )\n result.keep = result.data.filter(d => d.prev_round !== null && d.round !== null)\n result.lines = [] \n result.data.filter(d => d.prev_round !== null && d.round !== null).map( d => {\n result.lines.push([{pos: 0, date: d.prev_date}, {pos: 1, date: d.date}])\n })\n \n result.gpMap = d3.groups(result.modified, d => d.round)\n \n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"data = d3.tsvParse(await FileAttachment(\"f1-2020-driver-results-latest@1.tsv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"teamColors = ({\n'mercedes': 'rgb(67,191,180)',\n'ferrari': 'rgb(218,31,38)',\n'red-bull': 'rgb(58,79,162)',\n'mclaren': 'rgb(246,135,31)',\n'renault': 'rgb(255,194,15)',\n'alphatauri': 'rgb(0,114,188)',\n'racing-point': 'rgb(239,151,192)',\n'alfa-romeo': 'rgb(150,26,29)',\n'haas': 'rgb(120,121,121)',\n'williams': 'rgb(68,149,209)',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"times_gp13 = {\n \n let result = {}; // object to return\n \n // Temp Map to Lookup Last Position by Team and Last Year Appearing\n result.data = times;\n \n \n \n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"times = d3.tsvParse(await FileAttachment(\"f1-2020-gp13-times.tsv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"// Additional Styles and Type","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"// Tooltips","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"tipDateFormat = d3.timeFormat(\"%B %e\"); // Timeline Tooltip Date Format\n// tipDateFormat = d3.timeFormat(\"%a, %b %e\"); // Timeline Tooltip Date Format","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"chartTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip chartTip\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"value":"// Helper Functions and Formatting","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"function linkTargetByEllipse(sx, sy, tx, ty, rx, ry){\n // sx, sy = link source pos (fixed) / tx, ty = link target pos / rx, ry = lable buffer ellipse radii\n \n let dx = Math.abs(sx - tx); \n let dy = Math.abs(sy - ty);\n \n let t = Math.atan(dy/dx); // arc tangent in radians\n\n let xc = (rx*ry)/Math.sqrt((ry*ry)+(rx*rx)*(Math.pow(Math.tan(t),2)));\n let yc = (rx*ry)/Math.sqrt((rx*rx)+((ry*ry)/(Math.pow(Math.tan(t),2))));\n\n // Use the distance the offset the the line from the center point.\n // get new x/y point to assing to the line inside the force tick function\n let nx = (sx > tx) ? tx + xc : tx - xc ;\n let ny = (sy > ty) ? ty + yc : ty - yc ;\n \n return [nx, ny];\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":1113,"value":"// GeoData","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"world = FileAttachment(\"countries-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1109,"value":"// Libraries and References","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"import {curveDiagonal} from \"@benoldenburg/f1-constructor-standings-2010-2019\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"import {select, slider, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"function inputsGroup(views,names){\n // slightly modified version of https://observablehq.com/@bumbeishvili/input-groups\n \n const form = html`

${\n views.map(row => html`

${\n row.map(input => html`

${input}

`)\n }

`;\n \n form.oninput = () => {\n form.value = views.map(row => row.map(input => input.value))\n if(names){\n names.forEach((row,i)=>row.forEach((c,j)=> form.value[i][j]!=null && (form.value[c]=form.value[i][j])))\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\") // Load D3","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}