28:null 29:["$","title",null,{"children":"MotoGP 2020 Season | Andrew P | Observable"}] 2e:T2259,chartStandingsDrivers = { const height = 810; 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.value; 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", "y axis") .call(yAxis) .call((g) => g.selectAll(".domain").remove()); 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", (d) => `translate(${x(d[1][0].gp_no)},${-20})`) .append("text") .attr("class", "gp-name") .text((d) => 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: motogp.com Standings / 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. const gridlines = group.append("g").attr("class", "gridlines"); let gridpositions = []; for (let 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 const lines = group.append("g").attr("class", "driver-lines"); const line = d3 .line() .defined((d) => d !== null) .x((d, i) => x(i + 1)) .y((d) => 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 const nodes = group.append("g").attr("class", "driver-races"); const node = nodes .selectAll("node") .data(standings.data) .join("g") .attr("transform", (d) => `translate(${x(d.gp_no)},${y(d.rank)})`) .attr("class", (d) => `driver-race ${d.driver_no}`) .on("mousemove", (event, d) => chartTip .style("left", () => innerWidth - d3.pointer(event)[0] < 120 ? `${event.pageX - (24 + 240)}px` : `${event.pageX + 24}px` ) .style("top", `${event.pageY + 24}px`) .style("display", "inline-block") .html(tipDriver(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 <= 15) { 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", (d) => 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) => displayNum !== "ptc" && d.pos === "NC" ? "8px" : "10px" ); // Line Labels const labels = group.append("g").attr("class", "line-labels"); const label = labels .selectAll("text") .data(standings.dataDrivers) .join("text") .attr("class", "line-label") .text((d) => d.driver) .attr("x", (d) => x(standings.gp_max) + 20) .attr("y", (d) => y(d.rank[standings.gp_max - 1])) .attr("dy", ".35em") .style("fill", (d) => 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) => (g.driver_no === d.driver_no ? 1 : 0.2)); d3.selectAll(`#${chartid} .driver-label`) .transition() .style("opacity", (g) => (g.driver_no === d.driver_no ? 1 : 0.2)); d3.selectAll(`#${chartid} .driver-race`) .transition() .style("opacity", (g) => (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})`); const legendElement = legend .selectAll("engine") .data([ { type: "pts", label: "Top 15 Finish" }, { type: "non", label: "No Points / DNF" } ]) .enter() .append("g") .attr("class", (d) => `type-${d.type}`) .attr("transform", (d, i) => `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", (d) => "label") .attr("x", 12) .attr("dy", ".35em") .attr("text-anchor", "start") .text((d) => d.label) .attr("fill", (d) => { // return d[1].c return "#555"; }) //.style('font-weight', 'bold') .style("font-size", "12px"); //.style('font-family', 'sans-serif'); return svg.node(); }2f:T1c8e,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 }); }); 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 label = nodes .selectAll("g.label") .data(mapNodes.filter((d) => d.type === "label")) .join("g") .attr("transform", (d, i) => `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) => (g.gid === d.gid ? 1 : 0.2)); place.transition().style("opacity", (g) => (g.gid === d.gid ? 1 : 0.2)); label.transition().style("opacity", (g) => (g.gid === d.gid ? 1 : 0.2)); // Show toolTip chartTip .style("left", () => width - d.x < 160 ? event.pageX - (24 + 240) + "px" : event.pageX + 24 + "px" ) .style("top", event.pageY + 24 + "px") .style("display", "inline-block") .html(tipSchedule(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) => (d.round === null ? "#777" : "#333")) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .style("font-size", ".75em"); let firstTick = true; let firstTickAction = () => { 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((d, i) => { d.rx = 10; d.ry = 10; //d.r = d.width/2; }); if (showBuffer) { label .append("ellipse") .attr("class", "ellipse") .attr("rx", (d) => d.rx) .attr("ry", (d) => d.ry) .attr("fill", "none") .attr("stroke", "#ccc"); place .append("ellipse") .attr("class", "ellipse") .attr("rx", (d) => d.rx) .attr("ry", (d) => 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((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]); } return svg.node(); }30:T142c,standings = { let result = {}; // object to return const data = await FileAttachment( "motogp-2020-driver-results-latest@2.tsv" ).tsv({ typed: true }); // 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.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; }31:T480,function curveDiagonal(step = 0.1) { return (context) => ({ _context: context, x0: null, y0: null, areaStart() { this._line = 0; }, areaEnd() { this._line = NaN; }, lineStart() { this._point = 0; }, lineEnd() { if (this._line || (this._line !== 0 && this._point === 1)) { this._context.closePath(); } this._line = 1 - this._line; }, point(x, y) { (x = +x), (y = +y); switch (this._point) { case 0: this._point = 1; if (this._line) { this._context.lineTo(this.x0 + step * (x - this.x0), this.y0); this._context.lineTo(x - step * (x - this.x0), y); this._context.lineTo(x, y); } else { this._context.moveTo(x, y); } break; case 1: this._point = 2; // proceed default: this._context.lineTo(this.x0 + step * (x - this.x0), this.y0); this._context.lineTo(x - step * (x - this.x0), y); this._context.lineTo(x, y); break; } this.x0 = x; this.y0 = y; } }); }32:T1666,function ellipseForce(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; }33:T45b,function tipDriver(d) { // Tooltip Template for Driver let tipContent = ``; // Start content string let time = (d.time !== null) ? `${d.time}` : '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}
` // 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; }34:T5c0,function tipSchedule(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 Schedule") { 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; }35:[{"id":"5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","href":"https://static.observableusercontent.com/files/5b7bb44872469fc6f9f4256d902fba909728666ad0d5263654ce95f4470ec90527fdc39a1d1b70490f457d65c31795d651a4afc0745f72351916e715fddc7352","name":"countries-110m.json","type":"application/json","lastModified":1625231667654.553,"size":107761},{"id":"2d3000f97cd4519532d39af5571562cf090c0568d8e4e179dd6b5ce44081940276ecdfffdc3de98495e3dc0ab3b05e2755a2e2547f7437c4f9690f2088ba89ba","href":"https://static.observableusercontent.com/files/2d3000f97cd4519532d39af5571562cf090c0568d8e4e179dd6b5ce44081940276ecdfffdc3de98495e3dc0ab3b05e2755a2e2547f7437c4f9690f2088ba89ba","name":"motogp-2020-schedule@4.tsv","type":"text/tab-separated-values","lastModified":1625300075736.833,"size":3060},{"id":"c9db3354a2f9a6c9c577e8c7f08419e9468b1461d07cd838dc5d9cda22d4fb5652dfab9a0895a43038c8af9feab4ff26010ac708a565b7c779dae339980a13ca","href":"https://static.observableusercontent.com/files/c9db3354a2f9a6c9c577e8c7f08419e9468b1461d07cd838dc5d9cda22d4fb5652dfab9a0895a43038c8af9feab4ff26010ac708a565b7c779dae339980a13ca","name":"motogp-2020-driver-results-latest@2.tsv","type":"text/tab-separated-values","lastModified":1625235842386.77,"size":27647}] 2c:{"id":"ac9b19ef92f68d48","slug":"motogp-2020-season","title":"MotoGP 2020 Season","thumbnail":"e088c12cb5c14bd4c4e7e281e7a3c7a98d40063270aea43adfe38d22be016bde","access_level":"public","create_time":"$D2021-07-02T13:01:01.374Z","update_time":"$D2021-07-06T13:17:08.331Z","view_time":null,"first_public_time":"$D2021-08-10T14:06:57.170Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"448956d8a4a43eb5","login":"piratus","name":"Andrew P","avatar_url":"https://avatars-next.observableusercontent.com/10979fe53e8362346572a5770112fd1a4efba4fb09c4182a6652b6f09e12f9e4","tier":"starter_2024"},"version":199,"publish_version":199,"role":null,"authored":false,"authors":[{"type":"individual","id":"4873f825e6d817f7","login":"piratus","name":"Andrew P","avatar_url":"https://avatars-next.observableusercontent.com/10979fe53e8362346572a5770112fd1a4efba4fb09c4182a6652b6f09e12f9e4","tier":null}],"members":[{"type":"individual","id":"4873f825e6d817f7","login":"piratus","name":"Andrew P","avatar_url":"https://avatars-next.observableusercontent.com/10979fe53e8362346572a5770112fd1a4efba4fb09c4182a6652b6f09e12f9e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5abd63e51e823011","slug":"gp-motorcycle-racing","title":"GP Motorcycle Racing","owner":{"id":"448956d8a4a43eb5","login":"piratus","name":"Andrew P"}},"type":"notebook","body":{"title":"MotoGP 2020 Season","cells":[{"id":0,"value":"# MotoGP 2020 Season\n\nHeavily inspired by [F1 2020 Season](https://observablehq.com/@benoldenburg/f1-2020-season)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"## Rider Standings Over the 2020 MotoGP Season","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof driverOptions = Inputs.select(\n [\n { label: \"Individual Race Finish\", value: \"pos\" },\n { label: \"Individual Race Points\", value: \"pti\" },\n { label: \"Cumulative Points\", value: \"ptc\" }\n ],\n {\n label: html`Display Value`,\n format: (d) => d.label,\n value: (d) => d.find((x) => x.value === \"pos\")\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"## Race locations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"teamColors = ({\n \"aprilia-racing-team-gresini\": \"rgb(239,151,192)\",\n \"ducati-team\": \"rgb(218,31,38)\",\n \"esponsorama-racing\": \"rgb(120,121,121)\",\n \"lcr-honda\": \"rgb(255,194,15)\",\n \"monster-energy-yamaha-motogp\": \"rgb(0,114,188)\",\n \"petronas-yamaha-srt\": \"rgb(67,191,180)\",\n \"pramac-racing\": \"rgb(150,26,29)\",\n \"red-bull-ktm-factory-racing\": \"rgb(246,135,31)\",\n \"red-bull-ktm-tech-3\": \"rgb(246,135,31)\",\n \"repsol-honda-team\": \"rgb(255,194,15)\",\n \"team-suzuki-ecstar\": \"rgb(68,149,209)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"schedule = {\n let result = {};\n\n result.data = await FileAttachment(\"motogp-2020-schedule@4.tsv\").tsv({\n typed: true\n });\n\n result.domain = [\n d3.min(result.data, (d) => d.prev_date),\n d3.max(result.data, (d) => d.date)\n ];\n\n result.original = result.data\n .filter((d) => d.prev_round !== null)\n .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(\n (d) => d.prev_round !== null && d.round !== null\n );\n result.lines = [];\n result.data\n .filter((d) => d.prev_round !== null && d.round !== null)\n .map((d) => {\n result.lines.push([\n { pos: 0, date: d.prev_date },\n { pos: 1, date: d.date }\n ]);\n });\n\n result.gpMap = d3.groups(result.modified, (d) => d.round);\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"world = FileAttachment(\"countries-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"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 =\n (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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"tipDateFormat = d3.timeFormat(\"%B %e\") // Timeline Tooltip Date Format","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"chartTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip chartTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"function isNum(n) {\n return !isNaN(parseFloat(n)) && isFinite(n) && n !== \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2d:"$2c:body"