2b:null 2c:["$","title",null,{"children":"Formula 1 championships as Star Wars wall panels | Atthar Mirza | Observable"}] 31:T234c,chartDynamic = { const svg = chartStatic; const chart = svg.select(".chart"); const lines = chart.select(".lines"); const events = chart.select(".events"); const letters = chart.select(".letters"); const flags = chart.select(".flags"); const legend = chart.select(".legend"); const axisY = chart.select(".axisY"); const t = svg.transition().duration(2000).ease(d3.easeExp); // Adding the lines underneath each row lines .selectAll("path") .data( selector.type == "Drivers" ? dataLayoutLineDrivers : dataLayoutLineConstructors ) .join("path") .attr( "class", (d) => "line line" + (selector.type == "Drivers" ? d[0]["driverId"] : d[0]["constructorId"]) ) .attr("d", (e) => line( e.map((d) => [ scaleEvents(+d["round"]) + scaleEvents.bandwidth() / 2, scalePoints( d["offset"] + (d["width"] >= 12 ? 6 : d["width"] / 2) + d["padding"] ) ]) ) ) .attr("fill", "none") .attr("stroke", (d) => colors.teams[d[0]["constructorId"]].primary) .attr("stroke-width", 1.5) .attr("stroke-linecap", "round") .attr("opacity", 0) .style("pointer-events", "none"); // Adding the cells and cell groups representing each round events .selectAll("g") .data(dataLayout) .join("g") .attr("transform", (d) => `translate(${scaleEvents(+d["round"])}, 0)`) .attr("class", (d) => "event event" + d["round"]); const roundingFactor = 0.5; events.selectAll(".event").each(function (d) { d3.select(this).selectAll("rect").remove(); if (d["StandingsConstructors"].length > 0) { d3.select(this) .selectAll("rect") .data((d) => selector.type == "Drivers" ? d["StandingsDrivers"] : d["StandingsConstructors"] ) .join("rect") .attr("class", (d) => { const id = selector.type == "Drivers" ? d["driverId"] : d["constructorId"]; return `cell cell${id} cell${id}${d["round"]}`; }) .attr("fill", (d) => d["points"] > 0 ? colors.teams[d["constructorId"]].primary : colors.background ) .attr("stroke", (d) => colors.teams[d["constructorId"]].primary) .attr("stroke-width", 1) .attr("y", (d) => scalePoints(d["offset"] + d["padding"])) .attr("height", (d) => scalePoints(d["width"])) .attr("width", scaleEvents.bandwidth) .attr("rx", scaleEvents.bandwidth() * roundingFactor) .attr("ry", scaleEvents.bandwidth() * roundingFactor) .on("click", (event, data) => isMobile ? null : select( selector.type == "Drivers" ? data["driverId"] : data["constructorId"] ) ); // .attr("opacity", (d) => (d["points"] > 0 ? 1 : 0)); } else { d3.select(this) .append("rect") .attr("height", dmsHeight.chartHeight) .attr("width", scaleEvents.bandwidth) .attr("fill", "url(#hash)") .attr("stroke", colors.fade) .attr("stroke-width", 1.5) .attr("rx", scaleEvents.bandwidth() * roundingFactor) .attr("ry", scaleEvents.bandwidth() * roundingFactor) .attr("pointer-events", "none"); } }); // Driver labels events.selectAll(".event").each(function (d) { if (selector.type == "Drivers") { d3.select(this) .selectAll("text") .data((d) => d["StandingsDrivers"]) .join("text") .text((d) => drivers.get(d["driverId"])["code"]) .attr("x", scaleEvents.bandwidth() / 2) .attr("y", (d) => scalePoints(d["offset"] + d["padding"] + 1)) .attr("writing-mode", "vertical-lr") .attr("dominant-baseline", "central") .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("letter-spacing", 2) .attr("fill", colors.background) .attr("font-size", scaleEvents.bandwidth() * 0.8 + "px") .attr("pointer-events", "none") .attr("opacity", (d) => (scalePoints(d["points"]) > 40 ? 1 : 0)) .raise(); } }); // Some more stuff for interactivity d3.selectAll(".labelInteractive").on("click", function () { select(d3.select(this).attr("dataId")); }); d3.selectAll(".clear").on("click", function () { clear(); }); format(); // X-Axis flags .selectAll("text") .data(dataLayout) .join("text") .text((d) => { const country = countries.get(d["Circuit"]["Location"]["country"]); if (!country) { throw d["Circuit"]["Location"]["country"]; } return country["emoji"]; }) .attr("x", (d) => scaleEvents(+d["round"]) + scaleEvents.bandwidth() / 2) .attr("y", -dmsAxis.x) .attr("text-anchor", "middle") .attr("dominant-baseline", "text-before-edge") .attr( "font-family", platform.substring(0, 3) == "Win" ? '"Noto Color Emoji", sans-serif' : "sans-serif" ) .attr("font-size", platform.substring(0, 3) == "Win" ? "0.75em" : "0.9em") .attr("opacity", isMobile ? 0 : 1); // Y-Axis axisY .attr( "transform", `translate(${scaleEvents(schedule["Races"].length + 1)}, 0)` ) .selectAll("text") .data((d) => selector.type == "Drivers" ? dataLayout .filter((f) => f["StandingsDrivers"].length > 0) [ dataLayout.filter((f) => f["StandingsDrivers"].length > 0) .length - 1 ]["StandingsDrivers"].slice(0, 3) : dataLayout .filter((f) => f["StandingsDrivers"].length > 0) [ dataLayout.filter((f) => f["StandingsDrivers"].length > 0) .length - 1 ]["StandingsConstructors"].slice(0, 3) ) .join("text") .text((d, i) => formatPosition(i + 1, false)) .attr("x", dmsAxis.y) .attr("y", (d, i) => scalePoints(d["offset"] + d["padding"] + (i > 0 ? d["width"] / 2 : 1)) ) .attr("fill", (d) => selected.length > 0 ? colors.fade : colors.teams[d["constructorId"]].primary ) .attr("font-size", isMobile ? "0.8em" : scaleEvents.bandwidth() * 1.2) // .attr("writing-mode", "vertical-lr") .attr("dominant-baseline", "bottom") .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("text-anchor", (d, i) => (i > 0 ? "middle" : "start")) .attr( "transform", (d, i) => `rotate(90,${dmsAxis.y},${scalePoints( d["offset"] + d["padding"] + (i > 0 ? d["width"] / 2 : 1) )})` ) .attr("opacity", (d, i) => scalePoints(d["offset"] + d["padding"] + (i > 0 ? d["width"] / 2 : 0)) > dmsHeight.chartHeight * (isMobile ? 0.4 : 0.5) ? 0 : 1 ); axisY .select(".dividingLine") .attr( "d", d3.line()([ [0, 0], [0, dmsHeight.chartHeight] ]) ) .attr("fill", "none") .attr("stroke", colors.fade) .attr("stroke-width", 2) .attr("transform", `translate(1, 0)`); // Legend legend .attr( "transform", `translate(${scaleEvents(schedule["Races"].length + 1) + dmsAxis.y}, ${ dmsHeight.chartHeight - scalePoints( legendData[legendData.length - 1]["width"] + legendData[legendData.length - 1]["offset"] ) })` ) .selectAll("rect") .data(legendData) .join("rect") .attr("y", (d) => scalePoints(d["offset"])) .attr("height", (d) => scalePoints(d["width"])) .attr("width", scaleEvents.bandwidth()) // .attr("fill", (d) => // d["points"] > 0 ? "url(#hashBlack)" : colors.background // ) .attr("fill", (d) => (d["points"] > 0 ? "black" : colors.background)) .attr("stroke", "black") .attr("stroke-width", 1) .attr("rx", scaleEvents.bandwidth() * roundingFactor) .attr("ry", scaleEvents.bandwidth() * roundingFactor); legend .selectAll("text") .data(legendData) .join("text") .text((d) => d["label"]) .attr("y", (d) => scalePoints(d["offset"]) - 3) .attr("x", isMobile ? 1 : scaleEvents.bandwidth() / 2 + 0.5 + 1) .attr("font-size", isMobile ? "0.8em" : scaleEvents.bandwidth()) // .attr("writing-mode", "vertical-lr") .attr("dominant-baseline", isMobile ? "bottom" : "central") .attr("font-family", "sans-serif") .attr("text-anchor", "end") .attr("transform", (d) => isMobile ? `rotate(90,1,${scalePoints(d["offset"]) - 4})` : `rotate(90,${scaleEvents.bandwidth() / 2 + 1},${ scalePoints(d["offset"]) - 3 })` ); return html`

${svg.node()}

${tooltip}

`; }32:T602,// viewof year = Inputs.range([2012, 2022], { value: 2022, step: 1 }) viewof selector = view`

To explore data from past championships, change the year: ${[ "year", // html`` Inputs.select( d3 .range(2012, 2023) .sort(d3.descending) .map((d) => String(d)), { width: 0, value: "2022" } ) ]}. Take 2021 for example, an interesting year with Mercedes and Red Bull neck-in-neck for the title throughout the season. And 2014 is a bizarre looking chart because of the first race in Formula 1 history to award double points.

You can also select which championship to view: ${[ "type", Inputs.select(["Drivers", "Constructors"], { value: "Drivers", width: 0 }) ]}. The driver's championship has all the personalities and the glory, but the constructor's championship is how teams earn that sweet prize money.

Finally, choose how you want to sort the sausages: ${[ "sort", Inputs.select( new Map([ ["Championship Standing", "total"], ["Grand Prix Points", "points"] ]), { value: "total", width: 50 } ) ]}. I prefer championship standing for this last paramater, because it makes the season seem like a race. Teams and drivers overtake each other by performing well in back-to-back races, or one pulls far ahead by starting strong and staying consistent.

`33:T4df,colors = ({ teams: { ferrari: { primary: "#F91536", accent: "" }, mercedes: { primary: "#6CD3BF", accent: "" }, haas: { primary: "#B6BABD", accent: "" }, alfa: { primary: "#C92D4B", accent: "" }, // alpine: { primary: "#2293D1", accent: "" }, alpine: { primary: "#ff95f2", accent: "" }, racing_point: { primary: "#ff95f2", accent: "" }, alphatauri: { primary: "#5E8FAA", accent: "" }, toro_rosso: { primary: "#469BFF", accent: "" }, aston_martin: { primary: "#358C75", accent: "" }, williams: { primary: "#37BEDD", accent: "" }, mclaren: { primary: "#F58020", accent: "" }, // red_bull: { primary: "#3671C6", accent: "#e0bb12" }, red_bull: { primary: "#FFCC00", accent: "" }, renault: { primary: "#121212", accent: "" }, force_india: { primary: "#25b34b", accent: "" }, sauber: { primary: "#1f2eb5", accent: "" }, manor: { primary: "#e85538", accent: "" }, // lotus_f1: { primary: "#f7be39", accent: "" }, lotus_f1: { primary: "#121212", accent: "" }, marussia: { primary: "#e34e24", accent: "" }, caterham: { primary: "#5ae07b", accent: "" }, hrt: { primary: "#968133", accent: "" } }, background: "#fff", fade: "#f0f0f0" // brand: "#e10600" })34:T10be,35:T484,// schedule = await FileAttachment("schedule.json").json() // schedule = { // const scheduleAPI = await d3.json(`https://ergast.com/api/f1/${year}.json`); // return scheduleAPI["MRData"]["RaceTable"]; // } scheduleAll = { const year2022 = await FileAttachment("2022.json").json(); const year2021 = await FileAttachment("2021.json").json(); const year2020 = await FileAttachment("2020.json").json(); const year2019 = await FileAttachment("2019.json").json(); const year2018 = await FileAttachment("2018.json").json(); const year2017 = await FileAttachment("2017.json").json(); const year2016 = await FileAttachment("2016.json").json(); const year2015 = await FileAttachment("2015.json").json(); const year2014 = await FileAttachment("2014.json").json(); const year2013 = await FileAttachment("2013.json").json(); const year2012 = await FileAttachment("2012.json").json(); const obj = { 2022: year2022, 2021: year2021, 2020: year2020, 2019: year2019, 2018: year2018, 2017: year2017, 2016: year2016, 2015: year2015, 2014: year2014, 2013: year2013, 2012: year2012 }; return obj; }36:T57a,countries = { const attachment1 = await FileAttachment("all.csv").csv(); const attachment2 = await FileAttachment("countries.csv").text(); const emojis = Object.fromEntries( d3.csvParseRows(attachment2).map((d) => [d[1], d[0]]) ); const countries = attachment1.map((d) => { let nameCustom = ""; // Adding some if...else statements to deal with country // names, in order to make them match with the names used // in the F1 database. switch (d["name"]) { case "Bolivia (Plurinational State of)": nameCustom = "Bolivia"; break; case "Korea (Democratic People's Republic of)": nameCustom = "North Korea"; break; case "United States of America": nameCustom = "USA"; break; case "United Kingdom of Great Britain and Northern Ireland": nameCustom = "UK"; break; case "United Arab Emirates": nameCustom = "UAE"; break; case "Russian Federation": nameCustom = "Russia"; break; case "Korea, Republic of": nameCustom = "Korea"; break; default: nameCustom = d["name"]; } return { nameCustom: nameCustom, name: d["name"], iso: d["alpha-3"], code: d["country-code"], emoji: emojis[d["alpha-3"]] }; }); return new Map(countries.map((d) => [d["nameCustom"], d])); }37:T4b3,// dataRawAPI = { // const rounds = []; // // const roundsCount = schedule["Races"].filter( // // (f) => dateParser(f["date"]) < d3.timeDay.offset(Date.now(), -1) // // ).length; // const roundsCount = schedule["Races"].length; // for (let i = 1; i <= roundsCount; i++) { // const drivers = await d3.json( // `https://ergast.com/api/f1/${year}/${i}/driverStandings.json` // ); // const constructors = await d3.json( // `https://ergast.com/api/f1/${year}/${i}/constructorStandings.json` // ); // const driversTable = // drivers["MRData"]["StandingsTable"]["StandingsLists"][0]; // const constructorsTable = // constructors["MRData"]["StandingsTable"]["StandingsLists"][0]; // const obj = { // season: drivers["MRData"]["StandingsTable"]["season"], // round: drivers["MRData"]["StandingsTable"]["round"], // DriverStandings: !driversTable ? [] : driversTable["DriverStandings"], // ConstructorStandings: !constructorsTable // ? [] // : constructorsTable["ConstructorStandings"] // }; // rounds.push(obj); // } // return rounds.filter((f) => f["DriverStandings"].length > 0); // } 38:T6cb,dataPointsPerEvent = dataAllEvents .map((obj, i, arr) => { const d = { ...obj }; const pointsCalc = function (array, arrayName, idName) { if (i > 0) { return array.map((subobj, index) => { const e = { ...subobj }; const pointsPrevious = arr[i - 1][arrayName].filter( (f) => f[idName] == e[idName] )[0]; e["standing"] = index + 1; e["points"] = !pointsPrevious ? e["pointsTotal"] : pointsPrevious["pointsTotal"] <= e["pointsTotal"] ? e["pointsTotal"] - pointsPrevious["pointsTotal"] : e["pointsTotal"]; return e; }); } else { return array.map((subobj, index) => { const e = { ...subobj }; e["standing"] = index + 1; e["points"] = e["pointsTotal"]; return e; }); } }; if ( d["StandingsDrivers"].length > 0 && d["StandingsConstructors"].length > 0 ) { d["StandingsDrivers"] = pointsCalc( d["StandingsDrivers"], "StandingsDrivers", "driverId" ); d["StandingsConstructors"] = pointsCalc( d["StandingsConstructors"], "StandingsConstructors", "constructorId" ); } return d; }) .map((obj) => { const d = { ...obj }; d["StandingsDrivers"].sort((a, b) => selector.sort == "total" ? d3.ascending(a["standing"], b["standing"]) : d3.descending(a["points"], b["points"]) ); d["StandingsConstructors"].sort((a, b) => selector.sort == "total" ? d3.ascending(a["standing"], b["standing"]) : d3.descending(a["points"], b["points"]) ); return d; })39:T48e,dataLayout = { const LayoutValues = function (standings) { const layout = standings .map((obj) => { const d = { ...obj }; const width = d["points"] == 0 ? 1 : d["points"]; d["width"] = width; return d; }) .map((obj, i, arr) => { const d = { ...obj }; d["offset"] = d3.sum(arr.slice(0, i), (e) => e["width"]); d["padding"] = padding * i; d["paddingTotal"] = padding * (arr.length - 1); return d; }); const widthTotal = d3.sum(layout, (e) => e["width"]) + padding * (layout.length - 1); const layoutWithPercent = layout.map((obj, i, arr) => { const d = { ...obj }; d["widthPercent"] = (d["width"] / widthTotal) * 100; d["paddingPercent"] = (padding / widthTotal) * i * 100; d["offsetPercent"] = (d["offset"] / widthTotal) * 100; return d; }); return layoutWithPercent; }; return dataPointsPerEvent.map((obj) => { const x = { ...obj }; x["StandingsConstructors"] = LayoutValues(x["StandingsConstructors"]); x["StandingsDrivers"] = LayoutValues(x["StandingsDrivers"]); return x; }); }3a:T775,tooltipOverview = { const results = dataPointsPerEvent.filter( (f) => f["StandingsConstructors"].length > 0 ); const resultsFirst = selector.type == "Drivers" ? [...results[0]["StandingsDrivers"]].sort((a, b) => d3.ascending(a["standing"], b["standing"]) ) : [...results[0]["StandingsConstructors"]].sort((a, b) => d3.descending(a["pointsTotal"], b["pointsTotal"]) ); const resultsLatest = selector.type == "Drivers" ? [...results[results.length - 1]["StandingsDrivers"]].sort((a, b) => d3.ascending(a["standing"], b["standing"]) ) : [...results[results.length - 1]["StandingsConstructors"]].sort((a, b) => d3.descending(a["pointsTotal"], b["pointsTotal"]) ); // return resultsLatest; const labels = function (event) { return event.map((obj, i, arr) => { const d = { ...obj }; const color = colors.teams[d["constructorId"]].primary; const id = selector.type == "Drivers" ? d["driverId"] : d["constructorId"]; const name = selector.type == "Drivers" ? drivers.get(d["driverId"])["familyName"] : constructors.get(d["constructorId"])["name"]; const label = `${name}`; return i < arr.length - 1 ? label + " " : "and " + label; }); }; if (results.length < schedule["Races"].length) { return html`This year ${partyTime()} ${ labels(resultsLatest)[0] } ${partyTime()} leads the championship, followed by ${labels( resultsLatest.slice(1) )} in last.`; } else { return html`${partyTime()} ${ labels(resultsLatest)[0] } ${partyTime()} came out on top, followed by ${labels( resultsLatest.slice(1) )} in last.`; } }3b:Tc33,tooltipSelection = function (id, index, array) { let color = ""; let content = ""; if (selector.type == "Drivers") { const info = drivers.get(id); color = colors.teams[info["teams"][0]["constructorId"]].primary; const story = dataLayout .filter((f) => f["StandingsDrivers"].length > 0) .map((obj, i) => { const d = { ...obj }; d["DriverStats"] = d["StandingsDrivers"].filter( (f, i) => f["driverId"] == id )[0]; return d; }); content = `

${info["givenName"]} ${info["familyName"]}

${ info["nationality"] } • ${ info["teams"][0]["name"] }

${formatPosition( story[story.length - 1]["DriverStats"]["standing"], true )} in driver's championship, ${ story[story.length - 1]["DriverStats"]["pointsTotal"] } total points${ info["driverId"] == "sainz" ? ' for the smooth operator ' : "" }

`; } else { const info = constructors.get(id); const drivers = info["drivers"].sort((a, b) => d3.ascending(a["familyName"], b["familyName"]) ); color = colors.teams[info["constructorId"]].primary; const story = dataLayout .filter((f) => f["StandingsConstructors"].length > 0) .map((obj, i) => { const d = { ...obj }; let standing = 0; let position = 0; d["ConstructorStats"] = d["StandingsConstructors"].filter( (f, i) => f["constructorId"] == id )[0]; return d; }); content = `

${info["name"]}

${drivers[0]["familyName"]} & ${drivers[1]["familyName"]}

${formatPosition( story[story.length - 1]["ConstructorStats"]["standing"], true )} in constructor's championship, ${ story[story.length - 1]["ConstructorStats"]["pointsTotal"] } total points

`; } if (index == 0) { return html`

${symbolX}

${content}

`; } else if (index == 1) { return html`

V.S.

${content}

F1 ${year}

\n ${tooltipOverview}\n ${\n selected.length > 0\n ? [...selected].map((d, i, arr) => tooltipSelection(d, i, arr))\n : html`

👆

Select names to see more info and compare standings.

`\n }\n