2f:T4e6,Ok, still confusing. So how did each team get an elo number? | Team | Opposing Team | Record of Opponent | Seed | Point Differential | Elo |--------------|---------------------|--------------------|------|-------------------|----| | Los Angeles Lakers | Golden State Warriors | 43-39 | 2 | +5 | 1540.1 | | Los Angeles Lakers | Phoenix Suns | 51-31 | 1 | +8 | 1549.9 | | Los Angeles Lakers | Denver Nuggets | 46-36 | 5 | -3 | 1546.3 | | Los Angeles Lakers | Houston Rockets | 26-56 | 15 | +12 | 1548.4 | | Los Angeles Lakers | Boston Celtics | 48-34 | 3 | +4 | 1566.2 | | Los Angeles Lakers | Brooklyn Nets | 50-32 | 4 | +6 | 1570.1 | | Los Angeles Lakers | Utah Jazz | 54-28 | 1 | +9 | 1582.4 | | Los Angeles Lakers | Philadelphia 76ers | 49-33 | 3 | +4 | 1590.7 | | ... | ... | ... | ... | ... | ... | Yes... for every game, of every team, for each season since 1947. Let's see it in action! ## Top Teams by Elo Ranking ### Variable Sliders30:T6b4,viewof chart = LineChart(data1, { x: d => d.Season, y: d => d.Elo, z: d => d.Franchise, xType: d3.scaleLinear, curve: d3.curveCardinal, yLabel: "↑ Elo", xLabel: "Time --> ", yDomain: [1170, 1800], width: 1200, height: 700, color: d => colorScale(d[0]), strokeWidth: 4 }) // x = ([x]) => x, // given d in data, returns the (temporal) x-value // y = ([, y]) => y, // given d in data, returns the (quantitative) y-value // z = () => 1, // given d in data, returns the (categorical) z-value // title, // given d in data, returns the title text // defined, // for gaps in data // curve = d3.curveLinear, // method of interpolation between points // marginTop = 20, // top margin, in pixels // marginRight = 30, // right margin, in pixels // marginBottom = 30, // bottom margin, in pixels // marginLeft = 40, // left margin, in pixels // width = 640, // outer width, in pixels // height = 400, // outer height, in pixels // xType = d3.scaleUtc, // type of x-scale // xDomain, // [xmin, xmax] // xRange = [marginLeft, width - marginRight], // [left, right] // yType = d3.scaleLinear, // type of y-scale // yDomain, // [ymin, ymax] // yRange = [height - marginBottom, marginTop], // [bottom, top] // yFormat, // a format specifier string for the y-axis // yLabel, // a label for the y-axis // zDomain, // array of z-values // color = "currentColor", // stroke color of line, as a constant or a function of *z* // strokeLinecap, // stroke line cap of line // strokeLinejoin, // stroke line join of line // strokeWidth = 1.5, // stroke width of line // strokeOpacity, // stroke opacity of line // mixBlendMode = "multiply", // blend mode of lines31:T1c73,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function LineChart(data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = "currentColor", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines voronoi // show a Voronoi overlay? (for debugging) } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const Z = d3.map(data, z); const O = d3.map(data, d => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y, d => typeof d === "string" ? +d : d)]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(curve) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("fill", "white") .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); // An optional Voronoi display (for fun). if (voronoi) svg.append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr("d", d3.Delaunay .from(I, i => xScale(X[i]), i => yScale(Y[i])) .voronoi([0, 0, width, height]) .render()); svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call(g => g.select(".domain").remove()) .call(voronoi ? () => {} : g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel)); const path = svg.append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, i => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 14) .attr("text-anchor", "middle") .attr("y", -8); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point path.style("stroke", ([z]) => Z[i] === z ? null : "#ddd").filter(([z]) => Z[i] === z).raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) dot.select("text").text(T[i]); // Add a rectangular box const boxWidth = 300; // Width of the box const boxHeight = 40; // Height of the box const boxPadding = 5; // Padding inside the box const boxGroup = dot.append("g") .attr("transform", `translate(${-boxWidth / 2},${-boxHeight - 10})`); const box = boxGroup.append("rect") .attr("width", boxWidth) .attr("height", boxHeight) .attr("rx", 5) // Rounded corner radius .attr("ry", 5) .attr("fill", "black") .attr("stroke", "black") .attr("stroke-width", 2); // Add text inside the box const text = boxGroup.append("text") .attr("font-family", "sans") .attr("font-size", 20) .attr("fill", "white") .attr("text-anchor", "middle") .attr("x", boxWidth / 2) .attr("y", boxHeight / 2) .attr("alignment-baseline", "middle") .text(T[i]); // Adjust text to fit within the box width const textNode = text.node(); const textLength = textNode.getComputedTextLength(); if (textLength > boxWidth - 2 * boxPadding) { const truncatedText = truncateText(T[i], boxWidth - 2 * boxPadding); text.text(truncatedText); } svg.property("value", O[i]).dispatch("input", {bubbles: true}); } // Function to truncate text with ellipsis if it exceeds the given width function truncateText(text, width) { const ellipsis = "..."; let truncatedText = text; while (text.length > 0 && text.getComputedTextLength() > width) { text = text.slice(0, -1); truncatedText = text + ellipsis; } return truncatedText; } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", mixBlendMode).style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", {bubbles: true}); } return Object.assign(svg.node(), {value: null}); }32:[{"id":"fd5198e877e026d7a93d5933d90050b36370f62748a5681357d87ab78a2f4b68eae854cd18d6b7cc9331380437a87c07838c9192300e8b622d00a541319f097a","href":"https://static.observableusercontent.com/files/fd5198e877e026d7a93d5933d90050b36370f62748a5681357d87ab78a2f4b68eae854cd18d6b7cc9331380437a87c07838c9192300e8b622d00a541319f097a","name":"madkudu_mj.jpeg","type":"image/jpeg","lastModified":1685299391056.367,"size":235220},{"id":"fd091dfc142c15c5da18f4c8bdc2de4c56d7a10bcab225dd484535b94e2f64cb4121494b2ecce899e79b9eb4909acbad3b7d3c1e610f9d589d1f4354af4e7485","href":"https://static.observableusercontent.com/files/fd091dfc142c15c5da18f4c8bdc2de4c56d7a10bcab225dd484535b94e2f64cb4121494b2ecce899e79b9eb4909acbad3b7d3c1e610f9d589d1f4354af4e7485","name":"nbaallelo@8.csv","type":"text/csv","lastModified":1685404759995.409,"size":9149760}] 2d:{"title":"Which NBA Basketball Team is ACTUALLY the GOAT?","cells":[{"id":0,"value":"# Which NBA Basketball Team is ACTUALLY the GOAT?\n## A short, quantitative research study.","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"\n

","pinned":false,"hidden":false,"mode":"html"},{"id":8,"value":"### It's a Debate\n\nPicking the GOAT, or Greatest Of All Time, basketball team is a bit of a debacle. Opinions wage on when and where you grew up, what team the role models in your life liked, and the part of basketball that you consider exciting. Opinions, typically, are waged on these qualitative factors.\n\nSports pundits will implicate pivotal events like championships, play-off appearances, and all-star players. For me, none of these factors feel important enough to give a team the title of \"GOAT.\"\n\nThat's why I came up with my own evaluation algorithm:\n\n### My Elo Algorithm","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"Elo, an algorithm-based rating system, is well-established in many sports NOT including basketball. To pursue my curiosity as to who the GOAT basketball team really is, I had to create my own basketball-minded adapted elo algorithm.","pinned":false,"hidden":false,"mode":"md"},{"id":600,"value":"Elo = Elo + [(\\frac {pointDifferential\\times recordOfOpponent}{seed})\\times{\\frac {31 - (2 \\times seed)}{15}}]","pinned":false,"hidden":false,"mode":"tex"},{"id":845,"value":"Here it is! Although not the prettiest, this elo system evaluates what I care about. It takes the strength of your win, the strength of your opponent, and the opponent's strength in the entire league.\n\nRight now, this is just a confusing algorithm though. So, for example, let's consider that we the elo of a team entering a game is 1300 and they beat the 2-seed by 24 points.","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"\\begin{aligned} \n&1) \\space \\space \\space Elo = 1300 + [(\\frac {24{–}point\\space win \\times 0.750}{2{–}seed})\\times{\\frac {31 - (2 \\times 2{–}seed)}{15}}] \\\\\\\\\n&2) \\space \\space \\space Elo = 1300 + [(\\frac {24 \\times \\frac 34}{2})\\times{\\frac {31 - 4}{15}}]\n\\\\\\\\\n&3) \\space \\space \\space Elo = 1300 + [(\\frac {18}{2})\\times{\\frac {27}{15}}]\n\\\\\\\\\n&4) \\space \\space \\space Elo = 1300 + (9\\times{\\frac {9}{5}})\n\\\\\\\\\n&5) \\space \\space \\space Elo = 1300 + 16.2\n\\end{aligned}","pinned":false,"hidden":false,"mode":"tex"},{"id":1128,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"viewof year_slider = Inputs.range([1947, 2015], {label: \"Year\", step: 1, value: 1947})","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"viewof limit_slider = Inputs.range([0, 100], {label: \"Quantity\", step: 5, value: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"### Graph","pinned":false,"hidden":false,"mode":"md"},{"id":540,"value":"Plot.auto(data, {\n x: \"Peak Elo for Season\",\n y: \"Team\",\n color: \"Franchise\",\n size: \"Peak Elo for Season\",\n mark: \"dot\"\n}).plot({\n color: { legend: true },\n insetLeft: 0,\n marginLeft: 200,\n width: 1000,\n height: 500,\n x: {domain: [1700, 1860], grid: true}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"## Top Franchises by an Average Season's Elo\n### Variable Sliders","pinned":false,"hidden":false,"mode":"md"},{"id":1046,"value":"viewof franchise_slider = Inputs.range([1, 30], {label: \"Franchise Count\", step: 1, value: 5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"### Multi-Series Line Chart","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"### Box and Whiskers Plot","pinned":false,"hidden":false,"mode":"md"},{"id":1170,"value":"Plot.plot({\n width: 1000, // Adjust the width of the chart\n height: 500, // Adjust the height of the chart\n marginLeft: 150,\n fill: d => colorScale(d[0]),\n jitter: 4,\n marks: [\n Plot.boxX(data1, {x: \"Elo\", y: \"Franchise\", sort: {y: \"x\"}})\n ],\n\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":963,"value":"nbaallelo = await FileAttachment(\"nbaallelo@8.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"SELECT YEAR(Season) AS Season, Team, MAX(Elo) AS \"Peak Elo for Season\", Franchise\nFROM nbaallelo\nWHERE YEAR(Season) >= ${year_slider}\nGROUP BY Team, YEAR(Season), Franchise\nORDER BY MAX(Elo) DESC\nLIMIT ${limit_slider}\n","pinned":false,"hidden":false,"mode":"sql","output":"data","database":"nbaallelo@8.csv"},{"id":859,"value":"WITH TopFranchises AS (\n SELECT Franchise, AVG(Elo) AS AverageElo\n FROM nbaallelo\n GROUP BY Franchise\n ORDER BY AverageElo DESC\n LIMIT ${franchise_slider}\n), RankedData AS (\n SELECT YEAR(Season) AS Season, Team, AVG(Elo) AS Elo, Franchise,\n ROW_NUMBER() OVER (PARTITION BY Franchise ORDER BY YEAR(Season) DESC) AS RowNum\n FROM nbaallelo\n WHERE Franchise IN (SELECT Franchise FROM TopFranchises)\n AND YEAR(Season) >= ${year_slider}\n GROUP BY Team, YEAR(Season), Franchise\n)\nSELECT Season, Team, Elo, Franchise, RowNum\nFROM RankedData\nWHERE RowNum <= 100;\n","pinned":false,"hidden":false,"mode":"sql","output":"data1","database":"nbaallelo@8.csv"},{"id":1029,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}