31:T76f,fullPlusMinusChart = function(plusMinusDataWithPlayersOnCourt,plusMinusData,options){ options = options || {}; const p_margin = options.margin || margin; const height = options.height || 350; const selectedPlayer = options.selectedPlayer || 'All'; const homeTeamColor = options.homeTeamColor || "steelblue"; const awayTeamColor = options.awayTeamColor || "orange"; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const x = d3.scaleTime() .domain(d3.extent(plusMinusData,d => d.time))//[0, 40 * 60 * 1000] .range([margin.left, width - margin.right]) const maxPlusMinus = d3.max(plusMinusData.map(d => Math.abs(d.SCOREMARGIN))); const y = d3.scaleLinear() .domain([-maxPlusMinus,maxPlusMinus]) .range([height - p_margin.bottom, p_margin.top]) // show quarter line for(let i=0; i<4; i++){ svg.append("line") .attr("x1", x(parseTime(`${(i+1)*12}:${0}`))) .attr("x2", x(parseTime(`${(i+1)*12}:${0}`))) .attr("y1", height - p_margin.bottom) .attr("y2", p_margin.top) .style("stroke", "gray") .style("stroke-width", 1) .style("stroke-dasharray", "2,2") } // add graph plusMinusChart(svg,plusMinusDataWithPlayersOnCourt,plusMinusData,options) const colorGradient = d3.scaleLinear() .domain([-maxPlusMinus,0,maxPlusMinus]) .range([awayTeamColor,"grey",homeTeamColor]); const tooltip = new Tooltip(colorGradient); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(plusMinusData)) .join("rect") .attr("x", ([a, b]) => x(a.time)) .attr("height", height) .attr("width", ([a, b]) => x(b.time) - x(a.time)) .on("mouseover", (event, [a]) => tooltip.show(a,x,y)) .on("mouseout", () => tooltip.hide()); svg.append(() => tooltip.node); return svg.node(); }32:T10c0,plusMinusChart = function(svg, plusMinusDataWithPlayersOnCourt, plusMinusData, options) { options = options || {}; const p_margin = options.margin || margin; const height = options.height || 350; const selectedPlayer = options.selectedPlayer || 'All'; const position = options.position || 0; const homeTeamColor = options.homeTeamColor || "steelblue"; const awayTeamColor = options.awayTeamColor || "orange"; const p_homeTeam = options.homeTeam || homeTeam; const p_awayTeam = options.awayTeam || awayTeam; const x = d3.scaleTime() .domain(d3.extent(plusMinusData,d => d.time))//[0, 40 * 60 * 1000] .range([p_margin.left, width - p_margin.right]) const maxPlusMinus = d3.max(plusMinusData.map(d => Math.abs(d.SCOREMARGIN))); const y = d3.scaleLinear() .domain([-maxPlusMinus,maxPlusMinus]) .range([height - p_margin.bottom + position, p_margin.top + position]); const xAxis = g => g .attr("transform", `translate(0,${y(0)})`) .call(d3.axisBottom(x).tickValues([])); const yAxis = g => g .attr("transform", `translate(${p_margin.left},0)`) .call(d3.axisLeft(y)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const colorGradient = d3.scaleLinear() .domain([-maxPlusMinus,0,maxPlusMinus]) .range([awayTeamColor,"grey",homeTeamColor]); const gradient = DOM.uid(); svg .append("linearGradient") .attr("id", gradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", y(colorGradient.domain()[0])) .attr("x2", 0) .attr("y2", y(colorGradient.domain()[2])) .selectAll("stop") .data(d3.ticks(-maxPlusMinus, maxPlusMinus, 30)) .join("stop") .attr("offset", (d,i) => i/29) .attr("stop-color", i => colorGradient(i)); // show quarter line if(false){for(let i=0; i<4; i++){ svg.append("line") .attr("x1", x(parseTime(`${(i+1)*12}:${0}`))) .attr("x2", x(parseTime(`${(i+1)*12}:${0}`))) .attr("y1", height - p_margin.bottom + position) .attr("y2", p_margin.top + position) .style("stroke", "gray") .style("stroke-width", 1) .style("stroke-dasharray", "2,2") }} const line = d3.line() .curve(d3.curveNatural) .x(d => x(d.time)) .y(d => y(d.SCOREMARGIN)) // draw a soft line in background svg.append("path") .attr("class", "line") .datum(plusMinusData) .attr("fill", "none") .attr("stroke", gradient) .attr("opacity",0.1) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line.defined(true)); // draw a full line for the selectedPlayer svg.append("path") .attr("class", "line") .datum(plusMinusDataWithPlayersOnCourt) .attr("fill", "none") .attr("stroke", gradient) .attr("opacity",1) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line.defined((d, i) => {if(selectedPlayer!="All"){ return d.playersOnCourt.includes(selectedPlayer)} else{return true}})); svg.selectAll("circle") .data(plusMinusDataWithPlayersOnCourt) .enter() .append("circle") .attr("r", 4) .attr("opacity",d => {if(selectedPlayer!="All"){ if(d.playersOnCourt.includes(selectedPlayer)){return 1} else{return 0.1} } else{return 1}}) .attr("cx", d => x(d.time)) .attr("cy", d => y(d.SCOREMARGIN)) .attr("fill", function(d){return colorGradient(d.SCOREMARGIN)}) // Show teams name svg.append("text") .attr("x", p_margin.left + 30) .attr("y", y(maxPlusMinus)) .attr("dy", +20) .style("text-anchor", "start") .style('fill', homeTeamColor) .style("font-size", "25px") .text(p_homeTeam.name) .append("rect"); svg.append("text") .attr("x", p_margin.left + 30) .attr("y", y(-maxPlusMinus)) .attr("dy", -10) .style("text-anchor", "start") .style('fill', awayTeamColor) .style("font-size", "25px") .text(p_awayTeam.name); }33:T6a6,class Tooltip { constructor(options){ options = options || {}; this.color = options.color || color; this._time = svg``; this._plusMinus = svg``; this._description = svg``; this.circle = svg``; this.rect = svg``; this.node = svg` ${this.rect} ${this._time} ${this._plusMinus} ${this._description} ${this.circle} `; } show(d,x,y) { this.node.removeAttribute("display"); this.node.setAttribute("transform", `translate(${x(d.time)},${y(d.SCOREMARGIN)})`); this._time.textContent = `x = ${timeFormat(d.time)}`; this._plusMinus.textContent = `y = ${d.SCOREMARGIN}`; let textDesc = d.HOMEDESCRIPTION; if(d.VISITORDESCRIPTION){ textDesc = d.VISITORDESCRIPTION }; this._description.textContent = textDesc; var bbox = this._description.getBBox(); var width = bbox.width; this.rect.setAttribute("fill",this.color(d.SCOREMARGIN)); this.circle.setAttribute("fill",this.color(d.SCOREMARGIN)); if(width>0){ this.rect.setAttribute("width", width+4); this.rect.setAttribute("x",-width/2 -2); this._time.setAttribute("x",-width/2 + width/4); this._plusMinus.setAttribute("x",width/2 - width/4); }; } hide() { this.node.setAttribute("display", "none"); } }34:T9fc,chart_highlight_rect = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // draw the line svg.append("path") .attr("class", "line") .datum(plusMinusData) .attr("fill", "none") .attr("stroke", "grey") .attr("opacity",1) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line.defined(true)); svg.selectAll("circle") .data(plusMinusData) .enter() .append("circle") .attr("r", 4) .attr("opacity",1) .attr("cx", d => x(d.time)) .attr("cy", d => y(d.SCOREMARGIN)) .attr("fill", function(d){return color(d.SCOREMARGIN)}) //.on("mouseover", function(e,d){ // let p = d3.pointer(e); // let textDesc = d.HOMEDESCRIPTION; // if(d.VISITORDESCRIPTION){ // textDesc = d.VISITORDESCRIPTION // } // eventDesc.attr("opacity",1) // .text(textDesc) //}); // Show teams name svg.append("text") .attr("x", margin.left + 30) .attr("y", y(maxPlusMinus)) .attr("dy", +20) .style("text-anchor", "start") .style('fill', homeTeamColor) .style("font-size", "20px") .text(homeTeam.name) .append("rect"); svg.append("text") .attr("x", margin.left + 30) .attr("y", y(-maxPlusMinus)) .attr("dy", -10) .style("text-anchor", "start") .style('fill', awayTeamColor) .style("font-size", "20px") .text(awayTeam.name); // try shade rect to highlight player curve if(selectedPlayer!="All"){ const playerTimes = improvedPlayersTime[selectedPlayer] for(const period of playerTimes){ svg.append("rect") .attr('x', x(period.beginTime)) .attr('y', margin.top-4) .attr('width', x(period.endTime)-x(period.beginTime)) .attr('height', height-margin.top-margin.bottom+4) .attr('fill', 'lightblue') .attr("opacity","0.1"); } } const tooltip = new Tooltip(); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(plusMinusData)) .join("rect") .attr("x", ([a, b]) => x(a.time)) .attr("height", height) .attr("width", ([a, b]) => x(b.time) - x(a.time)) .on("mouseover", (event, [a]) => tooltip.show(a)) .on("mouseout", () => tooltip.hide()); svg.append(() => tooltip.node); return svg.node(); }35:Tb7d,chart3 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // draw a soft line in background svg.append("path") .attr("class", "line") .datum(plusMinusData) .attr("fill", "none") .attr("stroke", "grey") .attr("opacity",0.1) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line.defined(true)); // draw a full line for the selectedPlayer svg.append("path") .attr("class", "line") .datum(plusMinusDataWithPlayersOnCourt) .attr("fill", "none") .attr("stroke", "grey") .attr("opacity",1) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line.defined((d, i) => {if(selectedPlayer!="All"){ return d.playersOnCourt.includes(selectedPlayer)} else{return true}})); // draw a soft circles in background svg.selectAll("circle") .data(plusMinusDataWithPlayersOnCourt) .enter() .append("circle") .attr("r", 3.5) .attr("opacity",d => {if(selectedPlayer!="All"){ if(d.playersOnCourt.includes(selectedPlayer)){return 1} else{return 0.1} } else{return 1}}) .attr("cx", d => x(d.time)) .attr("cy", d => y(d.SCOREMARGIN)) .attr("fill", function(d){return color(d.SCOREMARGIN)}) // Show teams name svg.append("text") .attr("x", margin.left + 30) .attr("y", y(maxPlusMinus)) .attr("dy", +20) .style("text-anchor", "start") .style('fill', homeTeamColor) .style("font-size", "20px") .text(homeTeam.name); svg.append("text") .attr("x", margin.left + 30) .attr("y", y(-maxPlusMinus)) .attr("dy", -10) .style("text-anchor", "start") .style('fill', awayTeamColor) .style("font-size", "20px") .text(awayTeam.name); // highlight when a player is on the court if (false){ svg.append("path") .attr("class", "line") .attr("fill", "none") .style("stroke", "lime") .attr("stroke-width", 1.5) .datum(plusMinusData) .attr("d", line.defined((d, i) => d.SCOREMARGIN > 0)); } const tooltip = new Tooltip(); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(plusMinusData)) .join("rect") .attr("x", ([a, b]) => x(a.time)) .attr("height", height) .attr("width", ([a, b]) => x(b.time) - x(a.time)) .on("mouseover", (event, [a]) => tooltip.show(a)) .on("mouseout", () => tooltip.hide()); svg.append(() => tooltip.node); return svg.node(); }36:Ta8f,chart_regression = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const gradient = DOM.uid(); svg .append("linearGradient") .attr("id", gradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", y(colorGradient.domain()[0])) .attr("x2", 0) .attr("y2", y(colorGradient.domain()[2])) .selectAll("stop") .data(d3.ticks(-maxPlusMinus, maxPlusMinus, 30)) .join("stop") .attr("offset", (d,i) => i/29) .attr("stop-color", i => colorGradient(i)); // draw the lien svg.append("path") .attr("class", "line") .datum(plusMinusData) .attr("fill", "none") .attr("stroke", gradient) .attr("opacity",1) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line.defined(true)); svg.selectAll("circle") .data(plusMinusData) .enter() .append("circle") .attr("r", 3) .attr("cx", d => x(d.time)) .attr("cy", d => y(d.SCOREMARGIN)) .attr("fill", function(d){return color(d.SCOREMARGIN)}) // Show teams name svg.append("text") .attr("x", margin.left + 30) .attr("y", y(maxPlusMinus)) .attr("dy", +20) .style("text-anchor", "start") .style('fill', homeTeamColor) .style("font-size", "20px") .text(homeTeam.name) .append("rect"); svg.append("text") .attr("x", margin.left + 30) .attr("y", y(-maxPlusMinus)) .attr("dy", -10) .style("text-anchor", "start") .style('fill', awayTeamColor) .style("font-size", "20px") .text(awayTeam.name); // highlight when a player is on the court if (false){ svg.append("path") .attr("class", "line") .attr("fill", "none") .style("stroke", "lime") .attr("stroke-width", 1.5) .datum(plusMinusData) .attr("d", line.defined((d, i) => d.SCOREMARGIN > 0)); } const tooltip = new Tooltip(); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(plusMinusData)) .join("rect") .attr("x", ([a, b]) => x(a.time)) .attr("height", height) .attr("width", ([a, b]) => x(b.time) - x(a.time)) .on("mouseover", (event, [a]) => tooltip.show(a)) .on("mouseout", () => tooltip.hide()); svg.append(() => tooltip.node); // show trend svg.append("path") .attr("class", "regression") .datum(r) .attr("fill", "none") .style("stroke", "grey") .attr("d", lineGenerator.defined(true)); return svg.node(); }37:[] 2f:{"title":"Plus Minus Chart - NBA/Basketball","cells":[{"id":0,"value":"md`# Plus Minus Chart - NBA/Basketball\nThis visualization allows you to see the evolution of the score difference for an NBA game. It is part of a more global visualization available [here](https://observablehq.com/@grolland/nba-basketball-game-visualisation).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"viewof selectPlayer = Select(playersList.concat([\"All\"]), {value: \"All\", label: \"Choose your player\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1551,"value":"fullPlusMinusChart(plusMinusDataWithPlayersOnCourt,plusMinusData,{homeTeamColor : homeTeamColor, awayTeamColor : awayTeamColor})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1554,"value":"md`The two following functions allow to reproduce the graph, the first one allows to reproduce the whole graph with the interactions, while the second one integrates the graph to a svg called as argument in this case, the tooltip will be to be integrated to the more global visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"md`## Tooltip\nThis tooltip is inspired by https://observablehq.com/@d3/learn-d3-interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1643,"value":"md`## Experiments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"md`## Highlight part of the curve\n\nWe want to be able to highlight, when selecting a player, the periods of the game during which he played. For that, we have 2 ideas : either attenuate the part of the curve which does not concern him, or put a rectangle on the parts to be highlighted.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1311,"value":"viewof selectedPlayer = Select(playersList.concat([\"All\"]), {value: playersList.find((t,i) => i==1), label: \"Choose your player\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"md`**Shaded Rectangles to highlight**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"md`**Attenuate the parts of the curve not concerned**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1725,"value":"md`The best solution seems to be the second one.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"md`## Add regression curve ?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"viewof bandwidth = slider({\n title: \"LOESS Bandwidth\",\n min: .02,\n max: 1,\n step: .01,\n value: .25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"r = regressionGenerator(plusMinusData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"regressionGenerator = d3regression.regressionLoess()\n .x(d => d.time)\n .y(d => d.SCOREMARGIN)\n .bandwidth(bandwidth);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"lineGenerator = d3.line()\n .x(d => x(d[0]))\n .y(d => y(d[1]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"md`## State`","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"homeTeamColor = 'steelBlue'","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"awayTeamColor = \"orange\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"color = d3.scaleLinear()\n .domain([-maxPlusMinus,0,maxPlusMinus])\n .range([awayTeamColor,\"grey\",homeTeamColor]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"line = d3.line()\n .curve(d3.curveNatural)\n .x(d => x(d.time))\n .y(d => y(d.SCOREMARGIN))","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"x = d3.scaleTime()\n .domain(d3.extent(parseData,d => d.time))//[0, 40 * 60 * 1000]\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${y(0)})`)\n //.call(d3.axisBottom(x).tickFormat(timeFormat))\n .call(d3.axisBottom(x).tickValues([]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"maxPlusMinus = d3.max(parseData.map(d => Math.abs(d.SCOREMARGIN)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"y = d3.scaleLinear()\n .domain([-maxPlusMinus,maxPlusMinus])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"margin = ({top: 40, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"colorGradient = d3.scaleLinear()\n .domain([-maxPlusMinus,0,maxPlusMinus])\n .range([awayTeamColor,\"grey\",homeTeamColor]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"d3regression = require.alias({\n \"d3-regression\": \"d3-regression@1\",\n})(\"d3-regression\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"import { table } from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"import {plusMinusDataWithPlayersOnCourt} from 'ba6cfc3f960098c1'","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"import {uniqueSet} from \"@harrystevens/unique-values-from-an-array-of-objects\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1537,"value":"import {playersList, parseData, parseTime, plusMinusData, homeTeam, awayTeam, timeFormat, improvedPlayersTime} from \"889352c36f8e71b9\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"import {createSVGtext} from '@gallowayevan/svg-word-wrap'","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"import {eventMatch} from '@julesdeveaux/stats-de-joueurs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}