31:T139d,{ // replay; const svg = d3.select(DOM.svg(width, height)); const bounds = svg .append("g") .attr( "transform", `translate(${dimensions.margin.left}, ${dimensions.margin.top})` ); // const data = playerCum.filter(d => playerCareer.includes(d.player)); const yScale = d3 .scaleLinear() .domain([ 0, d3.max(playerCum, (d) => d3.max(d.data, (dd) => dd.cumAcutalPoints)) ]) .range([dimensions.boundedHeight, 0]) .nice(); const xScale = d3 .scaleLinear() .domain([0, d3.max(playerCum, (d) => d3.max(d.data, (dd) => dd.cumGP))]) .range([0, dimensions.boundedWidth]) .nice(); const xAxisGenerator = d3.axisBottom().scale(xScale); const yAxisGenerator = d3.axisLeft().scale(yScale); let lineGenerator = d3 .line() .x((d) => xScale(d.cumGP)) .y((d) => yScale(d.cumPoints)); const linesTest = bounds.append("g"); linesTest .selectAll("line") .data(playerCum) .enter() .append("line") .attr("x1", (d, i) => { console.log(yScale(1000)); return xScale(i * 100); }) .attr("x2", (d, i) => xScale(i * 100)) // .attr("y1", 10) .attr("y2", yScale(1000)) .attr("fill", "none") .attr("stroke", "deeppink") .attr("stoke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-dasharray", "10 10") .attr("stroke-opacity", 0.8); // Draw data // const lines = bounds.append("g"); // lines // .selectAll(".line") // .data(playerCum) // .enter() // .append("path") // .attr("d", (d) => lineGenerator(d.data)) // .style("fill", "none") // .attr("class", "lines") // .style("stroke", (d) => color1(d.player)) // .attr("stroke-opacity", (d) => { // return highlights.includes(d.player) ? 1 : 0.1; // }) // .style("stroke-width", 2) // .style("stroke-linejoin", "round"); // .on("mouseenter", mouseEnter) // .on("mouseout", mouseOut); // console.log(bounds); // // Draw peripherals const xAxis = bounds .append("g") .attr("class", "x-axis") .call(xAxisGenerator) .style("transform", `translateY(${dimensions.boundedHeight}px)`) .style("opacity", 0.5) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", 0) .attr("y", 30) .attr("fill", "black") .attr("text-anchor", "start") .text("Games Played") ); const yAxis = bounds .append("g") .call(yAxisGenerator) .call((g) => g.select(".domain").remove()) .style("opacity", 0.5) .call((g) => g .select(".tick:last-of-type text") .clone() // .append("text") .attr("x", 5) // .attr("y", dimensions.margin.top + 30) .attr("fill", "black") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Adj. Points") ); // bounds.append("g").call(grid); // set initial domain for xAxis // xScale.domain([0, yDomGames]); // add label and circle const playerLabel = bounds .selectAll(".label") .data(playerCum) .enter() .append("g") .attr("transform", (d) => { return `translate(${xScale(last(d.data).cumGP)}, ${yScale( last(d.data).cumPoints )})`; }) .attr("class", "names") .attr("opacity", (d) => { return highlights.includes(d.player) ? 1 : 0.1; }); // .on("mouseenter", mouseEnter) // .on("mouseout", mouseOut); const dots = playerLabel .append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", (d) => d.colour); const playerName = playerLabel .append("text") .attr("x", 10) .attr("y", 5) .style("font-size", ".8em") .attr("fill", (d) => d.colour) .text((d) => d.player); const playerGoals = playerLabel .append("text") .attr("x", 10) .attr("y", 18) .style("font-size", ".8em") .attr("fill", (d) => d.colour) .text((d) => last(d.data).cumgoals); // function mouseEnter(datum) { // // console.log(datum); // // let out = []; // // out.push(datum); // // console.log(out); // //UPDATE FIRST CHART // d3.selectAll(".lines").style('stroke-opacity', e => { // return datum.player === e.player ? 1 : .1; // }); // d3.selectAll(".names").style('opacity', e => { // // console.log(e); // return datum.player === e.player ? 1 : .1; // }); // } // function mouseOut(datum) { // //UPDATE FIRST CHART // d3.selectAll(".lines").style("stroke-opacity", d => { // // console.log(d.player, highlights.includes(d.player)); // if (highlights.includes(d.player)) { // return 1; // } else { // return .1; // } // }); // d3.selectAll(".names").style('opacity', e => { // // console.log(e); // return highlights.includes(e.player) ? 1 : .1; // }); // } return svg.node(); }32:Td66,{ const margin = { top: 30, right: 20, bottom: 70, left: 40 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const data = tp .sort((a, b) => +b["Adj Points"] - +a["Adj Points"]) .slice(0, 50); // const color = d3.scaleOrdinal(d3.range([...new Set(data.map(d => d.Name))]), [ // '#a6cee3', // '#1f78b4', // '#b2df8a', // '#33a02c', // '#fb9a99', // '#e31a1c', // '#fdbf6f', // '#ff7f00', // '#cab2d6', // '#6a3d9a', // '#ffff99', // '#b15928' // ]); const tip = d3Tip() .attr('class', "d3-tip") .style("color", "white") .style("background-color", "black") .style("padding", "6px") .style("border-radius", "4px") .style("font-size", "12px") // .offset([-10, 0]) .html(function(d) { // console.log(d.points); return `${d.Name}
${d["Adj Points"]}
${d.Season}
Games ${d.GP}`; }); svg.call(tip); // const colorScale = d3 // .scaleOrdinal() // .domain(data.map(d => d.Name)) // .range( // d3.quantize( // t => d3.interpolateSpectral(t * 0.8 + 0.1), // [...new Set(data.map(d => d.Name))].length // ) // // .reverse() // ); const x = d3 .scaleBand() .domain(d3.range(data.length)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => +d["Adj Points"])]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat(i => data[i].Name) .tickSizeOuter(0) ) .call(g => g.select(".domain").remove()) .style('opacity', .5); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, data.format)) .call(g => g.select(".domain").remove()) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) // .attr("fill", d => color(d)) .attr("text-anchor", "start") .text("Adj. Points") ) .style('opacity', .5); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d["Adj Points"])) .attr("fill", d => color1(d.Name)) .attr("height", d => y(0) - y(d["Adj Points"])) .attr("width", x.bandwidth()) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }); svg .append("g") .call(xAxis) .selectAll("text") .attr("transform", "rotate(40)") .attr("x", 3) .attr("y", 6) .style("text-anchor", "start"); svg .append("g") .call(yAxis) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Adj. Points") ); return svg.node(); }33:Tcfa,{ const margin = { top: 30, right: 20, bottom: 70, left: 40 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const data = tp.sort((a, b) => +b.PPG - +a.PPG).slice(0, 30); // const color = d3.scaleOrdinal(d3.range([...new Set(data.map(d => d.Name))]), [ // '#a6cee3', // '#1f78b4', // '#b2df8a', // '#33a02c', // '#fb9a99', // '#e31a1c', // '#fdbf6f', // '#ff7f00', // '#cab2d6', // '#6a3d9a', // '#ffff99', // '#b15928' // ]); const tip = d3Tip() .attr('class', "d3-tip") .style("color", "white") .style("background-color", "black") .style("padding", "6px") .style("border-radius", "4px") .style("font-size", "12px") // .offset([-10, 0]) .html(function(d) { // console.log(d.points); return `${d.Name}
${d.PPG}
${d.Season}
Games ${d.GP}`; }); svg.call(tip); const colorScale = d3 .scaleOrdinal() .domain(data.map(d => d.Name)) .range( d3.quantize( t => d3.interpolateSpectral(t * 0.8 + 0.1), [...new Set(data.map(d => d.Name))].length ) // .reverse() ); const x = d3 .scaleBand() .domain(d3.range(data.length)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => +d.PPG)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat(i => data[i].Name) .tickSizeOuter(0) ) .call(g => g.select(".domain").remove()) .style('opacity', .5); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, data.format)) .call(g => g.select(".domain").remove()) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) // .attr("fill", d => color(d)) .attr("text-anchor", "start") .text("Adj. Points") ) .style('opacity', .5); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d.PPG)) .attr("fill", d => color1(d.Name)) .attr("height", d => y(0) - y(d.PPG)) .attr("width", x.bandwidth()) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }); svg .append("g") .call(xAxis) .selectAll("text") .attr("transform", "rotate(40)") .attr("x", 3) .attr("y", 6) .style("text-anchor", "start"); svg .append("g") .call(yAxis) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("PPG") ); return svg.node(); }34:Tc59,{ const margin = { top: 30, right: 20, bottom: 70, left: 40 }; const height = 400; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const data = tp .filter(d => +d.Age === +age) .sort((a, b) => b["Adj Points"] - a["Adj Points"]) .slice(0, 30); const tip = d3Tip() .attr('class', "d3-tip") .style("color", "white") .style("background-color", "black") .style("padding", "6px") .style("border-radius", "4px") .style("font-size", "12px") // .offset([-10, 0]) .html(function(d) { // console.log(d.points); return `${d.Name}
${d["Adj.PTS"]}
${d.Season}
Games ${d.GP}`; }); svg.call(tip); // const colorScale = d3 // .scaleOrdinal() // .domain(data.map(d => d.Name)) // .range( // d3.quantize( // t => d3.interpolateSpectral(t * 0.8 + 0.1), // [...new Set(data.map(d => d.Name))].length // ) // // .reverse() // ); const x = d3 .scaleBand() .domain(d3.range(data.length)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => +d["Adj.PTS"])]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat(i => data[i].Name) .tickSizeOuter(0) ) .call(g => g.select(".domain").remove()) .style('opacity', .5); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, data.format)) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) // .attr("fill", d => color(d)) .attr("text-anchor", "start") .text("Adj. Points") ) .call(g => g.select(".domain").remove()) .style('opacity', .5); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d["Adj.PTS"])) .attr("fill", d => color1(d.Name)) .attr("height", d => y(0) - y(d["Adj.PTS"])) .attr("width", x.bandwidth()) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }); svg .append("g") .call(xAxis) .selectAll("text") .attr("transform", "rotate(40)") .attr("x", 3) .attr("y", 6) .style("text-anchor", "start"); svg .append("g") .call(yAxis) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Adj. Points") ); return svg.node(); }35:Td7a,{ const margin = { top: 30, right: 20, bottom: 70, left: 40 }; const height = 400; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const data = tp .filter(d => +d.Age === +age) .sort((a, b) => b["PPG"] - a["PPG"]) .slice(0, 30); // const color = d3.s scaleOrdinal(d3.range([...new Set(data.map(d => d.Name))]), [ // '#a6cee3', // '#1f78b4', // '#b2df8a', // '#33a02c', // '#fb9a99', // '#e31a1c', // '#fdbf6f', // '#ff7f00', // '#cab2d6', // '#6a3d9a', // '#ffff99', // '#b15928' // ]); const tip = d3Tip() .attr('class', "d3-tip") .style("color", "white") .style("background-color", "black") .style("padding", "6px") .style("border-radius", "4px") .style("font-size", "12px") // .offset([-10, 0]) .html(function(d) { // console.log(d.points); return `${d.Name}
${d.PPG}
${d.Season}
Games ${d.GP}`; }); svg.call(tip); // const colorScale = d3 // .scaleOrdinal() // .domain(data.map(d => d.Name)) // .range( // d3.quantize( // t => d3.interpolateSpectral(t * 0.8 + 0.1), // [...new Set(data.map(d => d.Name))].length // ) // // .reverse() // ); const x = d3 .scaleBand() .domain(d3.range(data.length)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(data, d => +d.PPG)]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat(i => data[i].Name) .tickSizeOuter(0) ) .call(g => g.select(".domain").remove()) .style('opacity', .5); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, data.format)) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) // .attr("fill", d => color(d)) .attr("text-anchor", "start") .text("Adj. Points") ) .call(g => g.select(".domain").remove()) .style('opacity', .5); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d.PPG)) .attr("fill", d => color1(d.Name)) .attr("height", d => y(0) - y(d.PPG)) .attr("width", x.bandwidth()) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }); svg .append("g") .call(xAxis) .selectAll("text") .attr("transform", "rotate(40)") .attr("x", 3) .attr("y", 6) .style("text-anchor", "start"); svg .append("g") .call(yAxis) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("PPG") ); return svg.node(); }36:Td67,{ const margin = { top: 30, right: 20, bottom: 70, left: 40 }; const height = 400; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const data = careerStats.slice(0., 30); // tp // .filter(d => +d.Age === +age) // .sort((a, b) => b["PPG"] - a["PPG"]); // const color = d3.s scaleOrdinal(d3.range([...new Set(data.map(d => d.Name))]), [ // '#a6cee3', // '#1f78b4', // '#b2df8a', // '#33a02c', // '#fb9a99', // '#e31a1c', // '#fdbf6f', // '#ff7f00', // '#cab2d6', // '#6a3d9a', // '#ffff99', // '#b15928' // ]); const tip = d3Tip() .attr('class', "d3-tip") .style("color", "white") .style("background-color", "black") .style("padding", "6px") .style("border-radius", "4px") .style("font-size", "12px") // .offset([-10, 0]) .html(function(d) { // console.log(d.points); return `${d[0]}
${d[1]}`; }); svg.call(tip); // const colorScale = d3 // .scaleOrdinal() // .domain(data.map(d => d.Name)) // .range( // d3.quantize( // t => d3.interpolateSpectral(t * 0.8 + 0.1), // [...new Set(data.map(d => d.Name))].length // ) // // .reverse() // ); const x = d3 .scaleBand() .domain(d3.range(data.length)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(careerStats, d => d[1])]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat(i => data[i][0]) .tickSizeOuter(0) ) .call(g => g.select(".domain").remove()) .style('opacity', .5); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, data.format)) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) // .attr("fill", d => color(d)) .attr("text-anchor", "start") .text("Adj. Points") ) .call(g => g.select(".domain").remove()) .style('opacity', .5); svg .append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d[1])) .attr("fill", d => color1(d[0])) .attr("height", d => y(0) - y(d[1])) .attr("width", x.bandwidth()) .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1); }); svg .append("g") .call(xAxis) .selectAll("text") .attr("transform", "rotate(40)") .attr("x", 3) .attr("y", 6) .style("text-anchor", "start"); svg .append("g") .call(yAxis) .call(g => g .append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("PPG") ); return svg.node(); }37:T84c,transition = { const lines = d3.selectAll(".lines"); const playerLabel = d3.selectAll(".names"); const xScale = d3 .scaleLinear() .domain([0, d3.max(playerCum, d => d3.max(d.data, dd => dd.cumGP))]) .range([0, dimensions.boundedWidth]) .nice(); const yScale = d3 .scaleLinear() .domain([ 0, d3.max(playerCum, d => d3.max(d.data, dd => dd.cumAcutalPoints)) ]) .range([dimensions.boundedHeight, 0]) .nice(); if (r === "Actual") { const newline = d3 .line() .x(d => xScale(d.cumGP)) .y(d => { // console.log(d.cumAcutalPoints, yScale(+d.cumAcutalPoints)); return yScale(d.cumAcutalPoints); }); // transition lines lines .transition() .duration(1200) .ease(d3.easeLinear) .attr("d", d => { return newline(d.data); }); // transition dots playerLabel // .selectAll("g") .transition() .duration(1200) .ease(d3.easeLinear) .attr("transform", d => { return `translate(${xScale(last(d.data).cumGP)}, ${yScale( last(d.data).cumAcutalPoints )})`; }); } else if (r === "Adjusted") { const lineGenerator = d3 .line() .x(d => xScale(d.cumGP)) .y(d => yScale(d.cumPoints)); // playerLabel // .selectAll("g") // lines // .selectAll("path") // .transition() // .duration(1200) // .attr("d", d => lineGenerator(d.data)); lines .transition() .duration(1200) .ease(d3.easeLinear) .attr("d", d => { return lineGenerator(d.data); }); // // .attr("transform", d => { // return `translate(${xScale(last(d.data).cumGP)}, ${yScale( // last(d.data).cumPoints // )})`; // }); // transition dots playerLabel // .selectAll("g") .transition() .duration(1200) .ease(d3.easeLinear) .ease(d3.easeLinear) .attr("transform", d => { return `translate(${xScale(last(d.data).cumGP)}, ${yScale( last(d.data).cumPoints )})`; }); } }38:[{"id":"98f5a2709e92cfc87060a60ba80701efd871476941b13a2a0013cc04a97a4e06603563b6fa748e5b2cb5ac1e98e362ecf1a94092278b69f04e452c5efa7605c9","href":"https://static.observableusercontent.com/files/98f5a2709e92cfc87060a60ba80701efd871476941b13a2a0013cc04a97a4e06603563b6fa748e5b2cb5ac1e98e362ecf1a94092278b69f04e452c5efa7605c9","name":"unnamed.png","type":"image/png","lastModified":1589342502054.158,"size":218452},{"id":"6148f83477cd3ac7e737612636a2463509830ddbb0d8bfc9416b94942e665e28c873b05186df25ff57ead6f2f964fa60523b2c6ca806185a7c4c144365e9c543","href":"https://static.observableusercontent.com/files/6148f83477cd3ac7e737612636a2463509830ddbb0d8bfc9416b94942e665e28c873b05186df25ff57ead6f2f964fa60523b2c6ca806185a7c4c144365e9c543","name":"allstats@1.csv","type":"text/csv","lastModified":1590113420671.322,"size":130805},{"id":"e10d8e4a632ad2ed2b1a84c3aaa9807e667a5e38ff6b3ce51d6d541bafcf8324bdfd4c7306365203af492e8e8eb1a674eedb2f3363cd2564be5d3b83b9c61de3","href":"https://static.observableusercontent.com/files/e10d8e4a632ad2ed2b1a84c3aaa9807e667a5e38ff6b3ce51d6d541bafcf8324bdfd4c7306365203af492e8e8eb1a674eedb2f3363cd2564be5d3b83b9c61de3","name":"allstatsAll@3.csv","type":"text/csv","lastModified":1589511117860.854,"size":126321},{"id":"542380f402840168b55257e0fc49eee70d2bb4ecde68f90d7430f77e229a5b21d67583b8f07289d7e7c24addfbf72fe798f8f4e7fa8879fcebd17d0411b6ac67","href":"https://static.observableusercontent.com/files/542380f402840168b55257e0fc49eee70d2bb4ecde68f90d7430f77e229a5b21d67583b8f07289d7e7c24addfbf72fe798f8f4e7fa8879fcebd17d0411b6ac67","name":"allstatsCurrent.csv","type":"text/csv","lastModified":1590077007148.081,"size":2102929},{"id":"4a3ca7cd88d621bef43e70872f9627a1c07101f5a72ffb42f717b4d68eaa2b9615b61e698b5c2983c5bd68981c1a47762993674555a27945e801ff4919a2d802","href":"https://static.observableusercontent.com/files/4a3ca7cd88d621bef43e70872f9627a1c07101f5a72ffb42f717b4d68eaa2b9615b61e698b5c2983c5bd68981c1a47762993674555a27945e801ff4919a2d802","name":"output.json","type":"application/json","lastModified":1589305119581.996,"size":61889}] 2f:{"title":"NHL era adjusted stats","cells":[{"id":0,"value":"html`

${\"NHL era adjusted stats\"}

${\"A comparison of some of the all-time elite players\"}

\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`\n\nThis analysis uses [Hockey Reference's adjusted Statistics](https://www.hockey-reference.com/about/adjusted_stats.html), which allows us to more fairly compare players from different scoring eras.\n\nWe're also going to limit our analysis to post WW2 (actually I included Maurice Richard too, who started in 1943). Why exclude season's prior to 1945? Because, while some of the greats played in the 1920s, the game was vastly different. It also seems only a few players did most of the scoring and the adjustment really inflates their stats. \n\n*That said, **Howie Morenz** put together the best era adjusted season (1927-28) in NHL history, with **190 points.*** 😮\n\n### Career adjusted points\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2222,"value":"viewof highlights = checkbox({\n title: \"Highlights\",\n description: \"Make these players bright.\",\n options: playerCareer,\n value: [\n \"Eric Lindros\",\n \"Wayne Gretzky\",\n \"Connor McDavid\",\n \"Alex Ovechkin\",\n \"Sidney Crosby\",\n \"Mario Lemieux\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2341,"value":"viewof r = radio({\n options: ['Adjusted', 'Actual'],\n value: 'Adjusted'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2489,"value":"playerCum","pinned":true,"hidden":false,"mode":"ojs"},{"id":2076,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"md`\n### The top 50 seasons, total adjusted points\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1831,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"md`\nAmazingly, the top 9 seasons by total points were authored by only 2 players - Wayne Gretzky and Mario Lemieux. While some point to Gretzky's ridiculous career stats as a by-product of him playing in the high scoring '80s, he still dominates when adjusting for that.\n\nLemieux is really the only other player you can consider Gretzky's peer, and we can only wonder how the two would have stacked up if Lemieux's career was not plagued by back injuries and cancer.\n\nWe can adjust for shortened seasons due to injury by looking at adjusted points-per-game, and here Lemieux has a slight advantage over Gretzky for the most productive season. Here the separation between these two and everyone else is even more stark, with them monopolizing the top 12 seasons. Amazing.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"md`\n### The top seasons - adjusted points per game\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1626,"value":"md`\n## How do the top modern players stack up?\n\nThis comparison includes every player currently playing. When examined by age and grouped and combined seasons, things start to look more interesting. \n\nSidney Crosby put together the top seasons for a 18 and 19 year old in NHL history. Connor McDavid is in the mix too and Leon Draisaitl is putting together one of the best seasons by a 24 year old. \n\nWhat the heck? Bobby Orr, *a defenceman*, put the second most adjusted points for a 21 year old!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"md`\n\n\n### Adjusted points per season, by age`","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"viewof age = select({\n options: Array.from({ length: 22 }, (v, k) => k + 18),\n value: 21,\n description: \"\",\n title: \"Select age\",\n selectStyle: {\n background: 'lightblue'\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1724,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2213,"value":"md`\n\n\n### Adjusted points per game, by age`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1732,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2153,"value":"md`\nHaving one or two great seasons is one thing, but maintaining a high productivity over an entire career is another. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2200,"value":"md`\n\n\n### Career average adjusted points per game\n*Includes players with over 100 games played*\n\n Here, once again, Lemieux and Gretzky stand above the rest, followed by current players, Crosby and McDavid. It will be interesting to see how McDavid fairs as he enters his prime, and if Crosby drops a few positions as he enters the tail end of his career.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1778,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1842,"value":"md`\n## Conclusion\n\nWayne Gretzky and Mario Lemieux and mutants from another sphere, the likes of which we might never see again, but Bobby Orr is right there too. Perhaps the gap between them and the rest has something to do with the difference in the quality of all players today, with the average player being much closer in skill to the best player than they were 30 years ago. It's hard to image a player standing out more than Connor McDavid does today.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1816,"value":"md`\n
\n\n
\n\n
\n\n#### Appendix\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"md`\nAdjusted points by seaason, for all players in study\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2233,"value":"playerCareer = [...new Set(playerCum.map(d => d.player))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2055,"value":"playerCum = {\n const out = [];\n playerG.map(d => {\n const data = d[1].sort((a, b) => +a.Age - +b.Age);\n // console.log(data);\n const cumPoints = d3.cumsum(data, d => d[\"Adj.PTS\"]);\n const cumAcutalPoints = d3.cumsum(data, d => d[\"PTS\"]);\n const cumGP = d3.cumsum(data, d => d[\"GP\"]);\n d[1].forEach((dd, i) => {\n dd.cumPoints = cumPoints[i];\n dd.cumAcutalPoints = cumAcutalPoints[i];\n dd.cumGP = cumGP[i];\n });\n\n d[1].unshift({ cumGP: 0, cumPoints: 0, cumAcutalPoints: 0 });\n out.push({ player: d[0], data: data });\n // out.data.unshift({ cumGP: 0, cumPoints: 0 });\n return d;\n // console.log(d);\n });\n\n return out.filter(d => topAlltime.includes(d.player));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2109,"value":"topAlltime = [\n ...new Set(\n tp\n .sort((a, b) => +b.PPG - +a.PPG)\n .slice(0, 55)\n .map(d => d.Name)\n )\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2411,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":2451,"value":"dimensions","pinned":true,"hidden":false,"mode":"ojs"},{"id":2102,"value":"last = array => array[array.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2038,"value":"cumPoints = d3.cumsum(tp, d => d[\"Adj.PTS\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2044,"value":"playerG = d3.groups(tp, d => d.Name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1066,"value":"color = d3.scaleOrdinal(\n d3.range([...new Set(allraw.map(d => d.Name))]),\n d3.schemeCategory10\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1780,"value":"careerStats = d3\n .rollups(tp, v => d3.mean(v, d => d.PPG), d => d.Name)\n .sort((a, b) => b[1] - a[1])\n .filter(d => careerGP.find(g => g[0] === d[0])[1] > 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2017,"value":"// careerStats.filter(d => careerGP.find(g => g[0] === d[0])[1] > 100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2012,"value":"careerGP = d3\n .rollups(tp, v => d3.sum(v, d => d.GP), d => d.Name)\n .sort((a, b) => b[1] - a[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1004,"value":"xAxis = d3.axisBottom(x).tickFormat((x, i) => (i % 2 === 1 ? x : \"\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"yAxis = d3.axisLeft(y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"title = d => `${d.Name}\\n${d[\"Adj.PTS\"]}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"x = d3\n .scaleBand()\n .domain(bySeason.map(d => d.season))\n .range([0, dimensions.boundedWidth])","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"bySeason.map(d => d.season)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2459,"value":"tp","pinned":true,"hidden":false,"mode":"ojs"},{"id":1737,"value":"color1 = d3.scaleOrdinal(d3.range([...new Set(tp.map(d => d.Name))]), [\n '#a6cee3',\n '#1f78b4',\n '#b2df8a',\n '#33a02c',\n '#fb9a99',\n '#e31a1c',\n '#fdbf6f',\n '#ff7f00',\n '#cab2d6',\n '#6a3d9a',\n '#ffff99',\n '#b15928'\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"yAccessor = d => d[\"Adj.PTS\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(bySeason, d => d3.max(d.data, dd => +dd[\"Adj.PTS\"]))])\n .range([dimensions.boundedHeight, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"html`\n