30:T26fe,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" : "9px"; }) // 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:T210a,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" : "9px"; }) // 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(); }32:T11e7,sceduleChart = { const height = 250 const margin = ({ top: 50, right: 75, bottom: 50, left: 25 }); 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 x = d3.scaleTime() .domain(schedule.domain) .range([0, innerWidth]) .nice(); let xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat("%b")); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + innerHeight + ")") .call(xAxis) .call(g => g.selectAll(".domain").remove()); // // Title // group.append("text") // .text(`(${schedule.races.length} Races)`) // .attr("text-anchor", "start") // .attr("class", "x-axis-label") // .attr("x", 0) // .attr("y", 0 ) // .style('fill', '#999') // .style('font-size', '16px') // .style('font-family','sans-serif' ); // Event Nodes var nodes = group.append("g") .attr("class", "events") var original = nodes.selectAll("original") .data(schedule.races) .join("g") .attr("transform", function(d) { return `translate(${x(d.date)}, ${innerHeight-10})`; }) .on('mousemove', (event, d) => { chartTip.style("left", () => { if ((innerWidth - d3.pointer(event)[0]) < 120) { return event.pageX - (240) + "px"; } else { return event.pageX + 0 + "px"; } }) .style("top", event.pageY - 150 + "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') .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); }); original.append("text") .attr("class", 'label') .attr('x', function(d) { return 12 }) .attr('y', function(d) { return -2 }) .attr('dy', '.35em') //.attr('alignment-baseline', 'middle') .attr("text-anchor", "start") .text(d => { let label = `${d.gp}` if (d.circuit_abbr) { label += ` - ${d.circuit_abbr}` } return label }) .attr('fill', "#444") .attr("transform", "rotate(-45)") //.style('font-family', 'Oswald, sans-serif') .style('font-weight', 'bold') .style('font-size', d => 11) // 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(); }33: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(); }34:T2bab,chartDriverPoints = { const height = 500 // only height defined to width is defined responsive const margin = ({ top: 50, right: 150, bottom: 106, left: 75 }); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const chartid = "chart-driver-points"; // chart ID to isolate d3 class selections to just this chart // filtering previous teams that haven't scored more than 2 points in a season. // let selectSeries = standings.series.filter(d => d.maxpoints > 2) let selectSeries = standings.dataDrivers.filter(d => d.points_total > 0) let lastgp = standings.gp_nos.at(-1) // Define SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("id", chartid); // Main chart group/area inset by top/left margin const group = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Define Scales let y = d3.scaleLinear() .domain([0, d3.max(standings.dataDrivers, d => d.points_total)]) .range([innerHeight, 0]) .nice(); let x = d3.scaleLinear() .domain([1, lastgp]) .range([20, innerWidth]); // Define and Call Axes let yAxis = d3.axisLeft(y); let xAxis = d3.axisBottom(x).tickFormat(d3.format("d")); group.append("g") .attr("class", "x axis") .attr("transform", "translate("+ 0 + "," + (innerHeight + 20) + ")") .call(xAxis) .call(g => g.selectAll(".domain").remove()) group.append("g") .attr("class", "y axis") .call(yAxis) .call(g => g.selectAll(".domain").remove()) // Grid Lines let grid = (g) => {g .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", 0) .attr("y2", innerHeight+20)) .call(g => g.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", 0) .attr("x2", innerWidth)); } group.append("g") .call(grid); // Axis Labels group.append("text") .text('Grand Prix Rounds') .attr("text-anchor", "middle") .attr("class", "x-axis-label") .attr("y", innerHeight + 64) .attr("x", innerWidth/2) .style('fill', '#999') .style('font-size', '14px') .style('font-family','sans-serif' ); group.append("text") .text('Total Season Points') .attr("text-anchor", "middle") .attr("class", "graph-title") .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'); group.append("line") .attr("class", "y-highlight") .attr('x1', 0) .attr('x2', 0) .attr('y1', 0) .attr('y2', innerHeight) .style('stroke', '#999') .style('opacity', 0); // Custom Place Grid // The 11th and 12th places that don't run the full width are trimmed programmatically // Should be converted to an automated data subset. // Lines var lines = group.append("g") .attr("class", "team-lines") var line = d3.line() .defined(d => d > 0) .x(function(d, i) { return x(i+1); }) .y(function(d, i) { return y(d); }) let team = lines.selectAll("g") .data(selectSeries) .join("g") .attr("class", (d) => "driver-line line-" + d.driver_no) // Mask team.append("path") .attr("class", "line-background") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 6) .attr("stroke", "#FFFFFF") .attr("stroke-opacity", 0.8) .attr('d', (d) => line(d.points_c)) // Line with Team Color team.append("path") .attr("class", (d) => "line-primary") .attr("style", "fill:none !important") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 3) .attr("stroke", (d) => teamColors[d.teamClass]) .attr("stroke-opacity", 0.8) .attr('d', (d) => line(d.points_c)) // Label Object let labelset = Array.from(selectSeries).map(d => { let obj = {} obj.id = d['driver_no']; obj.label = d['driver']; obj.color = teamColors[d['teamClass']]; obj.val = d['points_total']; return obj }) // Force Line Labels - Basic Version let forceLabelOffset = 20 let forceLabels = group.append("g") .attr('class', 'line-force-labels') const forceLabelLeader = forceLabels.selectAll('line') .data(labelset) .join('line') .attr("class", 'lfl-leader') .attr('x1', x(lastgp) + 4) .attr('x2', x(lastgp) + forceLabelOffset) .attr('y1', d => y(d.val)) .attr('y2', d => y(d.val)) .attr('stroke', '#CCC') const forceLabel = forceLabels.selectAll('g') .data(labelset) .join('g') .attr('transform', function(d) { // contrains node x,y to bounds d.x = x(lastgp) + forceLabelOffset; d.y = y(d.val); return `translate(${d.x},${d.y})` }) .on("mouseover", (event, d) => { console.log(d) d3.selectAll("#" + chartid + " .driver-line") .transition().style('opacity', g => { return g.driver_no === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', g => { return g.id === d.id ? 1 : 0.2; }); }) .on("mouseout", (event, d) => { d3.selectAll("#" + chartid + " .driver-line") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-text") .transition().style('opacity', 1 ); d3.selectAll("#" + chartid + " .lfl-leader") .transition().style('opacity', 1 ); }); forceLabel.append('text') .attr("class", 'lfl-text') .html(d => d.label) .attr('fill', d => d.color) .attr('alignment-baseline', 'middle') .style('font-size', '.75em') .style('font-size', '14px') .style('font-weight', 'bold'); forceLabel.append('rect') .attr("class", 'lfl-rect') const simulation = d3.forceSimulation(labelset) .force("charge", d3.forceManyBody().strength(-10)) .force('y', d3.forceY().y(d => y(d.val))) .force('x', d3.forceX().x(x(lastgp) + forceLabelOffset)) //.force("rectcollide", rectCollide()) .force('collision', d3.forceCollide().radius(8)); simulation.on('tick', () => { forceLabel.attr('transform', function(d) { //d.y = Math.max(Math.min(innerHeight, d.y), 0); // constrain y to vertical chart area d.x = x(lastgp) + forceLabelOffset; // constrain x for all labels return `translate(${d.x},${d.y})` }); forceLabelLeader .attr("x2", d => d.x-2) .attr("y2", d => d.y) }) // Chart Area Tooltip // Group for line highligt points, sits below tootTip area so point don't interfere with hover let yPoints = group.append("g") .attr('class', 'y-highlight-points') // Chart toolTip Area (defines where hover with be active) let tipArea = group.append("g") .attr("class", "tip-area"); tipArea.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('width', innerWidth) .attr('height', innerHeight) .attr('opacity', 0) .attr('pointer-events', 'all'); // .on('mousemove', tipAreaMouseOver) // .on('mouseout', tipAreaMouseOut ); function tipAreaMouseOver(event, d){ // Get the date on the y axis for the mouse position let invert = x.invert(d3.pointer(event)[0]) console.log({invert}) // let bisect = d3.bisector(function(d) { return d; }).right; // let hoverDate = (data.years[bisect(data.years, invert)]); //it would return 2. let hoverDate = Math.round(invert); //it would return 2. console.log({hoverDate}) let lookup = standings.mapYear.get(hoverDate) console.log({lookup}) //.sort((a, b) => d3.ascending(a[place], b[place])); // Display and position vertical line d3.select("#" + chartid + " .y-highlight") .attr('x1',x(hoverDate)) .attr('x2',x(hoverDate)) .style('opacity', 1); // Update Pattern for the Point Highlights const yPoint = yPoints.selectAll('g') .data(lookup, d => d.id) .join( enter => enter.append("g") .attr('class', 'y-highlight-point') .attr('transform', function(d) { return `translate(${x(d.year)},${y(d.points)})` }) .attr('opacity', d => !isNaN(d.points) ? 1 : 0) // hide if value is NaN, .append('circle') .attr('r', 4) .attr('stroke-weight', 4) .attr('stroke', '#FFFFFF') .attr('fill', (d) => teamColors[d.id]), update => update .attr('transform', function(d) { return `translate(${x(d.year)},${y(d.points)})` }) .attr('opacity', d => !isNaN(d.points) ? 1 : 0), // hide if value is NaN exit => exit.remove() ) // Custom toolTip Content let tipContent = ``; // Start content string tipContent += ``; // Interate over selected categories lookup.map( d => { tipContent += `` tipContent += `` tipContent += `` }); tipContent += `

	Place	Points
${d.name}	${d.place}	${d.points}

`; 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(`${hoverDate}
${tipContent}`); } function tipAreaMouseOut(event, d){ chartTip.style("display", "none"); // Hide toolTip d3.select("#" + chartid + " .y-highlight").style('opacity', 0); // Hide y-highlight line d3.selectAll("#" + chartid + " .y-highlight-point").remove(); // Remove y-highlight points }; return svg.node(); }35:T16ec,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 + p.sprint_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.points_r = []; 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) let pointsRace = (raced) ? lookup[0]['points'] : 0 let laps = (raced) ? lookup[0]['laps'] : 0 let pointsSprint = (raced) ? lookup[0]['sprint_points'] : 0 obj.laps.push(laps) obj.points.push( pointsRace + pointsSprint); //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))); obj.points_total = d3.sum(obj.points) 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:T542,function tipTmpSchedule(d) { // Tooltip Template for Team Standings let tipContent = ``; // Start content string tipContent += `${d.gp} GP
` if(d.s21_status !== 'Cancelled'){ tipContent += `${tipDateFormat(d.date)} (Round ${d.round}/${schedule.races.length})
` } tipContent += `${d.circuit}
` tipContent += `${d.location}
` let cNew = '#7af48c'; let cCancel = '#f69679'; let cNormal = '#888'; if(d.s21_status === 'Cancelled'){ tipContent += `${d.s21_status}
` // tipContent += `Originally: ${tipDateFormat(d.prev_date)} (Round ${d.prev_round}/22)
` } if(d.s21_status === 'Rescheduled'){ tipContent += `${d.s21_status}
` // tipContent += `Originally: ${tipDateFormat(d.prev_date)} (Round ${d.prev_round}/22)
` } // if(d.s21_status === 'On Scehdule'){ // tipContent += `${d.status}
` // } if(d.s21_status === 'New'){ tipContent += `New Race
` } if(d.s21_status === 'Second'){ tipContent += `Second Race
` } 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":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1621606932901.794,"size":107761},{"id":"5885faa335932d55c0afbd6d03db0ae7d76ac03323041bc6ef7ade1d6dc6cf91d4ef635aec5ac19bbbaaeb261bb6b2acb3157de4e6e502954abfd76b61569fd3","href":"https://static.observableusercontent.com/files/5885faa335932d55c0afbd6d03db0ae7d76ac03323041bc6ef7ade1d6dc6cf91d4ef635aec5ac19bbbaaeb261bb6b2acb3157de4e6e502954abfd76b61569fd3","name":"f1-2020-gp13-times.tsv","type":"text/tab-separated-values","lastModified":1621606932901.794,"size":5433},{"id":"6462a44b742b6727fa3a7cdd335471391888d14408a2f1b69244c185b82e77092eadc0f959af09579b9ba459d9e1fe0fb76dbc5dc7dd6019f2583fb6581b6cbf","href":"https://static.observableusercontent.com/files/6462a44b742b6727fa3a7cdd335471391888d14408a2f1b69244c185b82e77092eadc0f959af09579b9ba459d9e1fe0fb76dbc5dc7dd6019f2583fb6581b6cbf","name":"f1-2021-schedule@5.tsv","type":"text/tab-separated-values","lastModified":1637687836467.676,"size":4993},{"id":"a669203e77118baeb594ce0369ca74261976d6f2ba512e497a0e60c885f1cbab08d2b37a8d2ee2ae35a9fe5986b2300a0e93c1ca9fd5d2356a3b6223c4dd92fe","href":"https://static.observableusercontent.com/files/a669203e77118baeb594ce0369ca74261976d6f2ba512e497a0e60c885f1cbab08d2b37a8d2ee2ae35a9fe5986b2300a0e93c1ca9fd5d2356a3b6223c4dd92fe","name":"f1-2021-driver-results-latest@22.tsv","type":"text/tab-separated-values","lastModified":1638737065147.148,"size":44172},{"id":"2ce31f5c802fd1f9153e8caf46823f63f2cce452bbe18aa102c3c92c3e5a6440302c76fec7c7e1c0e2b3b34b2fb1cbc979cd1b859ac116bfdfc29bc5cd2a9e07","href":"https://static.observableusercontent.com/files/2ce31f5c802fd1f9153e8caf46823f63f2cce452bbe18aa102c3c92c3e5a6440302c76fec7c7e1c0e2b3b34b2fb1cbc979cd1b859ac116bfdfc29bc5cd2a9e07","name":"f1-2021-driver-results-latest@23.tsv","type":"text/tab-separated-values","lastModified":1639417990155.366,"size":46277}] 2e:{"title":"F1 2021 Season","cells":[{"id":0,"value":"md`# F1 2021 Season\nThis notebook updates the [2020 version](https://observablehq.com/@benoldenburg/f1-2020-season) to look at how the driver and team standings track over the course of the 2021 Formula 1 season. 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/)\n\nNote: The countback processing still needs to revised as it doesn't handle the rule that on equal points the driver with the most wins (as opposed to finishes) is considered ahead. So Max Verstappend should be shown as in first place after the Saudi Arabia GP.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`## Driver Standings Over the 2021 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":1353,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"md`#### Notes\n\n+ 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 or no points.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`## Team Standings Over the 2021 Formula 1 Season and Cumulative Points Earned`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`## 2021 Schedule (${schedule.races.length} Races)\nThis season has the most races ever at 23. Due to COVID restrictions the Candaian GP was cancelled and subsequently the Turkish GP mean to replace it. This lead to a change in the French GP dates and a second race added at the Red Bull Ring.\n\nThe 2021 Singapore GP [has been cancelled](https://www.formula1.com/en/latest/article.singapore-grand-prix-called-off-for-2021.3bFXuXAA1PQOF5M1bwREF4.html) since originally announced but is planned to be replaced by a rescheduled Turkish GP\n\nThe Australian GP (Originally Nov 20th)[was cancelled](https://www.formula1.com/en/latest/article.australian-grand-prix-off-in-2021.395AJGygKsmWueNXHiZRUU.html) and replacement race has yet to be announced\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"md`### Race Locations\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"md`## Driver Points Over the 2021 Formula 1 Season\n\nNote: Only drivers with at least 1 point are displayed.\nWork in progress`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"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-2021-schedule@5.tsv\").text(), d3.autoType)\n \n result.domain = [d3.min(result.data, d => d.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.races = 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-2021-driver-results-latest@23.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(59,80,162)',\n'mclaren': 'rgb(248,152,29)',\n'alpine': 'rgb(71,134,198)',\n'alphatauri': 'rgb(43,70,99)',\n'aston-martin': 'rgb(0,112,98)',\n'alfa-romeo': 'rgb(144,25,28)',\n'haas': 'rgb(240,78,55)',\n'williams': 'rgb(64,99,174)',\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"}