31:T652,md`# NBA Roster Continuity vs Winning The NBA offseason has become almost as captivating as the actual games. Teams attempt to improve via the draft, through trades and by signing free agents. General Managers have to decide which players to add and subtract from their team with the goal of winning more games, and ultimately a championship. I have often heard the term **Continuity**, essentially keeping last year's team together, mentioned as a goal of successful teams. This visualization takes a look at the relationship between continuity and the percentage of games a team wins over the course of NBA history.

As the visualization shows, there is a correlation between continuity and winning. As a native of Los Angeles I am excited about this upcoming season. The **Lakers** already had **LeBron James** and traded away a young core of players for all-world big man, **Anthony Davis**. I am also concerned. At this point the team is returning only two players, so their continuity is 13%, or 2 out of 15. Most NBA championship teams have a much higher percentage, with the lowest ever being 47% by the **Portland Trailblazers** in 1977 and most champs being above 75%. Based on the historical statistics *Vegas Future Odds* may have it wrong. |Team|Odds| |:-:|:-:| |Los Angeles Lakers|3:1| |Los Angeles Clippers|3:1| |Milwakee Bucks|12:1| |Philadelphia 76ers|12:1| |Toronto Raptors|12:1| |Golden State Warriors|15:1| |Houston Rockets|15:1| `32:T1731,{ svg.selectAll('*').remove() var dataset = data.filter(el => { if(team === 'ALL') { return el } else { return team === el.team } }).filter(el => { if(year === 'ALL') { return el } else { return year === el.year } }).filter(el => { return champsOnly ? el.champ : true }) var area = 3750 var axis = svg.append('g').attr('class', 'g-axis') axis.append('g').attr('class', 'axis axis--x') axis.append('g').attr('class', 'axis axis--y') var axisX = d3 .axisBottom(xScale) .tickFormat(d3.format('0')) .ticks(10) .tickSize(-height) .tickPadding(margin * .5) svg .select('.axis--x') .call(axisX) .attr('transform', `translate(${margin}, ${height})`) .call(g => g.append('text') .attr('x', width - margin * 2) .attr('y', 10) .style('font-weight', '600') .style('font-size', '12px') .text('Roster Continuity %')) var axisY = d3 .axisLeft(yScale) .tickFormat(d3.format('0')) .ticks(10) .tickSize(-width) .tickPadding(margin * 0.5) svg .select('.axis--y') .call(axisY) .attr('transform', `translate(${margin}, ${margin})`) .call(g => g.append('text') .attr('x', 90) .attr('y', 5) .style('font-weight', '600') .style('font-size', '12px') .text('Team Winning %')) var vis = svg .append('g') .attr('class', 'g-vis') .attr('transform', `translate(${margin}, ${margin})`) var dot = vis .selectAll('.dot') .data(dataset) .join(enter => { var p = enter.append('g') p.attr('transform', d => { var x = xScale(d.cont) var y = yScale(d.win) return `translate(${x}, ${y})` }) p.append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', 1) return p }) .attr('class', 'dot') dot .transition() .duration(duration) .ease(ease) .attr('transform', d => { var x = xScale(d.cont) var y = yScale(d.win) return `translate(${x}, ${y})` }) dot .select('circle') .transition() .duration(duration) .ease(ease) .attr('r', 4) .attr('fill', d => d.champ ? '#333' :cScale(d.ratio)) .attr('stroke', d => d.champ ? '#333' : d3.rgb(cScale(d.ratio)).darker(.5)) vis.append('line').attr('class', 'linear') vis.append('path').attr('class', 'regression') var pairs = dataset.map(d => [d.cont, d.win]) var regression = ss.linearRegression(pairs) var t = 20 var regressionLine = d3.range(t).map(d => { var x = d / (t - 1) * contExtent[1] var y = regression.m * x + regression.b return {x, y} }) var l = length(line(regressionLine)) vis .select('.regression') .datum(regressionLine) .attr('transform', `translate(${margin}, ${margin})`) .attr('stroke-dasharray', `0, ${l}`) .transition() .ease(ease) .duration(duration) .attr('d', line) .attr("stroke-dasharray", `${10},${10}`) var cellData = d3.voronoi() .x(d => xScale(d.cont)) .y(d => yScale(d.win)) .extent([[-1, -1], [width - margin, height - margin]]) .polygons(dataset) var vor = svg.append('g').attr('class', 'g-vor') vor.attr('transform', `translate(${margin}, ${margin})`) var text = vor .selectAll('text.bg') .data(cellData.filter(d => d), d => { if(d) return `${d.data.year} ${d.data.team}` return null }) .join(enter => { var t = enter.append('text').attr('class', 'bg') t.text(d => `${d.data.year} ${d.data.team}`) .attr('transform', d => { var [x, y] = d3.polygonCentroid(d) return `translate(${x}, ${y})` }) .style('opacity', 0) return t }) .transition() .duration(duration) .ease(ease) .attr('transform', d => { var [x ,y] = d3.polygonCentroid(d) return `translate(${x}, ${y})` }) .each((d, i, n) => { var t = d3.select(n[i]) var x = xScale(d.data.cont) var y = yScale(d.data.win) var [cx, cy] = d3.polygonCentroid(d) var angle = Math.round(Math.atan2(cy - y, cx - x) / Math.PI * 2) t.call(angle === 0 ? orient.right : angle === -1 ? orient.top : angle === 1 ? orient.bottom : orient.left) }) .style('opacity', d => d3.polygonArea(d) > area ? 1 : 0) vor .selectAll('text.fg') .data(cellData.filter(d => d), d => { if(d) return `${d.data.year} ${d.data.team}` return null }) .join(enter => { var t = enter.append('text').attr('class', 'fg') t.text(d => `${d.data.year} ${d.data.team}`) .attr('transform', d => { var [x, y] = d3.polygonCentroid(d) return `translate(${x}, ${y})` }) .style('opacity', 0) return t }) .transition() .duration(duration) .ease(ease) .attr('transform', d => { var [x, y] = d3.polygonCentroid(d) return `translate(${x}, ${y})` }) .each((d, i, n) => { var t = d3.select(n[i]) var x = xScale(d.data.cont) var y = yScale(d.data.win) var [cx, cy] = d3.polygonCentroid(d); var angle = Math.round(Math.atan2(cy - y, cx - x) / Math.PI * 2) t.call(angle === 0 ? orient.right : angle === -1 ? orient.top : angle === 1 ? orient.bottom : orient.left) }) .style('opacity', d => d3.polygonArea(d) > area ? 1 : 0) var path = vor .selectAll('path') .data(cellData.filter(d => d), (d, i) => { if (d) return `${d.data.year} ${d.data.team}` return null }) .join('path') .style('opacity', 0) .transition() .duration(duration) .ease(ease) .attr('d', d => `M${d3.polygonCentroid(d)}L${[xScale(d.data.cont), yScale(d.data.win)]}`) .style('opacity', d => d3.polygonArea(d) > area ? 1 : 0) return svg.node() }33:T8af,champs = [ { year: '2019', team: 'TOR' }, { year: '2018', team: 'GSW' }, { year: '2017', team: 'GSW' }, { year: '2016', team: 'CLE' }, { year: '2015', team: 'GSW' }, { year: '2014', team: 'SAS' }, { year: '2013', team: 'MIA' }, { year: '2012', team: 'MIA' }, { year: '2011', team: 'DAL' }, { year: '2010', team: 'LAL' }, { year: '2009', team: 'LAL' }, { year: '2008', team: 'BOS' }, { year: '2007', team: 'SAS' }, { year: '2006', team: 'MIA' }, { year: '2005', team: 'SAS' }, { year: '2004', team: 'DET' }, { year: '2003', team: 'SAS' }, { year: '2002', team: 'LAL' }, { year: '2001', team: 'LAL' }, { year: '2000', team: 'LAL' }, { year: '1999', team: 'SAS' }, { year: '1998', team: 'CHI' }, { year: '1997', team: 'CHI' }, { year: '1996', team: 'CHI' }, { year: '1995', team: 'HOU' }, { year: '1994', team: 'HOU' }, { year: '1993', team: 'CHI' }, { year: '1992', team: 'CHI' }, { year: '1991', team: 'CHI' }, { year: '1990', team: 'DET' }, { year: '1989', team: 'DET' }, { year: '1988', team: 'LAL' }, { year: '1987', team: 'LAL' }, { year: '1986', team: 'BOS' }, { year: '1985', team: 'LAL' }, { year: '1984', team: 'BOS' }, { year: '1983', team: 'PHI' }, { year: '1982', team: 'LAL' }, { year: '1981', team: 'BOS' }, { year: '1980', team: 'LAL' }, { year: '1979', team: 'OKC' }, { year: '1978', team: 'WAS' }, { year: '1977', team: 'POR' }, { year: '1976', team: 'BOS' }, { year: '1975', team: 'GSW' }, { year: '1974', team: 'BOS' }, { year: '1973', team: 'NYK' }, { year: '1972', team: 'LAL' }, { year: '1971', team: 'MIL' }, { year: '1970', team: 'NYK' }, { year: '1969', team: 'BOS' }, { year: '1968', team: 'BOS' }, { year: '1967', team: 'PHI' }, { year: '1966', team: 'BOS' }, { year: '1965', team: 'BOS' }, { year: '1964', team: 'BOS' }, { year: '1963', team: 'BOS' }, { year: '1962', team: 'BOS' }, { year: '1961', team: 'BOS' }, { year: '1960', team: 'BOS' }, { year: '1959', team: 'BOS' }, { year: '1958', team: 'ATL' }, { year: '1957', team: 'BOS' }, { year: '1956', team: 'PHI' }, { year: '1955', team: 'GSW' }, { year: '1954', team: 'LAL' }, { year: '1953', team: 'LAL' } ] 34:[] 2f:{"title":"NBA Roster Continuity vs Winning","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof year = select({\n title: 'Year',\n options: years,\n value: 'ALL'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"viewof team = select({\n title: 'Team',\n options: teams,\n value: 'ALL'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"viewof color = select({\n title: 'Color',\n options: colors,\n value: 'Spectral'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"viewof champsOnly = checkbox({\n options: [{label: 'Champions Only', value: true}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"css`\nbody {\n font-family: Helvetica, Arial, san-serif;\n user-select: none;\n}\nsvg {\n border: 1px solid #ccc;\n padding: 5px;\n}\nsvg text {\n fill: #000;\n font-size: 10px;\n}\n.dot circle {\n opacity: .75;\n stroke-opacity: .75;\n z-index: 10;\n}\n.regression {\n stroke: #808080;\n stroke-width: 2px;\n opacity: .5;\n}\nselect {\n font-weight: 600;\n font-size: 14px;\n padding: 2px;\n outline: 0;\n}\n.axis--y .tick:nth-child(3) {\n display: none;\n}\n.axis--y .tick:nth-child(2) {\n display: none;\n}\n.axis path {\n display: none;\n}\n.axis text {\n fill: #333;\n}\n.axis line {\n stroke: #ddd;\n stroke-dasharray: 2px 4px;\n stroke-opacity: 1;\n}\n.g-vor path {\n fill: none;\n stroke: #bbb;\n}\n.g-vor .bg {\n fill: none;\n stroke-width: 3px;\n stroke: #fff;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"svg = d3.create('svg').attr('width', width + margin * 2).attr('height', height + margin * 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"margin = 40","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"duration = 2500","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"ease = d3.easeQuadOut","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"line = d3\n .line()\n .x(d => xScale(d.x))\n .y(d => yScale(d.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"winExtent = d3.extent(data, d => d.win)","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"contExtent = d3.extent(data, d => d.cont)","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"ratioExtent = d3.extent(data, d => d.ratio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"ratioMedian = d3.median(data, d => d.ratio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"xScale = d3\n .scaleLinear()\n .domain(contExtent)\n .range([margin, width - margin])","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"yScale = d3\n .scaleLinear()\n .domain([0, 100])\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"cScale = d3\n .scaleDiverging()\n .domain([ratioExtent[0], ratioMedian, ratioExtent[1]])\n .interpolator(d3[`interpolate${color}`])","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"function length(path) {\n return d3.create(\"svg:path\").attr(\"d\", path).node().getTotalLength();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"orient = ({\n top: text => text.attr(\"text-anchor\", \"middle\").attr(\"y\", -6),\n right: text => text.attr(\"text-anchor\", \"start\").attr(\"x\", 6).attr('y', 6),\n bottom: text => text.attr(\"text-anchor\", \"middle\").attr(\"y\", 12),\n left: text => text.attr(\"text-anchor\", \"end\").attr(\"x\", -6).attr('y', 6)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"colors = ['BrBG', 'RdYlGn', 'Spectral', 'RdGy', 'RdBu', 'PiYG', 'PRGn']","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"teams = {\n var teams = [\"ALL\"]\n data.forEach(el => {\n if(!teams.includes(el.team)) {\n teams.push(el.team)\n }\n })\n return teams\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"years = {\n var years = ['ALL']\n data.forEach(el => {\n if(!years.includes(el.year)) {\n years.push(el.year)\n }\n })\n return years\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"data = {\n var url = 'https://gist.githubusercontent.com/benjaminadk/588ab2fb9127700186c51c44d53995f6/raw/94dea1c503838245f7052a3348a9bfcc870de7a4/continuity.json'\n var raw = await d3.json(url)\n return raw.map(el => {\n var ratio = Math.round((el.cont / el.win) * 100) / 100\n var curChamp = champs.find(c => c.year === el.year)\n var champ = curChamp.team === el.team && curChamp.year === el.year\n return { ...el, ratio, champ}\n })\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"css = (...args) => {\n const style = interpolate(...args)\n return html`\n

CSS

\n${md`\n~~~css\n${style}\n~~~\n`}\n

\n\n\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"interpolate = (strings, ...interpolations) => {\n let s = ''\n for (let i = 0; i < strings.length; i++) {\n s += strings[i]\n if (i < interpolations.length) {\n s += String(interpolations[i])\n }\n }\n return s\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"ss = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"import {select,checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}