31:T714,class MatchChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.sx = d3.scaleLinear().range([0, this.width]); this.sy = d3.scaleBand().range([this.height, 0]); this.xAxis = d3.axisBottom(this.sx); this.yAxis = d3.axisLeft(this.sy); this.mainChart = this.config["mainChart"]; this.nMatches = d3.max(this.data, (d) => round2number(d.Round)); this.nHalf = Math.floor(this.nMatches / 2) + 1; } setScalesXY() { this.sx.domain([0, d3.max(this.data, (d) => round2number(d.Round)) / 2]); this.sy.domain([1, 0]); } draw() { this.setScalesXY(); this.svg .append("g") .selectAll("text") .data(this.data) .join("text") .attr("x", (d) => this.sx(round2number(d.Round) % this.nHalf)) .attr("y", (d) => this.sy(Math.floor(round2number(d.Round) / this.nHalf))) .attr("dy", "0.21em") .attr("user-select", "none") .attr("font-size", 13) .attr("text-anchor", "middle") .attr("fill", "#000") .text((d) => round2number(d.Round)); this.svg .append("g") .selectAll("circle") .data(this.data) .join("circle") .attr("cx", (d) => this.sx(round2number(d.Round) % this.nHalf)) .attr("cy", (d) => this.sy(Math.floor(round2number(d.Round) / this.nHalf)) ) .attr("r", 9) .attr("fill", "#ccc") .attr("stroke", (d) => result2color(d.Result)) .attr("stroke-width", 1.5) .attr("opacity", 0.5) .on("mouseover", (event, d) => { this.mainChart.highlight(event, d); }) .on("mousemove", (event, d) => { this.mainChart.mousemove(event, d); }) .on("mouseleave", (event, d) => { this.mainChart.dehighlight(event, d); }); } }32:T2bf1,/** * draw a chart with given data and html selector * @extends GeneralChart * @param {Object} data - data to be drawn * @param {String} selector - html selector * @param {Object} config - configuration of the chart * * @example * const data = [ * {label: 'A', value: 10}, * {label: 'B', value: 20}, * {label: 'C', value: 30}, * ] * const chart = new TeamEXChart(data, '#chart', {color: d3.scaleOrdinal(d3.schemeCategory10)}); * chart.draw(); */ class TeamEXChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.data = this.data.filter((d) => d.xG !== null); this.sx = d3.scaleLinear().range([0, this.width]); this.sy = d3.scaleLinear().range([this.height, 0]); this.xAxis = d3.axisBottom(this.sx); this.yAxis = d3.axisLeft(this.sy); } /** draw the chart */ setScalesXY() { this.sx.domain(d3.extent(this.data, (d) => d.xG)); this.sy.domain(d3.extent(this.data, (d) => d.xGA)); } setScaleRadius() { this.sr = d3 .scaleLinear() .domain(d3.extent([-5, 5])) .range([4, 15]); } _getX(d) { return this.sx(d.xG); } _getY(d) { return this.sy(d.xGA); } setTextPosition(sel, classThis) { sel .attr("x", (d) => classThis._getX(d)) .attr("y", (d) => classThis._getY(d)); } setPosition(sel, x, y) { sel.attr("x", x).attr("y", y); } setCirclePosition(sel, classThis) { sel .attr("cx", (d) => classThis.sx(d.xG)) .attr("cy", (d) => classThis.sy(d.xGA)); } setPlotViz(sel, classThis) { sel .attr("r", (d) => classThis.sr(d.GF - d.GA)) .attr("fill", "#999") .attr("stroke-width", 1.5) .attr("stroke", (d) => result2color(d.Result)) .attr("opacity", 0.5); } setPathData(sel, classThis) { sel.attr( "d", d3 .line() .x((d) => classThis.sx(d.xG)) .y((d) => classThis.sy(d.xGA)) .curve(d3.curveCatmullRom.alpha(1)) ); } setPathViz(sel, classThis) { sel.attr("fill", "none").attr("stroke", "#bbb").attr("opacity", 0.8); } calculateExpectedWinDrawLoss(data) { return [ data.filter((d) => d.xG > d.xGA).length, data.filter((d) => d.xG == d.xGA).length, data.filter((d) => d.xG < d.xGA).length ]; } calculateExpResult(d) { if (d.xG > d.xGA) return "win"; if (d.xG < d.xGA) return "loss"; return "draw"; } drawReferenceLine(sel, classThis) { sel .append("line") .attr("stroke", "#222") .attr("stroke-dasharray", "3 3") .attr("x1", classThis.sx(0)) .attr("y1", classThis.sy(0)) .attr("x2", classThis.sx(5)) .attr("y2", classThis.sy(5)); } setAxisX(sel, classThis) { sel .attr("class", "axis axis--x") .attr("transform", "translate(0," + classThis.height + ")") .call(classThis.xAxis) .append("text") .attr("class", "axis-title") .attr("x", classThis.width / 2) .attr("y", "2em") .attr("dy", "0.71em") .attr("text-anchor", "middle") .attr("font-size", "1em") .attr("fill", "#666") .text("Expected Goal"); } setAxisY(sel, classThis) { sel .attr("class", "axis axis--y") .call(classThis.yAxis) .append("text") .attr("class", "axis-title") .attr("x", 60) .attr("y", -15) .attr("dy", "1em") .attr("text-anchor", "end") .attr("font-size", "1em") .attr("fill", "#666") .text("Expected Goal Allowed"); } setFontSize(sel, fontSize) { sel.attr("font-size", fontSize); } applyMouseEvent(sel, classThis) { sel .on("mouseover", classThis.mouseover) .on("mousemove", classThis.mousemove) .on("mouseleave", classThis.mouseleave); } teamFilter() { return this.data.filter((d) => d.team == this.config["team"]); } normalCircleViz(sel) { sel .attr("r", 3) .attr("fill", "#999") .attr("stroke-width", 1.5) .attr("opacity", 0.3); } drawAll() { this.setScalesXY(); this.setScaleRadius(); this.svg .append("g") .selectAll("circle") .data(this.data) .join("circle") .attr("expResult", this.calculateExpResult) .attr("team", (d) => d.team) .attr("result", (d) => d.Result) .attr("xG", (d) => d.xG) .attr("xGA", (d) => d.xGA) .call(this.normalCircleViz) .call(this.setCirclePosition, this); this.svg.call(this.drawRound, this); // this.svg.call(this.drawFormation, this); this.svg .selectAll("circle") .filter((d) => this.config["team"] === d.team) .attr("class", (d) => `Round_${round2number(d.Round)}_${d.team}`) .call(this.setPlotViz, this) .call(this.applyMouseEvent, this); this.svg .append("g") .attr("class", "cursor-lines") .selectAll("line") .data(d3.range(2)) .join("line") .attr("class", (d) => (d === 0 ? "cursor-horizontal" : "cursor-vertical")) .attr("stroke-dasharray", "3 3"); this.drawMatchLegend(); this.svg.append("g").call(this.drawReferenceLine, this); this.svg.append("g").call(this.setAxisX, this); this.svg.append("g").call(this.setAxisY, this); this.svg.call(this.drawResultNumbers, this); this.svg.call(this.setTitle, this); } drawRound(sel, classThis) { sel .append("g") .selectAll("text") .data(classThis.teamFilter()) .join("text") .call(classThis.setTextPosition, classThis) .call(classThis.setFontSize, 15) .attr("dy", "0.21em") .attr("text-anchor", "middle") .style("user-select", "none") .text((d) => round2number(d.Round)); } drawFormation(sel, classThis) { sel .append("g") .selectAll("text") .data(classThis.teamFilter()) .join("text") .call(classThis.setTextPosition, classThis) .call(classThis.setFontSize, 15) .attr("fill", "#666") .attr("dy", "0.90em") .attr("text-anchor", "middle") .style("user-select", "none") .text((d) => d.Formation); } draw() { this.setScalesXY(); this.setScaleRadius(); this.svg .append("g") .append("path") .datum(this.teamFilter()) .call(this.setPathViz, this) .call(this.setPathData, this); this.svg.call(this.drawRound, this); // this.svg.call(this.drawFormation, this); this.svg .append("g") .append("path") .attr("fill", "blue") .attr( "d", drawTriangle([ [this.xMin(), this.yMin()], [this.xMin(), this.yMax()], [this.xMax(), this.yMax()] ]) ) .attr("opacity", 0.05); this.svg .append("g") .append("path") .attr("fill", "red") .attr( "d", drawTriangle([ [this.xMin(), this.yMin()], [this.xMax(), this.yMin()], [this.xMax(), this.yMax()] ]) ) .attr("opacity", 0.05); this.svg .append("g") .selectAll("circle") .data(this.teamFilter()) .join("circle") .attr("expResult", this.calculateExpResult) .attr("result", (d) => d.Result) .attr("xG", (d) => d.xG) .attr("xGA", (d) => d.xGA) .attr("class", (d) => `Round_${round2number(d.Round)}_${d.team}`) .call(this.setCirclePosition, this) .call(this.setPlotViz, this) .call(this.applyMouseEvent, this); this.svg.call(this.setTitle, this); this.svg.append("g").call(this.drawReferenceLine, this); this.svg.append("g").call(this.setAxisX, this); this.svg.append("g").call(this.setAxisY, this); this.svg.call(this.drawResultNumbers, this); this.svg .append("g") .attr("class", "cursor-lines") .selectAll("line") .data(d3.range(2)) .join("line") .attr("class", (d) => (d === 0 ? "cursor-horizontal" : "cursor-vertical")) .attr("stroke-dasharray", "3 3"); this.drawMatchLegend(); } drawMatchLegend() { this.matches = new MatchChart(this.teamFilter(), "#matches", { margin: { top: 20, right: 20, bottom: 30, left: 50 }, width: this.config["width"], height: 100, mainChart: this, year: this.config["year"] }); this.matches.draw(); } setTitle(sel, classThis) { sel .append("g") .append("text") .attr("x", classThis.width / 2) .attr("y", 20) .attr("font-size", 30) .attr("text-anchor", "middle") .style("user-select", "none") .text(classThis.config["team"] + " vs ..."); } xMax() { return this.sx(d3.max(this.sx.domain())); } yMax() { return this.sy(d3.max(this.sy.domain())); } xMin() { return this.sx(d3.min(this.sx.domain())); } yMin() { return this.sy(d3.min(this.sy.domain())); } drawResultNumbers(sel, classThis) { const [nW, nD, nL] = classThis.calculateExpectedWinDrawLoss( classThis.teamFilter() ); sel .append("g") .append("text") .attr("class", "win") .call(classThis.setPosition, classThis.xMax() - 25, classThis.yMin()) .call(classThis.setFontSize, 50) .attr("text-anchor", "end") .attr("fill", "#ccc") .text(nW); sel .append("g") .append("text") .attr("class", "loss") .call(classThis.setPosition, classThis.xMin(), classThis.yMax() + 50) .call(classThis.setFontSize, 50) .attr("text-anchor", "first") .attr("fill", "#ccc") .text(nL); sel .append("g") .append("text") .attr("class", "draw") .call(classThis.setPosition, classThis.xMax() - 25, classThis.yMax() + 50) .call(classThis.setFontSize, 50) .attr("text-anchor", "end") .attr("fill", "#ccc") .text(nD); } highlight(event, d) { const sel = d3.select(`.Round_${round2number(d.Round)}_${d.team}`); d3.select(".cursor-horizontal") .attr("x1", this.xMin()) .attr("x2", this.sx(sel.attr("xG"))) .attr("y1", this.sy(sel.attr("xGA"))) .attr("y2", this.sy(sel.attr("xGA"))) .attr("stroke", result2color(sel.attr("result"))); d3.select(".cursor-vertical") .attr("x1", this.sx(sel.attr("xG"))) .attr("x2", this.sx(sel.attr("xG"))) .attr("y1", this.yMin()) .attr("y2", this.sy(sel.attr("xGA"))) .attr("stroke", result2color(sel.attr("result"))); d3.selectAll(".cursor-lines").style("display", "block"); tooltipMatch.show(event, d); } dehighlight(event, d) { d3.select(".cursor-lines").style("display", "none"); d3.select(`.Round_${round2number(d.Round)}`).call(this.setPlotViz, this); tooltipMatch.hide(event, d); } mouseover(event, d) { const expResult = d3.select(this).attr("expResult"); d3.select(this).attr("stroke-width", 5); d3.select(`.${expResult}`).transition().attr("font-size", 60); tooltipMatch.show(event, d); } mousemove(event, d) { tooltipMatch.move(event, d); } mouseleave(event, d) { const expResult = d3.select(this).attr("expResult"); d3.select(this).attr("stroke-width", 1); d3.select(`.${expResult}`).transition().attr("font-size", 50); tooltipMatch.hide(event, d); } }33:T135e,/** * draw a chart with given data and html selector * @extends GeneralChart * @param {Object} data - data to be drawn * @param {String} selector - html selector * @param {Object} config - configuration of the chart * * @example * const data = [ * {label: 'A', value: 10}, * {label: 'B', value: 20}, * {label: 'C', value: 30}, * ] * const chart = new PlayerChart(data, '#chart', {color: d3.scaleOrdinal(d3.schemeCategory10)}); * chart.draw(); */ class PlayerChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.data = this.data.filter((d) => d.xG !== null); this.sx = d3.scaleLinear().range([0, this.width]); this.sy = d3.scaleLinear().range([this.height, 0]); this.xAxis = d3.axisBottom(this.sx); this.yAxis = d3.axisLeft(this.sy); } setScalesXY(data, xName, yName) { const largestValue = Math.ceil( d3.max([d3.max(data, (d) => d[xName]), d3.max(data, (d) => d[yName])]) * 10 ) / 10; this.sx.domain([0, largestValue]); this.sy.domain([0, largestValue]); } setScaleRadius() { this.sr = d3 .scaleLinear() .domain(d3.extent([0, 38 * 90])) .range([4, 15]); } filterPlayer() { return this.data.filter( (d) => (d.team === this.config["team"]) & (d.MP > 2) & (d.Starts < 39) ); } setAxisX(sel, classThis, text) { sel .attr("class", "axis axis--x") .attr("transform", "translate(0," + classThis.height + ")") .call(classThis.xAxis) .append("text") .attr("class", "axis-title") .attr("x", classThis.width / 2) .attr("y", "2em") .attr("dy", "0.71em") .attr("text-anchor", "middle") .attr("font-size", "1em") .attr("fill", "#666") .text(text); } setAxisY(sel, classThis, text) { sel .attr("class", "axis axis--y") .call(classThis.yAxis) .append("text") .attr("class", "axis-title") .attr("x", 60) .attr("y", -15) .attr("dy", "1em") .attr("text-anchor", "end") .attr("font-size", "1em") .attr("fill", "#666") .text(text); } getPosColor(pos) { if (pos === null) return "#000"; const firstPos = pos.slice(0, 2); if (firstPos == "FW") return "green"; if (firstPos == "MF") return "orange"; if (firstPos == "DF") return "blue"; if (firstPos == "GK") return "#333"; } applyMouseEvent(sel, classThis) { sel .on("mouseover", classThis.mouseover) .on("mousemove", classThis.mousemove) .on("mouseleave", classThis.mouseleave); } drawReferenceLine(sel, classThis) { const [min, max] = classThis.sx.domain(); sel .append("line") .attr("stroke", "#222") .attr("stroke-dasharray", "3 3") .attr("x1", classThis.sx(min)) .attr("y1", classThis.sy(min)) .attr("x2", classThis.sx(max)) .attr("y2", classThis.sy(max)); } /** draw the chart */ drawXGXA() { this.setScalesXY(this.filterPlayer(), "xG", "xGA"); this.setScaleRadius(); this.svg .append("g") .selectAll("circle") .data(this.filterPlayer()) .join("circle") .attr("cx", (d) => this.sx(d.xG)) .attr("cy", (d) => this.sy(d.xA)) .attr("r", (d) => this.sr(numberInString2number(d.Min))) .attr("class", getClassFromData) .attr("stroke-width", 1.5) .attr("stroke", (d) => this.getPosColor(d.Pos)) .attr("fill", "#ccc") .attr("opacity", 0.7) .call(this.applyMouseEvent, this); d3.select(`.${getClassFromData(this.config["search"])}`) .transition() .attr("stroke-width", 3); this.svg.append("g").call(this.drawReferenceLine, this); this.svg.append("g").call(this.setAxisX, this, "Expected Goal"); this.svg.append("g").call(this.setAxisY, this, "Expected Assist"); } drawG2Expected() { this.setScalesXY(this.filterPlayer(), "xG", "Gls"); this.setScaleRadius(); this.svg .append("g") .selectAll("circle") .data(this.filterPlayer()) .join("circle") .attr("cx", (d) => this.sx(d.xG)) .attr("cy", (d) => this.sy(d.Gls)) .attr("r", (d) => this.sr(numberInString2number(d.Min))) .attr("class", getClassFromData) .attr("stroke-width", 1.5) .attr("stroke", (d) => this.getPosColor(d.Pos)) .attr("fill", "#ccc") .attr("opacity", 0.7) .call(this.applyMouseEvent, this); d3.select(`.${getClassFromData(this.config["search"])}`) .transition() .attr("stroke-width", 3); this.svg.append("g").call(this.drawReferenceLine, this); this.svg.append("g").call(this.setAxisX, this, "Expected Goal"); this.svg.append("g").call(this.setAxisY, this, "Actual Goal"); } mouseover(event, d) { tooltipXGXA.show(event, d); } mousemove(event, d) { tooltipXGXA.move(event, d); } mouseleave(event, d) { tooltipXGXA.hide(event, d); } }34:T10fa,/** * draw a chart with given data and html selector * @extends GeneralChart * @param {Object} data - data to be drawn * @param {String} selector - html selector * @param {Object} config - configuration of the chart * * @example * const data = [ * {label: 'A', value: 10}, * {label: 'B', value: 20}, * {label: 'C', value: 30}, * ] * const chart = new RankingChart(data, '#chart', {color: d3.scaleOrdinal(d3.schemeCategory10)}); * chart.draw(); */ class RankingChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.data = this.data.filter((d) => d.xG !== null); this.sx = d3.scaleLinear().range([0, this.width]); this.sy = d3.scaleBand().range([0, this.height]); this.xAxis = d3.axisBottom(this.sx); this.yAxis = d3.axisLeft(this.sy); } setScalesXY(data) { this.sx.domain(this.config["sxDomain"]); this.sy.domain(this.sorted.map((d) => d[0])); } setAxisX(sel, classThis, text) { sel .attr("class", "axis axis--x") .attr("transform", "translate(0," + classThis.height + ")") .call(classThis.xAxis) .append("text") .attr("class", "axis-title") .attr("x", classThis.width / 2) .attr("y", "2em") .attr("dy", "0.71em") .attr("text-anchor", "middle") .attr("font-size", "1em") .attr("fill", "#666") .text(text); } setAxisY(sel, classThis, text) { sel .attr("class", "axis axis--y") .call(classThis.yAxis) .append("text") .attr("class", "axis-title") .attr("x", 60) .attr("y", -15) .attr("dy", "1em") .attr("text-anchor", "end") .attr("font-size", "1em") .attr("fill", "#666") .text(text); } applyMouseEvent(sel, classThis) { sel .on("mouseover", classThis.mouseover) .on("mousemove", classThis.mousemove) .on("mouseleave", classThis.mouseleave); } /** draw the chart */ drawXG() { this.sorted = this.data.sort((a, b) => d3.descending( d3.sum(a[1], (v) => v.xG), d3.sum(b[1], (v) => v.xG) ) ); this.setScalesXY(); this.svg .selectAll("rect") .data(this.sorted) .join("rect") .attr("x", this.sx(0)) .attr("y", (d) => this.sy(d[0])) .attr("width", (d) => this.sx(d3.sum(d[1], (v) => v.xG))) .attr("height", this.sy.bandwidth() - 4) .attr("fill", (d) => teamColors[d[0]]["bg"]) .attr("stroke", "#ccc"); this.svg .selectAll("text") .data(this.sorted) .join("text") .attr("x", (d) => this.sx(d3.sum(d[1], (v) => v.xG))) .attr("dx", -5) .attr("y", (d) => this.sy(d[0]) + this.sy.bandwidth() / 2) .attr("dy", 5) .attr("fill", (d) => teamColors[d[0]]["text"]) .attr("text-anchor", "end") .text((d) => f1(d3.sum(d[1], (v) => v.xG))); this.svg.append("g").call(this.setAxisX, this, "Expected Goal"); this.svg.append("g").call(this.setAxisY, this); } drawXGA() { this.sorted = this.data.sort((a, b) => d3.descending( d3.sum(a[1], (v) => v.xGA), d3.sum(b[1], (v) => v.xGA) ) ); this.setScalesXY(); this.svg .selectAll("rect") .data(this.sorted) .join("rect") .attr("x", this.sx(0)) .attr("y", (d) => this.sy(d[0])) .attr("width", (d) => this.sx(d3.sum(d[1], (v) => v.xGA))) .attr("height", this.sy.bandwidth() - 4) .attr("fill", (d) => teamColors[d[0]]["bg"]) .attr("stroke", "#ccc"); this.svg .selectAll("text") .data(this.sorted) .join("text") .attr("x", (d) => this.sx(d3.sum(d[1], (v) => v.xGA))) .attr("dx", -5) .attr("y", (d) => this.sy(d[0]) + this.sy.bandwidth() / 2) .attr("dy", 5) .attr("fill", (d) => teamColors[d[0]]["text"]) .attr("text-anchor", "end") .style("font-weight", (d) => (d[0] == "Troyes" ? "bold" : "")) .text((d) => f1(d3.sum(d[1], (v) => v.xGA))); this.svg.append("g").call(this.setAxisX, this, "Expected Goal Allowed"); this.svg.append("g").call(this.setAxisY, this); } // mouseover(event, d) { // tooltipXGXA.show(event, d); // } // mousemove(event, d) { // tooltipXGXA.move(event, d); // } // mouseleave(event, d) { // tooltipXGXA.hide(event, d); // } }35:T464,teamColors = { return { Angers: { bg: "white", text: "black" }, Monaco: { bg: "red", text: "white" }, "Saint-Etienne": { bg: "#006a32", text: "white" }, Montpellier: { bg: "#344575", text: "white" }, Bordeaux: { bg: "#001b50", text: "white" }, Nantes: { bg: "#ffd600", text: "#1b8f3a" }, Nice: { bg: "#201600", text: "#d14a43" }, "Paris-Saint-Germain": { bg: "#000040", text: "white" }, Strasbourg: { bg: "#009fe3", text: "black" }, Rennes: { bg: "#e13327", text: "white" }, Lyon: { bg: "#003a80", text: "white" }, Lens: { bg: "yellow", text: "black" }, Lorient: { bg: "#f58113", text: "black" }, Brest: { bg: "#f00000", text: "black" }, Ajaccio: { bg: "#f00000", text: "white" }, Marseille: { bg: "#2FAEE0", text: "white" }, Lille: { bg: "red", text: "blue" }, Toulouse: { bg: "#745990", text: "white" }, Troyes: { bg: "#006eb2", text: "white" }, Auxerre: { bg: "#4087bf", text: "white" }, Reims: { bg: "#ee2223", text: "white" }, Metz: { bg: "#6e0f12", text: "white" }, "Clermont-Foot": { bg: "#002d6a", text: "#C50C46" } }; }36:T19c9,/** * draw a chart with given data and html selector * @extends GeneralChart * @param {Object} data - data to be drawn * @param {String} selector - html selector * @param {Object} config - configuration of the chart * * @example * const data = [ * {label: 'A', value: 10}, * {label: 'B', value: 20}, * {label: 'C', value: 30}, * ] * const chart = new RankingChart(data, '#chart', {color: d3.scaleOrdinal(d3.schemeCategory10)}); * chart.draw(); */ class TeamXGvXGAChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.dataPrev = this.data[0]; this.dataCurr = this.data[1]; this.sx = d3.scaleLinear().range([0, this.width]); this.sy = d3.scaleLinear().range([this.height, 0]); this.xAxis = d3.axisBottom(this.sx); this.yAxis = d3.axisLeft(this.sy); } setScalesXY(data) { this.sx.domain(this.config["sxDomain"]); this.sy.domain(this.config["syDomain"]); } setAxisX(sel, classThis, text) { sel .attr("class", "axis axis--x") .attr("transform", "translate(0," + classThis.height + ")") .call(classThis.xAxis) .append("text") .attr("class", "axis-title") .attr("x", classThis.width / 2) .attr("y", "2em") .attr("dy", "0.71em") .attr("text-anchor", "middle") .attr("font-size", "1em") .attr("fill", "#666") .text(text); } setAxisY(sel, classThis, text) { sel .attr("class", "axis axis--y") .call(classThis.yAxis) .append("text") .attr("class", "axis-title") .attr("x", 60) .attr("y", -15) .attr("dy", "1em") .attr("text-anchor", "end") .attr("font-size", "1em") .attr("fill", "#666") .text(text); } applyMouseEvent(sel, classThis) { sel .on("mouseover", classThis.mouseover) .on("mousemove", classThis.mousemove) .on("mouseleave", classThis.mouseleave); } calculateXGperMatch(d) { return d3.sum(d, (v) => v.xG) / d.filter((d) => d.xG !== null).length; } calculateXGperMatchFromDict(dict) { return this.calculateXGperMatch(dict[1]); } calculateXGAperMatch(d) { return d3.sum(d, (v) => v.xGA) / d.filter((d) => d.xGA !== null).length; } calculateXGAperMatchFromDict(dict) { return this.calculateXGAperMatch(dict[1]); } drawReferenceLine(sel, classThis) { sel .append("line") .attr("stroke", "#222") .attr("stroke-dasharray", "3 3") .attr("x1", classThis.sx(0)) .attr("y1", classThis.sy(0)) .attr("x2", classThis.sx(5)) .attr("y2", classThis.sy(5)); } getTeamShortName(name) { if (name == "Paris-Saint-Germain") return "PSG"; return name.slice(0, 3).toUpperCase(); } /** draw the chart */ draw() { this.setScalesXY(); this.svg .append("g") .selectAll("circle") .data(this.dataCurr) .join("circle") .attr("cx", (d) => this.sx(this.calculateXGperMatchFromDict(d))) .attr("cy", (d) => this.sy(this.calculateXGAperMatchFromDict(d))) .attr("r", 9) .attr("fill", (d) => teamColors[d[0]]["bg"]) .attr("stroke", "black") .attr("opacity", 0.7); this.svg .append("g") .selectAll("circle") .data(this.dataPrev) .join("circle") .attr("cx", (d) => this.sx(this.calculateXGperMatchFromDict(d))) .attr("cy", (d) => this.sy(this.calculateXGAperMatchFromDict(d))) .attr("r", 9) .attr("fill", (d) => teamColors[d[0]]["bg"]) .attr("opacity", 0.1); // Add arrow and text this.svg .append("g") .selectAll("path") .data(merge(...this.data)) .join("path") .attr("stroke", "#ccc") // .attr("marker-end", "urtl(#arrow)") .attr("d", (d) => { if (d.curr.length === 0 || d.prev.length === 0) return ""; const sxPrev = this.sx(this.calculateXGperMatch(d.prev)); const syPrev = this.sy(this.calculateXGAperMatch(d.prev)); const sxCurr = this.sx(this.calculateXGperMatch(d.curr)); const syCurr = this.sy(this.calculateXGAperMatch(d.curr)); return d3.line()([ [sxPrev, syPrev], [sxCurr, syCurr] ]); }) .attr("stroke-dasharray", function () { console.log(this.getTotalLength()); return this.getTotalLength() - 9; }); this.svg.call(this.drawTeamName, this, this.dataPrev); this.svg.call(this.drawTeamName, this, this.dataCurr); this.svg.call(this.drawYear, this, this.dataPrev, "21/22"); this.svg.call(this.drawYear, this, this.dataCurr, "22/23"); this.svg.append("g").call(this.drawReferenceLine, this); this.svg.append("g").call(this.setAxisX, this, "Expected Goal"); this.svg.append("g").call(this.setAxisY, this, "Expected Goal Allowed"); this.svg .append("defs") .append("marker") .attr("id", "arrow") .attr("viewBox", [0, 0, markerBoxWidth, markerBoxHeight]) .attr("refX", refX) .attr("refY", refY) .attr("markerWidth", markerBoxWidth) .attr("markerHeight", markerBoxHeight) .attr("orient", "auto-start-reverse") .append("path") .attr("d", d3.line()(arrowPoints)) .attr("fill", "red") .attr("stroke", "#ccc"); // this.svg.call( // d3 // .zoom() // .extent([ // [0, 0], // [this.config["width"], this.config["height"]] // ]) // .scaleExtent([1, 8]) // .on("zoom", zoomed) // ); } drawTeamName(sel, thisClass, data) { sel .append("g") .selectAll("text") .data(data) .join("text") .attr("text-anchor", "middle") .attr("font-size", 7) .attr("x", (d) => thisClass.sx(thisClass.calculateXGperMatchFromDict(d))) .attr("y", (d) => thisClass.sy(thisClass.calculateXGAperMatchFromDict(d))) .text((d) => thisClass.getTeamShortName(d[0])); } drawYear(sel, thisClass, data, year) { sel .append("g") .selectAll("text") .data(data) .join("text") .attr("text-anchor", "middle") .attr("font-size", 7) .attr("x", (d) => thisClass.sx(thisClass.calculateXGperMatchFromDict(d))) .attr("y", (d) => thisClass.sy(thisClass.calculateXGAperMatchFromDict(d))) .attr("dy", 7) .attr("opacity", 0.8) .text((d) => year); } // mouseover(event, d) { // tooltipXGXA.show(event, d); // } // mousemove(event, d) { // tooltipXGXA.move(event, d); // } // mouseleave(event, d) { // tooltipXGXA.hide(event, d); // } }37:Td5d,/** * draw a chart with given data and html selector * @extends GeneralChart * @param {Object} data - data to be drawn * @param {String} selector - html selector * @param {Object} config - configuration of the chart * * @example * const data = [ * {label: 'A', value: 10}, * {label: 'B', value: 20}, * {label: 'C', value: 30}, * ] * const chart = new RankingChart(data, '#chart', {color: d3.scaleOrdinal(d3.schemeCategory10)}); * chart.draw(); */ class UMAPChart extends GeneralChart { constructor(data, selector, config) { super(data, selector, config); this.playerNames = this.data[0]["name"]; this.teamNames = this.data[0]["team"]; this.umapData = this.data[1]; this.sx = d3.scaleLinear().range([0, this.width]); this.sy = d3.scaleLinear().range([this.height, 0]); this.xAxis = d3.axisBottom(this.sx); this.yAxis = d3.axisLeft(this.sy); } setScalesXY() { this.sx.domain(d3.extent(this.umapData, (d) => d[0])); this.sy.domain(d3.extent(this.umapData, (d) => d[1])); } setAxisX(sel, classThis, text) { sel .attr("class", "axis axis--x") .attr("transform", "translate(0," + classThis.height + ")") .call(classThis.xAxis) .append("text") .attr("class", "axis-title") .attr("x", classThis.width / 2) .attr("y", "2em") .attr("dy", "0.71em") .attr("text-anchor", "middle") .attr("font-size", "1em") .attr("fill", "#666") .text(text); } setAxisY(sel, classThis, text) { sel .attr("class", "axis axis--y") .call(classThis.yAxis) .append("text") .attr("class", "axis-title") .attr("x", 60) .attr("y", -15) .attr("dy", "1em") .attr("text-anchor", "end") .attr("font-size", "1em") .attr("fill", "#666") .text(text); } applyMouseEvent(sel, classThis) { sel .on("mouseover", classThis.mouseover) .on("mousemove", classThis.mousemove) .on("mouseleave", classThis.mouseleave); } getTeamShortName(name) { if (name == "Paris-Saint-Germain") return "PSG"; return name.slice(0, 3).toUpperCase(); } /** draw the chart */ draw() { this.setScalesXY(); this.svg .append("g") .selectAll("circle") .data(this.umapData) .join("circle") .attr("player", (_, i) => this.playerNames[i]) .attr("team", (_, i) => this.teamNames[i]) .attr("cx", (d) => this.sx(d[0])) .attr("cy", (d) => this.sy(d[1])) .attr("r", (_, i) => this.conditional(i, 9, 3)) .attr("opacity", 0.6) .attr("stroke", "#888") .attr("fill", (_, i) => this.conditional(i, teamColors[this.teamNames[i]]["bg"], "#ccc") ) .on("mouseover", this.mouseover) .on("mousemove", this.mousemove) .on("mouseleave", this.mouseleave); this.svg.append("g").call(this.setAxisX, this, ""); this.svg.append("g").call(this.setAxisY, this, ""); } conditional(i, trueReturn, falseReturn) { if (this.teamNames[i] === this.config["team"]) { return trueReturn; } return falseReturn; } mouseover(event, d) { tooltipUmap.show(event, d); } mousemove(event, d) { const player = d3.select(this).attr("player"); const team = d3.select(this).attr("team"); tooltipUmap.move(event, { player: player, team: team }); } mouseleave(event, d) { tooltipUmap.hide(event, d); } }38:[{"id":"22a66691b366f8fbe76f99b6f4d94c67dbdaeb4bc7d9fb973eb6ff593dcdd70b1871cd790ba9ed5dd58ac081cdcff24b96062a7dd366735aa99e165b15ef4493","href":"https://static.observableusercontent.com/files/22a66691b366f8fbe76f99b6f4d94c67dbdaeb4bc7d9fb973eb6ff593dcdd70b1871cd790ba9ed5dd58ac081cdcff24b96062a7dd366735aa99e165b15ef4493","name":"Premier-League-2022-2023-players.csv","type":"text/csv","lastModified":1663711055160.325,"size":75407},{"id":"b579c8a9946eebe861b0699866d5b0fcb980c5885379e1989d3e0f83213a871ddc5325044427c5057bcf4709f0b522d3aae1446015ea0d3ba26aa639b0a27009","href":"https://static.observableusercontent.com/files/b579c8a9946eebe861b0699866d5b0fcb980c5885379e1989d3e0f83213a871ddc5325044427c5057bcf4709f0b522d3aae1446015ea0d3ba26aa639b0a27009","name":"Premier-League-2021-2022-fixtures.csv","type":"text/csv","lastModified":1663711055242.833,"size":148400},{"id":"a486f973f44fcdeb148c2ca8ba91fcdcc07c69975ae92a21cbafbf9decc39fd3abf05e8f6cbea2b83561390f3f753cb7e0ee6c69c19d4c7269947c7fd931c835","href":"https://static.observableusercontent.com/files/a486f973f44fcdeb148c2ca8ba91fcdcc07c69975ae92a21cbafbf9decc39fd3abf05e8f6cbea2b83561390f3f753cb7e0ee6c69c19d4c7269947c7fd931c835","name":"Premier-League-2021-2022-players.csv","type":"text/csv","lastModified":1663711054748.169,"size":97234},{"id":"dd75b87dd068bf3c1ec214371250f131c90f877cba52d9748e757e67da21071edb825bc1f269db64ae59c1049eb377c12df5f626e70eb9a07a8441377be7cb7d","href":"https://static.observableusercontent.com/files/dd75b87dd068bf3c1ec214371250f131c90f877cba52d9748e757e67da21071edb825bc1f269db64ae59c1049eb377c12df5f626e70eb9a07a8441377be7cb7d","name":"Premier-League-2022-2023-fixtures.csv","type":"text/csv","lastModified":1663711055175.397,"size":95444}] 2f:{"title":"Performance Visualisation (Premier League)","cells":[{"id":0,"value":"# Performance Visualisation (Premier League)","pinned":false,"hidden":false,"mode":"md"},{"id":850,"value":"## Team xG vs. xGA (2022-2023)","pinned":false,"hidden":false,"mode":"md"},{"id":1870,"value":"compName = 'Premier League'","pinned":true,"hidden":false,"mode":"ojs"},{"id":856,"value":"viewof team20222023 = Inputs.select(teams_20222023, {\n label: \"Select a team\",\n value: \"Troyes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":858,"value":"teams_20222023 = getTeamList(premierLeague20222023Fixtures)","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"{\n const chart = new TeamEXChart(\n premierLeague20222023Fixtures.filter((d) => d.Comp === compName),\n \"#team\",\n {\n team: team20222023,\n margin: { top: 20, right: 20, bottom: 30, left: 50 },\n width: 600,\n height: 600,\n year: \"20222023\"\n }\n );\n chart.draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"## Team xG vs. xGA (2021-2022)","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"viewof team20212022 = Inputs.select(teams_20212022, {\n label: \"Select a team\",\n value: \"Troyes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":837,"value":"teams_20212022 = getTeamList(premierLeague20212022Fixtures)","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"function getTeamList(fixtureList) {\n return new Set(fixtureList.map((d) => d.team))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"{\n const chart = new TeamEXChart(\n premierLeague20212022Fixtures.filter((d) => d.Comp === compName),\n \"#team\",\n {\n team: team20212022,\n margin: { top: 20, right: 20, bottom: 30, left: 50 },\n width: 600,\n height: 600,\n year: \"20212022\"\n }\n );\n chart.drawAll();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"/**\n * draw a general chart with given data and html selector\n */\nclass GeneralChart {\n /**\n * @param {Object} data - data to be drawn\n * @param {String} selector - html selector\n * @param {Object} config - configuration of the chart\n */\n constructor(data, selector, config) {\n this.data = data;\n this.config = config;\n this.selector = `${selector}_${this.config[\"year\"]}`;\n\n this.margin = this.config[\"margin\"];\n this.width = this.config[\"width\"] - this.margin.left - this.margin.right;\n this.height = this.config[\"height\"] - this.margin.top - this.margin.bottom;\n\n d3.select(this.selector).selectAll(\"svg\").remove();\n\n this.svg = d3\n .select(this.selector)\n .append(\"svg\")\n .attr(\"width\", this.width + this.margin.left + this.margin.right)\n .attr(\"height\", this.height + this.margin.top + this.margin.bottom)\n .append(\"g\")\n .attr(\n \"transform\",\n \"translate(\" + this.margin.left + \",\" + this.margin.top + \")\"\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"class Tooltip {\n constructor() {\n this.svg = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"background-color\", \"rgba(255, 255, 255, 0.7)\")\n .style(\"position\", \"absolute\")\n .style(\"border\", \"solid\")\n .style(\"border-width\", \"1px\")\n .style(\"border-radius\", \"5px\")\n .style(\"padding\", \"10px\");\n }\n\n show(event, d) {\n this.svg.style(\"opacity\", 1).style(\"display\", \"block\");\n }\n move(event, d) {\n \n }\n hide(event, d) {\n this.svg.style(\"opacity\", 0);\n this.svg.style(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"/** create a tooltip object */\nclass TooltipMatch extends Tooltip {\n constructor() {\n super()\n }\n\n show(event, d) {\n this.svg.style(\"opacity\", 1).style(\"display\", \"block\");\n }\n move(event, d) {\n const tFormat = d3.timeFormat(\"%Y %B %d\");\n this.svg\n .html(\n `\n${d.team} vs ${d.Opponent} (${d.Comp})
\n${d.GF} - ${d.GA} (exp: ${d.xG} - ${d.xGA})
\n${tFormat(d.Date)}, ${d.Time}`\n )\n .style(\"left\", event.pageX + 10 + \"px\")\n .style(\"top\", event.pageY - 10 + \"px\");\n }\n hide(event, d) {\n this.svg.style(\"opacity\", 0);\n this.svg.style(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"tooltipMatch = new TooltipMatch()","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"tooltipXGXA = new TooltipXGXA()","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"/*\n* \"Round 1\" -> 1 \n*/\nfunction round2number(round) {\n return +round.split(\" \")[1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"function result2color(result) {\n if (result === \"W\") return \"red\";\n if (result === \"D\") return \"green\";\n if (result === \"L\") return \"blue\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"function drawTriangle(points) {\n const tri = {\n draw: function (context) {\n context.moveTo(...points[0]);\n context.lineTo(...points[1]);\n context.lineTo(...points[2]);\n context.closePath();\n }\n };\n\n const customTriangle = d3.symbol().type(tri);\n return customTriangle;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"## Players - 2021-2022","pinned":false,"hidden":false,"mode":"md"},{"id":1069,"value":"viewof search = Inputs.search(premierLeague20212022Players)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1071,"value":"search","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"viewof team_20212022_XGXA = Inputs.select(teams_20222023, {\n label: \"Select a team\",\n value: \"Arsenal\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"

\n\n

","pinned":false,"hidden":false,"mode":"html"},{"id":893,"value":"{\n const chart = new PlayerChart(premierLeague20212022Players, \"#xgxa\", {\n team: team_20212022_XGXA,\n margin: { top: 20, right: 20, bottom: 30, left: 50 },\n width: 500,\n height: 500,\n year: \"20212022\",\n search: search[0]\n });\n // chart.drawXGXA();\n chart.drawG2Expected();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"function getClassFromData(d) {\n if (d == null) return \"none\";\n const playerName = d.Player.split(\" \").join(\"_\");\n return `${playerName}_${d.team}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"class TooltipXGXA extends Tooltip {\n constructor() {\n super();\n }\n\n show(event, d) {\n this.svg.style(\"opacity\", 1).style(\"display\", \"block\");\n }\n move(event, d) {\n const position = d.Pos === null ? \"--\" : d.Pos;\n this.svg\n .html(\n `\n

${d.Player} (${position}, ${d.Age})

\n Appearance: ${d.MP}, ${d.Min} Min. (Starting XI: ${d.Starts})
\n Goal: ${d.Gls} / 90min (exp: ${d.xG})
\n Assist: ${d.Ast} / 90min (exp: ${d.xA})\n `\n )\n .style(\"left\", event.pageX + 10 + \"px\")\n .style(\"top\", event.pageY - 10 + \"px\");\n }\n hide(event, d) {\n this.svg.style(\"opacity\", 0);\n this.svg.style(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"premierLeague20222023Players[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"function numberInString2number(numberInString) {\n return +`${numberInString}`.replace(\",\", \"\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"## Player 2022-2023","pinned":false,"hidden":false,"mode":"md"},{"id":1050,"value":"viewof team_20222023_XGXA = Inputs.select(teams_20222023, {\n label: \"Select a team\",\n value: \"Troyes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":"

\n\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1048,"value":"{\n const chart = new PlayerChart(premierLeague20222023Players, \"#xgxa\", {\n team: team_20222023_XGXA,\n margin: { top: 20, right: 20, bottom: 30, left: 50 },\n width: 500,\n height: 500,\n year: \"20222023\"\n });\n chart.drawXGXA();\n // chart.drawGtw2Expected();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"## Ranking - Expected Goals 2021-2022","pinned":false,"hidden":false,"mode":"md"},{"id":1141,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1228,"value":"f1 = d3.format(\".1f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"{\n const chart = new RankingChart(\n Array.from(fixtureByTeam20212022),\n \"#rankingXG\",\n {\n margin: { top: 20, right: 20, bottom: 30, left: 100 },\n width: 800,\n height: 500,\n year: \"20212022\",\n sxDomain: [0, 80]\n }\n );\n chart.drawXG();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1782,"value":"## Ranking - Expected Goals 2022-23","pinned":false,"hidden":false,"mode":"md"},{"id":1271,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1275,"value":"{\n const chart = new RankingChart(\n Array.from(fixtureByTeam20222023),\n \"#rankingXG\",\n {\n margin: { top: 20, right: 20, bottom: 30, left: 100 },\n width: 800,\n height: 500,\n year: \"20222023\",\n sxDomain: [0, 25]\n }\n );\n chart.drawXG();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"## xG vs xGA (From 2021-2022 To 2022-2023)","pinned":false,"hidden":false,"mode":"md"},{"id":1310,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1343,"value":"Array.from(fixtureByTeam20212022)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"{\n const chart = new TeamXGvXGAChart(\n [Array.from(fixtureByTeam20212022), Array.from(fixtureByTeam20222023)],\n \"#XGvXGA\",\n {\n margin: { top: 20, right: 20, bottom: 30, left: 100 },\n width: 800,\n height: 800,\n year: \"20222023\",\n sxDomain: [0.8, 2],\n syDomain: [0.8, 2]\n }\n );\n chart.draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"arrowPoints = [[0, 0], [0, 20], [20, 10]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"markerBoxWidth = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1470,"value":"markerBoxHeight = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1472,"value":"refX = markerBoxWidth / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"refY = markerBoxHeight / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"function zoomed({ transform }) {\n console.log(transform);\n svg.attr(\"transform\", transform);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1372,"value":"function merge(data1, data2) {\n const teamNames = mergeTeamNames(data1, data2);\n const res = [];\n for (const name of teamNames) {\n const data = {\n team: name,\n prev:\n data1.filter((d) => d[0] == name)[0] != null\n ? data1.filter((d) => d[0] == name)[0][1]\n : [],\n curr:\n data2.filter((d) => d[0] == name)[0] != null\n ? data2.filter((d) => d[0] == name)[0][1]\n : []\n };\n res.push(data);\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"function mergeTeamNames(fixtureData1, fixtureData2) {\n return Array.from(\n new Set(fixtureData1.map((d) => d[0]).concat(fixtureData2.map((d) => d[0])))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"## Player Mapping by UMAP","pinned":false,"hidden":false,"mode":"md"},{"id":1516,"value":"player2D_20212022 = convertPlayerDataIn2D(premierLeague20222023Players)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"player2D_20222023 = convertPlayerDataIn2D(premierLeague20222023Players)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"function convertPlayerDataIn2D(playerData) {\n const res = { name: [], team: [], data: [] };\n for (const p of playerData) {\n if (p.Player == \"Squad Total\") continue;\n if (p.Player == \"Opponent Total\") continue;\n if (p.MP <= 2) continue;\n res[\"name\"].push(p.Player);\n res[\"team\"].push(p.team);\n res[\"data\"].push([\n p.MP,\n // p.Gls,\n // p.Ast,\n p.npxG,\n p.xA\n ]);\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1526,"value":"UMAP = import(\"https://cdn.skypack.dev/umap-js@1.3.3\").then((d) => d.UMAP)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"function getPlayerEmbedding(playerData) {\n return new UMAP({\n nComponents: 2,\n minDist: 0.1,\n nNeighbors: 5\n }).fit(playerData);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1528,"value":"playerEmbedding_20212022 = getPlayerEmbedding(player2D_20212022[\"data\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1636,"value":"playerEmbedding_20222023 = getPlayerEmbedding(player2D_20222023[\"data\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"{\n const chart = new UMAPChart(\n [player2D_20212022, playerEmbedding_20212022],\n \"#UMAP\",\n {\n margin: { top: 20, right: 20, bottom: 30, left: 100 },\n width: 500,\n height: 500,\n year: \"20212022\",\n team: teamUmap20212022\n }\n );\n chart.draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1807,"value":"## UMAP 2021-2022","pinned":false,"hidden":false,"mode":"md"},{"id":1572,"value":"viewof teamUmap20212022 = Inputs.select(teams_20212022, { label: \"Select a team\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1535,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1545,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1610,"value":"tooltipUmap = new TooltipUMAP()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"### UMAP 2022-2023","pinned":false,"hidden":false,"mode":"md"},{"id":1650,"value":"viewof teamUmap20222023 = Inputs.select(teams_20222023, {\n label: \"Select a team\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1634,"value":"{\n const chart = new UMAPChart(\n [player2D_20222023, playerEmbedding_20222023],\n \"#UMAP\",\n {\n margin: { top: 20, right: 20, bottom: 30, left: 100 },\n width: 500,\n height: 500,\n year: \"20222023\",\n team: teamUmap20222023\n }\n );\n chart.draw();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"class TooltipUMAP extends Tooltip {\n constructor() {\n super();\n }\n\n show(event, d) {\n this.svg.style(\"opacity\", 1).style(\"display\", \"block\");\n }\n move(event, d) {\n const tFormat = d3.timeFormat(\"%Y %B %d\");\n this.svg\n .html(`${d.player} (${d.team})`)\n .style(\"left\", event.pageX + 10 + \"px\")\n .style(\"top\", event.pageY - 10 + \"px\");\n }\n hide(event, d) {\n this.svg.style(\"opacity\", 0);\n this.svg.style(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Data (2021-22)","pinned":false,"hidden":false,"mode":"md"},{"id":1375,"value":"merge(Array.from(fixtureByTeam20212022), Array.from(fixtureByTeam20222023))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1837,"value":"fixtureByTeam20222023 = d3.group(\n premierLeague20222023Fixtures.filter((d) => d.Comp === compName),\n (d) => d.team\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1835,"value":"fixtureByTeam20212022 = d3.group(\n premierLeague20212022Fixtures.filter((d) => d.Comp === compName),\n (d) => d.team\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1861,"value":"## Data (2021-2022)","pinned":false,"hidden":false,"mode":"md"},{"id":1825,"value":"premierLeague20212022Fixtures = FileAttachment(\"Premier-League-2021-2022-fixtures.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1841,"value":"premierLeague20212022Players = FileAttachment(\"Premier-League-2021-2022-players.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"## Data (2022-23)","pinned":false,"hidden":false,"mode":"md"},{"id":1827,"value":"premierLeague20222023Fixtures = FileAttachment(\"Premier-League-2022-2023-fixtures.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1828,"value":"premierLeague20222023Players = FileAttachment(\"Premier-League-2022-2023-players.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}