31:T7cc,draw = { const rPlayer = 15; const rBall = 10; const svg = d3.create("svg") .attr('width', width) .attr('height', height); //.call(d3.zoom().on("zoom", function () {svg.attr("transform", d3.event.transform)})); //Does not work correctly const player = svg.selectAll("g").data(frame).enter(); const ball = [+frame[0].x, +frame[0].y]; //field drawfield(svg, ''); //points drawPlayer(player, frame, ball, rBall, [10, rPlayer, 3, 2]); //Options : if (Array.isArray(options)){ //Temporal distances heat map if (options.includes("tempHeatMap")){ drawColorGrid(svg, num_player, frame); } //Delaunay graph if (options.includes("delaunayGraph")){ drawDelaunay(svg, frame); } //Specific zones if (options.includes("specificZones")){ drawZones(svg, num_player, frame); } //Pitch Control if (options.includes("pitchControl")){ drawPitchControl(svg, frame); } //voronoi if (options.includes("voronoi")){ const polygons = getPolygons(); addVoronoi(svg, polygons); } //Influence zones if (options.includes("influenceZones")){ drawInfluenceZones(svg, frame, ball); } //speed vectors if (options.includes("speed")){ const speedFactor = 10; addSpeedPlayer(player, speedFactor); } //trajectories if (options.includes("trajectToBall")){ if (specificPoint.includes("ball")){ drawtrajectories(player, ball) } if (specificPoint.includes("picked by user")){ svg.on("click", function() { var point = d3.mouse(this); point = [posX.invert(point[0]), posY.invert(point[1])] drawtrajectories(player, point); }) } } //Player trajectories if (options.includes("playerTraject")){ drawTrajPlayer(player, num_player); } }; player.selectAll('circle').raise() player.selectAll('text').raise() return svg.node() };32:T5c9,md`### Temporal distances model from [Gabin Rolland et al.](https://hal.archives-ouvertes.fr/hal-02482706/file/characterization_of_Space_and_Time-Dependece_of_3-Point_Shots_in_Basketball.pdf) Merely, I just copy and paste the model discribe in the article of [Gabin Rolland et al.](https://hal.archives-ouvertes.fr/hal-02482706/file/characterization_of_Space_and_Time-Dependece_of_3-Point_Shots_in_Basketball.pdf) and add few options to interact directly with the data. This model is based on temporal distances which means that we compare the time needed by a player to reach a certain location in function of his initial position and speed. Therefore, a point close to you in term of spatial distances can be away because you need to change your initial speed. The approximations made here are exactly the same as in the article. And we use the following method to obtain the equation of the temporal distance : Without loss of generality, we will determine the time it takes for a player at a given position and with a given speed to reach the point ${tex`(x,y)=(0,0)`}. Initially the velocity of the player at position ${tex `(x(0),y(0))`} is ${tex `(u(0),v(0))`}. We will consider that the player will use a constant force (per unit mass) in a given direction, of strength ${tex `|F|^2=F_x^2 + F_y^2`}. This is an assumption which allows to find a simple analytical solution. In particular, it allows to consider the two directions separately. Newton's law writes :`33:T8eb,field = (bgColor) => { const BOX_HEIGHT = (16.5*2 + 7.32)/ySize*100, BOX_WIDTH = 16.5/xSize*100, GOAL = 7.32/ySize*100, GOAL_AREA_HEIGHT = 5.4864*2/ySize*100 + GOAL, GOAL_AREA_WIDTH = 5.4864/xSize*100, strokeColor = bgColor == 'white' ? 'black' : 'white',// bgcolor = bgColor == 'white' ? 'white' : '#a8bc95'// const penaltyWeight = 0.5, goalWeight = 0.5; //same value because goalArea are in penaltyArea and so we will have a merge of the weight. const r = [ //background { "name" : "background", "rx": 0, "ry": 0, "height": height, "width": width, "color": bgcolor, "stroke": 'none'}, //field { "name" : "field", "rx": posX(0), "ry": posY(0), "height": innerheight, "width": innerwidth, "color": 'none', "stroke": strokeColor}, //penalty area right { "name" : "penalty area right", "rx": posX(100-BOX_WIDTH), "ry": posY((100-BOX_HEIGHT)/2), "height": posY(BOX_HEIGHT) - margin.top, "width": posX(BOX_WIDTH) - margin.left, "color": 'none', "stroke": strokeColor, "weight": penaltyWeight}, //penalty area left {"name" : "penalty area left", "rx": posX(0), "ry": posY((100-BOX_HEIGHT)/2), "height": posY(BOX_HEIGHT) - margin.top, "width": posX(BOX_WIDTH) - margin.left, "color": 'none', "stroke": strokeColor, "weight": penaltyWeight}, //goal area right {"name" : "goal area right", "rx": posX(100-GOAL_AREA_WIDTH), "ry": posY((100-GOAL_AREA_HEIGHT)/2), "height": posY(GOAL_AREA_HEIGHT) - margin.top, "width": posX(GOAL_AREA_WIDTH) - margin.left, "color": 'none', "stroke": strokeColor, "weight": goalWeight}, //goal area left {"name" : "goal area left", "rx": posX(0), "ry": posY((100-GOAL_AREA_HEIGHT)/2), "height": posY(GOAL_AREA_HEIGHT) - margin.top, "width": posX(GOAL_AREA_WIDTH) - margin.left, "color": 'none', "stroke": strokeColor, "weight": goalWeight}, //goal right {"name" : "goal right", "rx": posX(100), "ry": posY((100-GOAL)/2), "height": posY(GOAL) - margin.top, "width": posX(1) - margin.left, "color": 'none', "stroke": strokeColor}, //goal left {"name" : "goal left", "rx": posX(-1), "ry": posY((100-GOAL)/2), "height": posY(GOAL) - margin.top, "width": posX(1) - margin.left, "color": 'none', "stroke": strokeColor}]; return r; }34:T5e4,drawPlayer = (selection, frame, ball, rBall, rPlayer) => { const idx_highlight = closer(frame, ball); let b = false, r = 0, R = 0; if (Array.isArray(rPlayer)){ r = rPlayer.shift(); R = rPlayer.shift(); b = true; } else r = rPlayer; selection .node() .appendChild(svgBackgroundImage(imageBall_url, 2*rBall)); selection .append("circle") .attr("cx", posX(ball[0])) .attr("cy", posY(ball[1])) .attr("r", rBall) .attr("fill", "url(#pattern)") .style("stroke", "black") .style("stroke-width", 0.5) selection .append('circle') .attr('class', 'points') .attr('r', (d, i) => d.bgcolor == '' ? 0 : b ? rPlayer.includes(i) ? R : r : r ) .attr('cx', d => posX(d.x)) .attr('cy', d => posY(d.y)) .style('fill', d => !(d.bgcolor == '' && +d.z > 0) ? d.bgcolor : 'white')//(d.team == 'attack') ? 'black' : 'white' : 'white') .style('stroke', (d, i) => i == idx_highlight ? '#f2ff00' : d.edgecolor ) .style('stroke-width', (d, i) => i == idx_highlight ? '2' : '1') .style('opacity', 0.8); selection.append('text') .attr('text-anchor', 'middle') .attr('x', d => posX(d.x)) .attr('y', d => posY(d.y)) .attr('dy', '0.35em') .style('font-size', 13) .style('fill', d => d.edgecolor)//(d.team == 'attack') ? 'white' : 'black') .text((d, i) => i != 0 ? i : '') .style('font-size', (_, i) => b ? rPlayer.includes(i) ? 25 : 13 : 13) }35:T53b,gridColor = (data, grid, idx_player) => { const timemap = timeMap(data, grid); var max = 0, min = 0; const colorGrid = []; let playercolor; timemap.forEach((cell, i) => { if (Number.isInteger(idx_player) && idx_player < data.length && idx_player >= 0){ let player = cell[idx_player]; let team = data[idx_player+1].team; let val = invertTemp(player, team); let valnorm = normScale(val); let playercolor = d3.interpolateRdBu(valnorm); grid[i].color = playercolor; colorGrid.push(grid[i]); } else { let valA = 1000; let valD = 1000; cell.forEach((player, k) => { let team = data[k+1].team; //k+1 because we deleted the ball for distTemp calculations. if (team == 'attack') { if (player < valA) { valA = player; } } if (team == 'defense') { if (player < valD) { valD = player; } } }); let delta = valA - valD let norm = normScale(delta); let cellcolor = d3.interpolateRdBu(norm); grid[i].color = cellcolor; grid[i].delta = delta; colorGrid.push(grid[i]); } }); return colorGrid; };36:T84f,weightedGrid = (gridColor, dataPlayers, ball) => { const goalZ = goalsZones(ball); const penalA = goalZ[0], goalA = goalZ[1]; const conflictWeight = 0.5, ballWeight = 0.3, ballNextWeight = 0.6, nextTime = 0.75 * 20; //0.5 s later let xBallNext = +ball.x + +ball.dx * nextTime, yBallNext = +ball.y + +ball.dy * nextTime; gridColor.forEach(cell => { //conflict zones if (cell.delta < t_treshold){ let bool = false; for(let i = 1; i < dataPlayers.length; i++){ //we don't take into account the ball. let d = dist([posX(cell.x), posY(cell.y)], dataPlayers[i]) if (d <= d_treshold) { bool = true; } } if (bool) { cell.wc = conflictWeight; } else { cell.wc = 0; } } else { cell.wc = 0; } //penal Area if (posX(cell.x) >= penalA.rx && posX(cell.x) <= penalA.rx + penalA.width && posY(cell.y) >= penalA.ry && posY(cell.y) <= penalA.ry + penalA.height) { cell.wp = penalA.weight; } else { cell.wp = 0; } //goal Area if (posX(cell.x) >= goalA.rx && posX(cell.x) <= goalA.rx + goalA.width && posY(cell.y) >= goalA.ry && posY(cell.y) <= goalA.ry + goalA.height) { cell.wg = goalA.weight; } else { cell.wg = 0; } //ball location let distBallToCell = dist([posX(cell.x), posY(cell.y)], [posX(ball.x), posY(ball.y)]) if (distBallToCell < ball_treshold) { cell.wb = ballWeight; } else { cell.wb = 0; } //ball next location let nextDistBallToCell = dist([posX(cell.x), posY(cell.y)], [posX(xBallNext), posY(yBallNext)]); if (nextDistBallToCell < ball_treshold) { cell.wbl = ballNextWeight; } else { cell.wbl = 0; } }) var weightedgrid = gridColor.filter(cell => cell.wc != 0 || cell.wp != 0 || cell.wg != 0 || cell.wb != 0 || cell.wbl != 0); sumWeight(weightedgrid, conflictWeight, penalA.weight, goalA.weight, ballWeight, ballNextWeight); return weightedgrid; }37:T6f8,drawDelaunay = (selection, frame) => { const playerDotss = playerDots(frame); const dots = playerDotss.concat(newNodes); const origins = [...Array(playerDotss.length).keys()]; origins.shift(); //we delete the ball index const delaunay = d3.Delaunay.from(dots); const path = d3.geoPath(); const gridC = gridColor(frame, grid, -1); const run = shortest_tree({ origins : origins, graph : createGraph(dots) }).next().value; console.log('or', origins, 'gra', createGraph(dots)) /*const contours = d3.tricontour().thresholds(delaunayTreshold)( dots.map((d, i) => [d[0], d[1], run.cost[i]]).filter(d => isFinite(d[2])) );*/ const contours = d3.tricontour().thresholds(delaunayTreshold)( gridC.map((d, i) => [posX(d.x), posY(d.y), normScale(d.delta)]) ); console.log('contours', contours) const delaunayG = selection.append("g"); delaunayG.selectAll("path").data(contours) .enter() .append("path") .attr('d', path) .style('fill', c => Array.isArray(isolines) ? isolines.includes("colored") ? d3.interpolateRdBu(c.value) :'none' : 'none') .style('stroke', Array.isArray(isolines) ? isolines.includes("isolines") ? '#7d7d7d' : 'none' : 'none'); if (Array.isArray(isolines)) { //show nodes if (isolines.includes('dots')) { delaunayG.selectAll("circle").data(dots) .enter() .append("circle") .attr('cx', point => point[0]) .attr('cy', point => point[1]) .attr('r', 2) .style('fill', '#227d06'); } //show grid if (isolines.includes('grid')) { delaunayG.append("path") .attr('d', delaunay.render()) .style('fill', 'none') .style('stroke', '#7d7d7d') } } }38:T54d,pitchControl = (frame, pos) => { var sumAttack = 0, sumDefense = 0, posBall, dt = 0.05; frame.forEach((player, i) => { if (i == 0) { posBall = [xReal(+player.x), yReal(+player.y)] } else { let posPlayer = [xReal(+player.x), yReal(+player.y)], speed = [xReal(+player.dx)/dt, yReal(+player.dy)/dt], mu = math.add(math.matrix(posPlayer), math.divide(math.matrix(speed), 2)), theta = Math.atan(speed[1], speed[0]), R = math.matrix([[Math.cos(theta), -Math.sin(theta)],[Math.sin(theta),Math.cos(theta)]]), radius = getRadius(posPlayer, posBall), sx = radius * (1 + Srat(speed))/2, sy = radius * (1 - Srat(speed))/2, S = math.matrix([[sx,0],[0,sy]]), cov = math.multiply(R, S, S, math.inv(R)), normal = multivariateNormal(mu._data, cov._data); //console.log('posPlayer', posPlayer, 'speed', speed,' mu', mu, 'theta', theta, 'R', R, 'radius', radius, 'sx', sx, 'sy', sy, 'S', S, 'cov', cov); let influ = normal.pdf(pos) / normal.pdf(posPlayer); if (player.team == 'attack') { sumAttack += influ; } else if (player.team == 'defense') { sumDefense += influ; } } }); const PC = 1 / (1 + Math.exp(sumAttack - sumDefense)); return PC; }39:T1d19,equationSolver4 = (aq, bq, cq, dq, eq) => { //Permet de résoudre une équation algébrique d'ordre 4. /* This script and many more are available free online at The JavaScript Source!! http://www.javascriptsource.com Created by: Brian Kieffer | http://www.freewebs.com/brianjs/ */ var aq2 = aq; // Keeps Orignial AQ value var bq2 = bq;// Keeps Orignial BQ Value var perfect = 0; var perfectbiquadratic = 0; // The Bi-Quadratic 2 Perfect Squares that are negative test if (cq*cq - 4*aq*eq == 0 && cq > 0) { perfectbiquadratic = 1; } // Divide Equation by the X^4 Coefficent to make equation in the form of X^4 + AX^3 + BX^2 + CX + D bq /= aq; cq /= aq; dq /= aq; eq /= aq; aq = 1; var f2 = cq - (3*bq*bq / 8); var g2 = dq + (bq*bq*bq/8) - (bq*cq/2); var h2 = eq - (3*bq*bq*bq*bq/256) + (bq*bq*(cq/16)) - (bq*dq/4); var a = 1; var b = f2/2; var c = (f2*f2 - (4*h2)) / 16; var d = -1*((g2*g2)/64); if (b == 0 && c == 0 && d == 0) { perfect = 1; } // Cubic routine starts here….. var f = (((3*c) / a) - ((b*b) / (a*a))) / 3; var g = (((2*b*b*b) / (a*a*a)) - ((9*b*c) / (a*a)) + ((27*d) / a)) / 27; var h = eval(((g*g)/4) + ((f*f*f)/27)); var z = 1/3; var i; var j; var k; var l; var m; var n; var p; var xoneterm; var xtwoterm; var xthreeterm; var alreadydone; var alreadydone2 = 0; var ipart = 0; var p = 0; var q = 0; var r = 0; var s = 0; if (h <= 0) { var exec = 2; i = Math.sqrt(((g*g) / 4) - h); j = Math.pow(i,z); k = Math.acos(-1 * (g / (2*i))); l = -1*j; m = Math.cos(k / 3); n = Math.sqrt(3) * Math.sin(k / 3); p = (b / (3*a)) * -1; xoneterm = (2*j) * Math.cos(k/3) - (b / (3*a)); xtwoterm = l * (m + n) + p; xthreeterm = l * (m - n) + p; } if (h > 0) { var exec = 1; var R = (-1*(g / 2)) + Math.sqrt(h); if (R < 0) { var S = -1*(Math.pow((-1*R),z)); } else { var S = Math.pow(R,z); } var T = (-1*(g / 2)) - Math.sqrt(h); if (T < 0) { var U = -1*(Math.pow((-1*T),z)); } else { var U = Math.pow(T,z); } xoneterm = (S + U) - (b / (3*a)); xtwoterm = (-1*(S+U)/2) - (b / (3*a)); var ipart = ((S-U) * Math.sqrt(3)) / 2; xthreeterm = xtwoterm; } if (f == 0 && g == 0 && h == 0) { if ((d/a) < 0 ) { xoneterm = (Math.pow((-1*(d/a)),z)); xtwoterm = xoneterm; xthreeterm = xoneterm; } else { xoneterm = -1*(Math.pow((d/a),z)); xtwoterm = xoneterm; xthreeterm = xoneterm; } } // ….and ends here. // Return to solving the Quartic. if (ipart == 0 && xoneterm.toFixed(10) == 0) { var alreadydone2 = 1; var p2 = Math.sqrt(xtwoterm); var q = Math.sqrt(xthreeterm); var r = -g2 / (8*p2*q); var s = bq2/(4*aq2); } if (ipart == 0 && xtwoterm.toFixed(10) == 0 && alreadydone2 == 0 && alreadydone2 != 1) { var alreadydone2 = 2; var p2 = Math.sqrt(xoneterm); var q = Math.sqrt(xthreeterm); var r = -g2 / (8*p2*q); var s = bq2/(4*aq2); } if (ipart == 0 && xthreeterm.toFixed(10) == 0 && alreadydone2 == 0 && alreadydone2 != 1 && alreadydone2 != 2) { var alreadydone2 = 3; var p2 = Math.sqrt(xoneterm); var q = Math.sqrt(xtwoterm); var r = -g2 / (8*p2*q); var s = bq2/(4*aq2); } if (alreadydone2 == 0 && ipart == 0) { if (xthreeterm.toFixed(10) < 0) { var alreadydone2 = 4; var p2 = Math.sqrt(xoneterm); var q = Math.sqrt(xtwoterm); var r = -g2 / (8*p2*q); var s = bq2/(4*aq2); } else { var alreadydone2 = 5; var p2 = Math.sqrt(xoneterm.toFixed(10)); var q = Math.sqrt(xthreeterm.toFixed(10)); var r = -g2 / (8*p2*q); var s = bq2/(4*aq2); } } if (ipart != 0) { var p2 = isquareroot(xtwoterm,ipart,0); var p2ipart = isquareroot(xtwoterm,ipart,1); var q = isquareroot(xthreeterm,-ipart,0); var qipart = isquareroot(xthreeterm,-ipart,1); var mult = calcmult(p2,p2ipart,q,qipart,0); var r = -g2/(8*mult); var s = bq2/(4*aq2); } if (ipart == 0 && xtwoterm.toFixed(10) < 0 && xthreeterm.toFixed(10) < 0) { xtwoterm /= -1 xthreeterm /= -1 var p2 = 0; var q = 0; var p2ipart = Math.sqrt(xtwoterm); var qipart = Math.sqrt(xthreeterm); var mult = calcmult(p2,p2ipart,q,qipart,0); var r = -g2/(8*mult); var s = bq2/(4*aq2); var ipart = 1; } if (xoneterm.toFixed(10) > 0 && xtwoterm.toFixed(10) < 0 && xthreeterm.toFixed(10) == 0 && ipart == 0) { xtwoterm /= -1; var p2 = Math.sqrt(xoneterm); var q = 0; var p2ipart = 0; var qipart = Math.sqrt(xtwoterm); var mult = calcmult(p2,p2ipart,q,qipart,0); var mult2 = calcmult(p2,p2ipart,q,qipart,1); var r = -g2/(8*mult); if (mult2 != 0) { var ripart = g2/(8*mult2); var r = 0; } var s = bq2/(4*aq2); var ipart = 1; } if (xtwoterm.toFixed(10) == 0 && xthreeterm.toFixed(10) == 0 && ipart == 0) { var p2 = Math.sqrt(xoneterm); var q = 0; var r = 0; var s = bq2/(4*aq2); } if (ipart == 0) { var x1 = eval((p2 + q + r - s).toFixed(10)); var x2 = eval((p2 - q - r - s).toFixed(10)); var x3 = eval((-p2 + q - r - s).toFixed(10)); var x4 = eval((-p2 - q + r - s).toFixed(10)); var x1i = 0; var x2i = 0; var x3i = 0; var x4i = 0; } if (perfect == 1) { var x1 = -bq/4; var x2 = -bq/4; var x3 = -bq/4; var x4 = -bq/4; var x1i = 0; var x2i = 0; var x3i = 0; var x4i = 0; } if (ipart == 0 && xtwoterm.toFixed(10) < 0 && xthreeterm.toFixed(10) < 0) { xtwoterm /= -1; xthreeterm /= -1; var p2 = 0; var q = 0; var p2ipart = Math.sqrt(xtwoterm); var qipart = Math.sqrt(xthreeterm); var mult = calcmult(p2,p2ipart,q,qipart,0); var r = -g2/(8*mult); var s = bq2/(4*aq2); var ipart = 1; } if (xoneterm.toFixed(10) > 0 && xtwoterm.toFixed(10) < 0 && xthreeterm.toFixed(10) == 0 && ipart == 0) { xtwoterm /= -1 var p2 = Math.sqrt(xoneterm); var q = 0; var p2ipart = 0; var qipart = Math.sqrt(xtwoterm); var mult = calcmult(p2,p2ipart,q,qipart,0); var mult2 = calcmult(p2,p2ipart,q,qipart,1); var r = -g2/(8*mult); if (mult2 != 0) { var ripart = g2/(8*mult2); var r = 0; } var s = bq2/(4*aq2); var ipart = 1; } if (xtwoterm.toFixed(10) == 0 && xthreeterm.toFixed(10) == 0 && ipart == 0) { var p2 = Math.sqrt(xoneterm); var q = 0; var r = 0; var s = bq2/(4*aq2); } if (ipart != 0) { var x1 = eval((p2 + q + r - s).toFixed(10)); var x2 = eval((p2 - q - r - s).toFixed(10)); var x3 = eval((-p2 + q - r - s).toFixed(10)); var x4 = eval((-p2 - q + r - s).toFixed(10)); var x1i = eval((p2ipart + qipart).toFixed(10)); var x2i = eval((p2ipart - qipart).toFixed(10)); var x3i = eval((-p2ipart + qipart).toFixed(10)); var x4i = eval((-p2ipart - qipart).toFixed(10)); } if (perfectbiquadratic == 1) { var x1 = 0; var x2 = 0; var x3 = 0; var x4 = 0; var x1i = eval(Math.sqrt(cq/2).toFixed(10)); var x2i = eval(Math.sqrt(cq/2).toFixed(10)); var x3i = -eval(Math.sqrt(cq/2).toFixed(10)); var x4i = -eval(Math.sqrt(cq/2).toFixed(10)); } return ({'x1' : x1 + ' ' + x1i, 'x2' : x2 + ' ' + x2i, 'x3' : x3 + ' ' + x3i, 'x4' : x4 + ' ' + x4i}) };3a:[{"id":"f28c3674c6554174bb7e80e40e5123b6fc560aecfad06cae01ddf553773f277c15c6bfc1a8558feb5cd23cabcf953a314bc2c96312350cff20a5278a39432bd7","href":"https://static.observableusercontent.com/files/f28c3674c6554174bb7e80e40e5123b6fc560aecfad06cae01ddf553773f277c15c6bfc1a8558feb5cd23cabcf953a314bc2c96312350cff20a5278a39432bd7","name":"Soccerball.svg","type":"image/svg+xml","lastModified":1593529361245.857,"size":1311}] 2f:{"title":"Liverpool goal 2019","cells":[{"id":6,"value":"md`# Liverpool goal 2019`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md `In this notebook, we visualize the Liverpool goal of the year 2019. The data used come from *Friends of tracking*, their ressources are available in this [github](https://github.com/Friends-of-Tracking-Data-FoTD/Last-Row).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"md`## to Do : \n* [x] Put a distinctive sign for the player who has the ball. \n* Add different occupation space models.\n * [x] voronoi cell\n * [x] heat map of the space influence of each player based on temporal distances. \n * [] heat map with stamina.\n * [x] discrete the space to use discrete models and add trajectories between player and strategic points.\n * [x] influence zone with a multivariate normal distribution.\n * [x] cone of influence taking into account orientation and speed.\n* [x] Display the speed of each player.\n* [x] Display players trajectories and their trajectories to the ball.\n* [] function allowing a merge of different models.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`## Visualisation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"viewof match = select({\n description: \"Choose a match to visualize.\",\n options: plays,\n multiple: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"viewof n_frame = Scrubber(frames, {loop: false, autoplay: false, delay: 50}); //les données sont en 20 fps.","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"viewof options = checkbox({\n title: \"Options\",\n description: \"Please select the options you want to add to the visualisation. Becarful with temporal distances, it is very costly. I suggest to compute one frame at a time.\",\n options: [\n { value: \"voronoi\", label: \"Voronoi\" },\n { value: \"speed\", label: \"Speed vectors\" },\n { value: \"tempHeatMap\", label: \"Temporal distances\" },\n { value: \"trajectToBall\", label: \"Player trajectories to point\" },\n { value: \"playerTraject\", label: \"Player trajectories\" },\n { value: \"delaunayGraph\", label: \"Delaunay graph\" },\n { value: \"specificZones\", label: \"Specific zones\" },\n { value: \"influenceZones\", label: \"Influence zones\" },\n { value: \"pitchControl\", label: \"Pitch control\" }\n ],\n value: [\"speed\"],\n submit: true\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1262,"value":"viewof num_player = number({\n min: -2, \n max: player_max, //we delete the ball.\n step: 1, \n value: -1, \n title: \"Player index\",\n description: \"Default value is -1 which selects all players. -2 selects the ball. The player number has a difference of 1 with the index player.\",\n submit: false\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"viewof refine = slider({\n min: 0.5, \n max: 4, \n step: 0.5, \n value: 2, \n title: \"Grid refine Factor\",\n description: \"Refine the mesh. Becarful, it can be very costly. It works for temporal distances, specific zones and pitch control.\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2312,"value":"md `#### Trajectories parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2077,"value":"viewof specificPoint = checkbox({\n title: \"Specific point\",\n description: \"Choose a specific point to visualize the trajectory from player index to this point.\",\n options: [\n { value: \"ball\", label: \"ball\" },\n { value: \"picked by user\", label: \"picked by user\" }\n ],\n value: [\"ball\"],\n submit: true\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1959,"value":"viewof delta_t = slider({\n min: 0.5, \n max: 4, \n step: 0.5, \n value: 2, \n title: \"Delta_t\",\n description: \"Change the size of the player trajectory.\",\n submit: true\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"md`#### Temporal distances parameters\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"viewof epsilon = slider({\n min: 0.01, \n max: 0.5, \n step: 0.02, \n value: 0.2, \n title: \"Epsilon\",\n description: \"Change the range of the normScale.\",\n submit: true\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1589,"value":"viewof timeExponent = slider({\n min: 1, \n max: 4, \n step: 1, \n value: 2, \n title: \"Time exponent\",\n description: \"Intensify picks and smooth other zones.\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2650,"value":"md`#### Specific zone parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2523,"value":"viewof t_treshold = slider({\n min: 0.05, \n max: 0.15, \n step: 0.01, \n value: 0.1, \n title: \"Time treshold\",\n description: 'Select zones which satisfy Delta_t < t_treshold',\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2527,"value":"viewof d_treshold = slider({\n min: 10, \n max: 150, \n step: 10, \n value: 80, \n title: \"Distance treshold\",\n description: \"Select zones which satisfy d(player-cell) < d_treshold\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2656,"value":"viewof ball_treshold = slider({\n min: 5, \n max: 100, \n step: 5, \n value: 30, \n title: \"Ball treshold\",\n description: \"Select zones which satisfy d(ball-cell) < ball_treshold\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2285,"value":"md`#### Delaunay parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2292,"value":"viewof delaunayTreshold = slider({\n min: 25, \n max: 200, \n step: 25, \n value: 50, \n title: \"Treshold\",\n description: \"Change the precision of the graph.\",\n submit: false\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2298,"value":"viewof isolines = checkbox({\n title: \"Isolines\",\n description: \"Show different options for the delaunay grid.\",\n options: [\n { value: \"isolines\", label: \"Isolines\" },\n { value: \"colored\", label: \"Colored map\" },\n { value: \"dots\", label: \"Show nodes\" },\n { value: \"grid\", label: \"Show grid\" }\n ],\n value: [\"isolines\", \"colored\"]\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1630,"value":"md`## Models Explanation\n\n### Coordinates\n\nWe use 3 types of coordinate system : \n* The data coordinate system (DCS) [0, 100] along x and y axis.\n* The real coordinate system (RCS) [0, xSize] along x and [0, ySize] along y.\n* The picture coordinate system (PCS) [0, width] along x and [0, height] along y.\n\nAll calculations are done in the RCS and then plot in the PCS thanks to the xReal, yReal, posX and posY scales. Becarful with length because when we translate it in the PCS we add the left margin for width and top margin for height (due to the definition of the scales), therefore to translate a lentgh we also need to substract the margin.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3049,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3053,"value":"tex.block`\nd_t^2x = F_x\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3057,"value":"md`so that we have :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3061,"value":"tex.block`x(t) = x(0) + u(0)t + \\frac{1}{2}F_x t^2.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3068,"value":"md `We evaluate this expression at ${tex `x = 0`}, and want to determine at which time this point is reached. Let us first determine the force per mass ${tex `F_x`}, `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3070,"value":"tex.block`F_x = - 2\\frac{x(0)+u(0)t}{t^2}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3072,"value":"md `Analogous expressions are written for ${tex `d_t^2 y`}, ${tex `y(t)`} and ${tex `F_y`}.\nSince ${tex `|F|^2 = F_x^2 + F_y^2`}, we have,`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3074,"value":"tex.block`F^2 = \\frac{4}{t^4} \\left(\\left(x(0)+u(0)t\\right)^2 + \\left(y(0)+v(0)t\\right)^2\\right)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3076,"value":"md `Yielding a ${tex `4^{th}`} order polynomial for t, `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3066,"value":"tex.block`t^4 - \\frac{4}{F^2}\\left(\\left(x(0)+u(0)t\\right)^2 + \\left(y(0)+v(0)t\\right)^2\\right) = 0`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3079,"value":"md`See the temporal distances section to view the implementation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3090,"value":"md `### The pitch control model from [Javier Fernandez and Luke Bornn](http://www.sloansportsconference.com/wp-content/uploads/2018/03/1003.pdf)\n\nWe still study the influence of each player on the pitch but we adopt a different approach to compute the player influence. I will detail the equations used to compute the model but you can find a more accurate development from [Robert Hickman](https://www.robert-hickman.eu/post/fall_back_in_to_space/). \n\nWe consider that the pitch control at position ${tex`\\vec{p}`} at time t, ${tex`PC(\\vec{p}, t)`} is determined by the following equation : `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3093,"value":"tex.block`PC(\\vec{p}, t) = \\frac{1}{1 + exp(\\Sigma_{attack} I_{i}(\\vec{p}, t) - \\Sigma_{defense} I_{i}(\\vec{p}, t))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3095,"value":"md`Where ${tex `I_i`} is the individual player influence. It is defined as followed :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3097,"value":"tex.block`I_i(\\vec{p}, t) = \\frac{f_i(\\vec{p}, t)}{f_i(\\vec{p}_{player}, t)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3099,"value":"md`${tex `f_i(\\vec{p}, t)`} is a multivariate normal distribution :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3088,"value":"tex.block`f_i(\\vec{p}, t) = \\frac{1}{\\sqrt{(2\\pi)^2 |COV|}} exp(-\\dfrac{1}{2} (\\vec{p} - \\vec{\\mu_i}(\\vec{v}, t))^t COV (\\vec{p} - \\vec{\\mu_i}(\\vec{v}, t)))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3108,"value":"md`with ${tex `\\vec{\\mu_i}(\\vec{v}, t)`} the mean position of the distribution and ${tex `COV`} the covariance matrix. The mean position of the distribution is defined as : `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3116,"value":"tex.block`\n \\vec{\\mu_i}(\\vec{v}, t) = \\vec{p}_{player} + \\frac{\\vec{v}_{player}}{2}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3125,"value":"md`Therefore we center the normal distribution on the position of the player 0.5 second later. \nThe covariance matrix is defined as : `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3130,"value":"tex.block`\n COV = R \\cdot S \\cdot S \\cdot R^{-1}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"md`Where ${tex `R(\\theta)`} is the rotation matrix for the speed angle ${tex `\\theta`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3131,"value":"tex.block`\n R(\\theta) = \\begin{pmatrix}\ncos(\\theta) & -sin(\\theta)\\\\\nsin(\\theta) & cos(\\theta)\n\\end{pmatrix} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3172,"value":"md `And S is a scaling matrix.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3141,"value":"tex.block`\n S = \\begin{pmatrix}\n\\frac{R_{influence} (1 + S_{rat}(\\vec{v}))}{2} & 0\\\\\n0 & \\frac{R_{influence} (1 - S_{rat}(\\vec{v}))}{2}\n\\end{pmatrix} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3182,"value":"md`It depends on the parameters ${tex `R_{influence}`} which is a radius of influence and on a speed ratio ${tex `S_{rat}(\\vec{v})`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3145,"value":"tex.block`\n S_{rat}(\\vec{v}) = \\frac{||\\vec{v}||^2}{13^2}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3191,"value":"md`The 13 factor symbolize the maximum speed of a player in meter per second.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3149,"value":"tex.block`\n R_{influence} = \\left\\{ \\begin{array}{ll}\n 4 + 6 \\times \\frac{||\\vec{p}_{player} - \\vec{p}_{ball}||^3}{18^3} & if \\ R_{influence} < 10 \\\\\n 10 & else.\n \\end{array}\n\\right.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3195,"value":"md`We consider that a player has a radius of influence of 10 meters exept if the ball is closer than 18 meters, in this case the radius decrease. It represents the fact that a player close to the ball is more focus than a player away.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"md`## Realisation\n### Field`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2544,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"drawfield = (selection, bgColor) => {\n \n let opac = 0.8\n //halfway line\n const halfWayLine = (context) => {\n context.moveTo(posX(50), posY(0));\n context.lineTo(posX(50), posY(100));\n return context; \n };\n \n selection.selectAll('rect').data(field(bgColor))\n .enter()\n .append('rect')\n .attr('x', d => d.rx)\n .attr('y', d => d.ry)\n .attr('width', d => d.width)\n .attr('height', d => d.height)\n .style('fill', d => d.color)\n .style('stroke', d => d.stroke)\n .style('opacity', opac);\n \n //halfway circle\n selection.append('circle')\n .attr('cx', posX(50))\n .attr('cy', posY(50))\n .attr('r', posX(9.15/xSize*100) - margin.left)\n .style('fill', 'none')\n .style('stroke', bgColor == 'white' ? 'black' : 'white')//\n .style('opacity', opac);\n \n selection.append('path')\n .attr('d', halfWayLine(d3.path())) //on récupère le chemin en format svg\n .style('stroke', bgColor == 'white' ? 'black' : 'white')//\n .style('opacity', opac);\n\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":3284,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":3325,"value":"imageBall_url = await FileAttachment(\"Soccerball.svg\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3323,"value":"import {svgBackgroundImage} from \"@luciyer/svg-defs-background-image\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"md` ### Match\nGathering of all matches played by Liverpool during 2019.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"plays = {\n let col = \"\";\n const dataTemp = rawData.map(d => d.play).filter(d => {\n if (d === col){\n return false;\n }\n else { \n col = d;\n return true;\n }\n }); \n return dataTemp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`Extract the match thanks to his name`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"getplay = (rawData, name_play) => {\n \n const temp = rawData.filter(object => object.play == name_play);\n \n return temp;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"Datamatch = getplay(rawData, match);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2063,"value":"md`the number of players recorded for this goal.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1975,"value":"player_max = getFrame(0, Datamatch).length - 2 ","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"md` ### Frames\nGathering of frame sequency from the chosen match. Then a frame selected by the n_frame parameter.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"frames = Array.from({length: d3.max(Datamatch, d => +d.frame)}, (_, i) => i)","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"frame = getFrame(n_frame, Datamatch);","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"md`Function to get the selected frame from the selected match.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"getFrame = (nFrame, Datamatch) => {\n \n let temp = [...Datamatch.filter(object => parseFloat(object.frame) == nFrame)];\n \n //reverse the Y axis.\n temp.forEach((A, i) => {\n let B = Object.assign({}, A);\n B.y = 100 - B.y;\n B.dy = -B.dy;\n temp[i] = B;\n })\n\n return temp;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":2562,"value":"md`Function to get the position on the picture of each player.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2560,"value":"dataPlayers = playerDots(frame);","pinned":true,"hidden":false,"mode":"ojs"},{"id":631,"value":"md`### Highlight the player who has the ball\nWe highlight the player who has the ball. It's define as the player closer to the ball if the distance between the ball and the player is inferior to 2m.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"closer = (frame, ball) => {\n let temp = 1000;\n let idx = 0;\n\n frame.forEach((player, i) => {\n let distance = dist([xReal(ball[0]), yReal(ball[1])], [xReal(+player.x), yReal(+player.y)]);\n if( distance < temp && i != 0) {\n temp = distance;\n idx = i;\n }\n });\n if (temp > 0.5){\n idx = NaN;\n }\n return idx;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"dist = (pos1, pos2) => {\n const d = Math.sqrt((pos1[0] - pos2[0])**2 + (pos1[1] - pos2[1])**2);\n return d;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"md`## Options\n### Voronoi`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1988,"value":"getPolygons = () => {\n const voronoi = d3.voronoi()\n .extent([[posX(0), posY(0)],[posX(100), posY(100)]]);\n //.extent([[0, 0],[width, height]]);\n const position = [];\n frame.forEach(d => position.push([posX(+d.x), posY(+d.y)])) \n position.shift() // on enlève la position du ballon pour ne pas calculer sa cellule.\n const polygons = voronoi.polygons(position);\n \n return polygons\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"addVoronoi = (selection, polygons) => {\n selection.append('g').selectAll('polygons')\n .data(polygons)\n .enter()\n .append('path')\n .attr('class', 'polygons')\n .attr('d', polyToPath)\n .style('fill', 'none')\n .style('stroke', '#778079');\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"polyToPath = (polygon) => {\n return polygon ? 'M' + polygon.join('L') + 'Z' : \"none\";\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"md`### Speed Vectors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"addSpeedPlayer = (selection, factor) => {\n selection.append(\"line\")\n .attr('x1', d => posX(+d.x))\n .attr('y1', d => posY(+d.y))\n .attr('x2', d => posX(+d.x + factor * +d.dx))\n .attr('y2', d => posY(+d.y + factor * +d.dy))\n .attr(\"stroke\", \"black\") \n .attr(\"stroke-width\", 2) \n .attr(\"marker-end\",\"url(#arrow)\") //ceci ne fonctionne pas \n .raise();\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"md`### Temporal distances influence \n\nThe temporal distances model works but I think we can optimize the code to run the notebook faster. Currently, we use equations below to compute a value for a cell, then pass it to a power scale exponent 0.5 and finally interpolate a color between red (attack) to blue (defense). \nWhen all player are selected :\n\n${tex `value(x, y) = t_{min}^{attack}(x, y) - t_{min}^{defense}(x, y)`}\n\nwhere x, y is the position of the cell.\n\nWhen one player is selected we use : \n${tex `value(x, y) = \\frac{1}{t(x,y)}`}\n\nTo compute the model we follow those steps : \n* We create a grid of the size of the field.\n* We compute the temporal distance between each point of this grid and each player.\n* We obtain a grid (Y, X, players).\n* Then, we sum the invert times and scale them to obtain values between [0, 1] and pass it into a color scale (red to blue).\n* Finally we add the computed colors to the grid and draw the grid.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2703,"value":"md`We adjust F (in m/s-2) to be coherent with our data coordinate system. It is a force per mass unit.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"F = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"grid = {\n const ymax = 100;\n const xmax = 100;\n\n const dx = 1*refine;\n const dy = 1*refine;\n const N = Math.round(xmax / dx);\n const M = Math.round(ymax / dy);\n \n var temp = [...Array(M).keys()];\n var grid = [];\n temp.forEach(line => grid.push([...Array(N).keys()]));\n \n let y = 0;\n grid.forEach((col, i) => {\n let x = 0;\n col.forEach((d, j) => {\n grid[i][j] = ({'x' : x, 'y' : y, 'width' : dx, 'height' : dy})\n x += dx;\n })\n y += dy;\n }) \n \n grid = math.reshape(grid, [N*M])\n \n return grid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"timeMap = (data, grid) => {\n \n const dt = 0.05 //s pour 20fps\n const x0 = data.map(d => xReal(+d.x));\n const y0 = data.map(d => yReal(+d.y));\n const vx = data.map(d => xReal(+d.dx) / dt);\n const vy = data.map(d => yReal(+d.dy) / dt);\n \n var timeMap = [];\n var t = [];\n var temp;\n \n for (let idx = 0; idx < grid.length; idx++) {\n \n let players = [];\n for (let idx_player = 1; idx_player < x0.length; idx_player++) { //l'index 0 représente la balle.\n let g = grid[idx];\n temp = distanceTime(x0[idx_player], y0[idx_player], xReal(g.x + g.width/2), yReal(g.y + g.height/2), vx[idx_player], vy[idx_player], F);\n players.push(temp);\n \n };\n timeMap.push(players);\n };\n \n return timeMap;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"normScale = d3.scalePow().exponent(1).domain([-1, 1]).range([0, 1]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1427,"value":"invertTemp = (player, team) => {\n \n let val;\n \n if (team == 'attack') {\n val = - 1/(player + epsilon)**2\n }\n else if (team == 'defense') {\n val = 1/(player + epsilon)**2\n }\n else {\n console.log(\"error : no team for this player.\") \n }\n \n return val;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"drawColorGrid = (selection, player, frame) => {\n \n const colorgrid = gridColor(frame, grid, player);\n \n const g = selection.append('g');\n\n g.selectAll('cell').data(colorgrid).enter()\n .append('rect')\n .attr('class', 'cell')\n .attr('x', cell => posX(cell.x))\n .attr('y', cell => posY(cell.y))\n .attr('width', cell => posX(cell.width) - margin.left)\n .attr('height', cell => posY(cell.height) - margin.top)\n .style('fill', cell => cell.color);\n \n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":2716,"value":"md`### Specific zones`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2911,"value":"md `We select zones which seem interesting based on our intuition about football (maybe it's completely absurd to look at this type of zone). For each of them we affect a weight, w, which represents the importance of controlling this zone. There are 5 types of zone :\n\n* Conflict zone : the zone where it's quasi the same time for the two closest players to reach this zone. wc = 0.5.\n* Penalty area : Obvious..., wp = 0.3.\n* Goal area : same..., wg = 0.5.\n* Near the ball : the zone is defined as the vicinity of the ball. wb = 0.3\n* Near the next location of the ball : the zone is defined as the vicinity of the ball location at t + 0.75s. wbl = 0.6.\n\nTo calculate the total weight of a cell influenced by several type of zone we use this equation :\n\n${tex `weight(cell) = \\frac{\\Sigma_{i \\in \\{c, p, g, b, bl\\}} w_i(cell)}{\\Sigma_{i \\in \\{c, p, g, b, bl\\}} w_i}`}\n\nKnowing that ${tex `w_i = 0`} if the cell is not in the zone i.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2556,"value":"goalsZones = (ball) => {\n \n //zones close to the goal\n let side = \"\";\n if (ball.x > 50) { //we select only a halfway of the field\n side = \"right\"; \n }\n else {\n side = \"left\";\n }\n let goalsA = field.filter(d => d.name == \"penalty area \" + side || d.name == \"goal area \" + side);\n return goalsA;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2583,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2574,"value":"sumWeight = (weightedGrid, wc, wp, wg, wb, wbl) => {\n \n const sum = wp + wg + wc + wb + wbl;\n weightedGrid.forEach(cell => cell.weight = (cell.wc + cell.wp + cell.wg + cell.wb + cell.wbl)/sum);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2611,"value":"drawZones = (selection, player, frame) => {\n \n const ball = frame[0];\n const gridcolor = gridColor(frame, grid, player),\n weightedgrid = weightedGrid(gridcolor, dataPlayers, ball)\n \n const zonesG = selection.append(\"g\");\n \n zonesG.selectAll('zone').data(weightedgrid)\n .enter()\n .append(\"rect\")\n .attr(\"class\", 'zone')\n .attr('x', cell => posX(cell.x))\n .attr('y', cell => posY(cell.y))\n .attr('width', cell => posX(cell.width) - margin.left)\n .attr('height', cell => posY(cell.height) - margin.top)\n .style('fill', cell => d3.interpolateGreens(cell.weight))\n //.style('stroke', 'black')\n //.style('stroke-width', cell => cell.weight);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1691,"value":"md`### Player trajectories to specified point \n\nThe trajectory is computed by taking into account the initial speed velocity of the player. The model used to obtain the time to reach the specified point is the temporal distances model.\n\nAs you might notice, some trajectories to specific point are thicker than others because it is scaled with the time needed by a player to reach the selected point. We use this equation to compute the thickness of a trajectory :\n\n${tex `thickness(player) = \\frac{2}{\\delta t(player)}`}\nwith ${tex `{\\delta t(player)}`} the time interval between the player and the selected point.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"traj = (x0, y0, xf, yf, vx, vy, F, nb_points) => {\n \n const tf = distanceTime(x0, y0, xf, yf, vx, vy, F);\n const Fx = 2*(xf - x0 - vx * tf) / tf**2;\n const Fy = 2*(yf - y0 - vy * tf) / tf**2;\n const dt = tf / nb_points;\n var t = dt;\n var trajectory = [({'idx' : 0, 'tf' : tf, 'Fx' : Fx, 'Fy' : Fy, 'x' : posX(x0), 'y' : posY(y0)})];\n \n for (let i = 0; i < nb_points; i++) {\n \n let temp = ({});\n let x = x0 + vx * t + Fx * t**2 / 2;\n let y = y0 + vy * t + Fy * t**2 / 2;\n \n temp.idx = i;\n temp.tf = tf;\n temp.Fx = Fx;\n temp.Fy = Fy;\n temp.x = posX(x);\n temp.y = posY(y); //conversions\n t = t+dt;\n trajectory.push(temp);\n }; \n\n \n return trajectory;\n \n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"lineToBall = (player, ballPos) => {\n // we are in the real coordiante system.\n \n let x = (+player.x);\n let y = (+player.y);\n let xf = (ballPos[0]);\n let yf = (ballPos[1]);\n let vx = (+player.dx) / 0.05;\n let vy = (+player.dy) / 0.05;\n \n const trajectory = traj(x, y, xf, yf, vx, vy, F, 10);\n \n let lineTraj = line(trajectory)\n\n return [lineTraj, trajectory];\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"drawtrajectories = (selection, ballPos) => {\n\n const trajG = selection.append(\"g\");\n var widthline = [...Array(player_max).keys()];\n \n trajG.append(\"path\")\n .attr(\"d\", (d, i) => {\n if (d.bgcolor && num_player == -1) {\n let infos = lineToBall(d, ballPos);\n widthline[i] = infos[1][0].tf;\n return infos[0];\n }\n else if (d.bgcolor && i == num_player + 1) {\n let infos = lineToBall(d, ballPos);\n widthline[i] = infos[1][0].tf;\n return infos[0];\n }\n })\n .style('stroke', d => d.bgcolor)\n .style('stroke-width', (d, i) => 2/widthline[i])\n .style('fill', 'none')\n .raise();\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1886,"value":"md`### Player trajectories\n\nWe plot a part of the player trajectory. The plotted part is from ${tex `t - \\Delta t`} to ${tex `t + \\Delta t`} where ${tex `\\Delta t`} is an interval in second specified by the user.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"getDeltaTraj = (delta_t) => {\n var deltaS = delta_t/0.05, //s to frame.\n deltaI = delta_t/0.05;\n const frameMax = frames[frames.length-1],\n frameMin = frames[0];\n \n if (deltaS + n_frame > frames[frames.length-1]){\n deltaS = frames[frames.length-1] - n_frame;\n }\n else if (n_frame - deltaI < 0){\n deltaI = n_frame; \n }\n \n return [deltaI, deltaS]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1891,"value":"trajPlayer = (idx) => {\n \n const delta = getDeltaTraj(delta_t),\n inf = n_frame - delta[0],\n sup = n_frame + delta[1];\n console.log('inf', inf, 'sup', sup)\n var traj = [];\n \n for (let i = inf; i < sup; i++) {\n let tempFrame = getFrame(i, Datamatch),\n temp = ({});\n console.log('frame i ', tempFrame, i)\n temp.x = posX(+tempFrame[idx].x);\n temp.y = posY(+tempFrame[idx].y);\n traj.push(temp);\n }\n let l = line(traj);\n \n return l;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"drawTrajPlayer = (selection, num_player) => {\n \n const trajPlayerG = selection.append(\"g\");\n \n trajPlayerG.append(\"path\")\n .attr('d', (d, i) => {\n if (d.bgcolor && num_player == -1) {\n return trajPlayer(i)\n }\n else if (d.bgcolor && i == num_player + 1) {\n return trajPlayer(i)\n }\n else if (num_player == -2) {\n return trajPlayer(0) \n }\n })\n .style('stroke-dasharray', 4)\n .style('stroke', '#757574')\n .style('fill', 'none');\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2156,"value":"md `### Delaunay graph\n\nThe goal here is to discrete the space and to work with a graph. The functions are fully inspired from the notebook [Mobility-landscapes](https://observablehq.com/@fil/mobility-landscapes).\n\nWe compute a grid thanks to a poisson distribution points on the field. With it we can calculate travelling time from a player to a point of the grid, we represent it as a colormap and also with isolines. The travelling time does not take into account the velocity of the player. Therefore the iso contours represent a distance and not a time distances.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2163,"value":"mutable nodes = {\n return [[posX(0), posY(0)], [posX(100), posY(0)], [posX(100), posY(100)], [posX(0), posY(100)]]\n .concat(pick2d(width, height, 2500, \"poissonDisc\"))\n .concat([[width - 50, 50]]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"nodesField = (nodes) => {\n \n const newnodes = nodes.filter(point => point[0] >= posX(0) && point[0] <= posX(100) && point[1] >= posY(0) && point[1] <= posY(100));\n \n return newnodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"newNodes = nodesField(nodes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2173,"value":"playerDots = (frame) => {\n \n var player_data = [];\n \n frame.forEach(player => {\n player_data.push([posX(+player.x), posY(+player.y)])\n })\n \n return player_data;\n\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2168,"value":"rng = Math.random","pinned":false,"hidden":false,"mode":"ojs"},{"id":2208,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":2267,"value":"color = d3.scaleSequential(d3.interpolateRdBu).domain([posX(0), posX(100)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2726,"value":"md`### Influence zones by [Manuel Stein et al.](https://kops.uni-konstanz.de/bitstream/handle/123456789/35829/Stein_0-371514.pdf)\n\nWe draw a cake or a piece of cake which represent the influence zone of a player taking into account his speed and his orientation. This model is described by [Manuel Stein et al](https://kops.uni-konstanz.de/bitstream/handle/123456789/35829/Stein_0-371514.pdf). \nThe equation used to compute the angle (in radian) is:\n\n${tex `\\alpha (v) = -0.0038 \\pi \\cdot v^3 + 0.0793 \\pi \\cdot v^2 - 0.61081 \\pi \\cdot v + 2 \\pi`}\n\nAnd the one used for the radius of the cake is:\n\n${tex `R = t \\times v^*`}\n\nWith ${tex `v^* = \\ \\ \\text{if} \\ v < 0.5 \\ m.s^{-1} \\ \\text{else} \\ v^* = v`}.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2729,"value":"zonesInflu = (selection, player, posBall) => {\n \n const dt = 0.05;\n let ball = [xReal(posBall[0]), yReal(posBall[1])]\n\n let pos = [xReal(+player.x), yReal(+player.y)];\n let v = [xReal(+player.dx)/dt, yReal(+player.dy)/dt];\n let params = angleRadius(pos, v, posBall);\n let path = influencePaths(selection, pos, v, params);\n \n return path;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2947,"value":"vmean = (Datamatch, frames) => {\n \n let v = 0;\n let dt = 0.05;\n let compt = 0;\n \n for (let i = 0; i < frames.length; i++){\n let fra = getFrame(i, Datamatch);\n\n fra.forEach((player, j) => {\n if (j != 0) {\n v += Math.hypot(xReal(+player.dx)/dt, yReal(+player.dy)/dt);\n compt++;\n }\n });\n }\n console.log(v, compt)\n return v/compt;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2951,"value":"vMean = vmean(Datamatch, frames)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2731,"value":"angleRadius = (pos, v, posBall) => {\n \n //Compute in the real system coordinate.\n\n let V = Math.hypot(v[0], v[1]);\n V > 9.9 ? V = 9.9 : V;\n let angle = (-0.0038 * Math.PI * V**3 + 0.0793 * Math.PI * V**2\n- 0.61081 * Math.PI * V + 2 * Math.PI)/2;\n var radius = 0;\n let tToBall = distanceTime(pos[0], pos[1], posBall[0], posBall[1], v[0], v[1], F);\n if (v < 0.5) {\n radius = tToBall * vMean;\n }\n else {\n radius = tToBall * V; \n }\n \n return [angle, radius];\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2736,"value":"influencePaths = (context, pos, v, params) => {\n \n let Rx = params[1] * Math.cos(params[0]),\n Ry = params[1] * Math.sin(params[0]),\n angleSpeed = Math.atan(v[1]/v[0]);\n \n let bool = false;\n \n if (angleSpeed - params[0] > angleSpeed + params[0]) {\n bool = true;\n }\n \n if (v[1] == 0 && v[0] == 0){\n angleSpeed = 0; \n }\n \n Rx = posX(xReal.invert(Rx)) - margin.left;\n Ry = posY(yReal.invert(Ry)) - margin.top;\n \n context.moveTo(posX(xReal.invert(pos[0])), posY(yReal.invert(pos[1])));\n context.arc(posX(xReal.invert(pos[0])), posY(yReal.invert(pos[1])), Math.hypot(Rx, Ry), angleSpeed - params[0], angleSpeed + params[0], bool);\n context.closePath();\n return context; \n };","pinned":false,"hidden":false,"mode":"ojs"},{"id":2749,"value":"drawInfluenceZones = (selection, frame, posBall) => {\n \n const influZonesG = selection.append(\"g\");\n \n influZonesG.selectAll(\"influeZonePath\").data(frame)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"influeZonePath\")\n .attr('d', (player, i) => i != 0 ? zonesInflu(d3.path(), player, posBall) : 'none')\n .attr('fill', player => player.bgcolor)\n .attr('stroke', player => player.edgecolor)\n .attr('opacity', 0.5);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2963,"value":"md`### Pitch control by [Javier Fernandez and Luke Bornn](http://www.sloansportsconference.com/wp-content/uploads/2018/03/1003.pdf)\n\nWe follow those steps to compute the model :\n* we get a grid of the size of the pitch,\n* for each cell we compute the pitch control parameter between 0 and 1,\n* we select the cell where the coefficient is higher than 0.51 or lower than 0.49.\n* and we draw each cell with a color interpolator red-blue where red is for a striker and blue for a defenser.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2967,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2991,"value":"getRadius = (posplayer, posball) => {\n var R = 4 + 6* dist(posplayer, posball)**3 / 18**3;\n if (R > 10) {\n R = 10; \n }\n return R;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2989,"value":"Srat = (v) => {\n let V = Math.hypot(v[0], v[1]),\n srat = (V/13)**2;\n return srat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3019,"value":"pitchControlGrid = (grid) => {\n \n var newGrid = [];\n \n grid.forEach(cell => {\n let PC = pitchControl(frame, [xReal(cell.x), yReal(cell.y)]);\n cell.PC = PC;\n newGrid.push(cell);\n }) \n return newGrid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3020,"value":"drawPitchControl = (selection, frame) => {\n \n const gridPC = pitchControlGrid(grid);\n console.log(gridPC)\n \n const pitchControlG = selection.append(\"g\");\n \n pitchControlG.selectAll('cell').data(gridPC)\n .enter()\n .append('rect')\n .attr('class', 'cell')\n .attr('x', cell => posX(cell.x))\n .attr('y', cell => posY(cell.y))\n .attr('width', cell => posX(cell.width) - margin.left)\n .attr('height', cell => posY(cell.height) - margin.top)\n .style('fill', cell => d3.interpolateRdBu(cell.PC))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1301,"value":"md `Functions to compute the temporal distance :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"distanceTime = (x0, y0, xf, yf, vx, vy, F) => {\n\n let X = x0 - xf;\n let Y = y0 - yf;\n let a = 1;\n let b = 0;\n let c = -4 * (vx**2 + vy**2) / (F**2);\n let d = -8 * (vx * X + vy * Y) / (F**2);\n let e = -4 * (X**2 + Y**2) / (F**2);\n var temp = equationSolver4(a, b, c, d, e);\n temp = solutionFilter(temp); // on ne garde que les valeurs réels positives.\n \n return temp;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"function calcmult(a2,b2,c2,d2,e2) {\n var real = a2*c2 - b2*d2;\n var img = b2*c2 + a2*d2;\n\n if (e2 == 0) {\n return real;\n } else {\n return img;\n }\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"function isquareroot(a1,b1,n1) {\n var y = Math.sqrt((a1*a1) + (b1*b1));\n var y1 = Math.sqrt((y - a1) / 2);\n var x1 = b1 / (2*y1);\n\n if (n1 == 0) {\n return x1;\n } else {\n return y1;\n }\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"solutionFilter = (solution) => {\n // Filtre les solutions pour ne garder que les valeurs réels positives.\n \n var newSolution;\n \n let x1 = solution.x1.split(\" \");\n let x2 = solution.x2.split(\" \");\n let x3 = solution.x3.split(\" \");\n let x4 = solution.x4.split(\" \");\n \n let n = 0; //pour obtenir une seule solution\n let x = [x1, x2, x3, x4];\n x.forEach((d, j) => {\n if (+d[1] == 0){\n if (+d[0] >= 0 && n == 0){\n n++;\n newSolution = +d[0];\n }\n }\n \n });\n \n return newSolution;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"md `## Annex`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1919,"value":"line = d3.line().x(d => d.x).y(d => d.y);\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"md `Scale for data coordinate (between 0 and 100) and real coordinate (between 0 and xSize and 0 and ySize).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"posX = d3.scaleLinear().domain([0, 100]).range([margin.left, innerwidth + margin.left]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"posY = d3.scaleLinear().domain([0, 100]).range([margin.top, innerheight + margin.top]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1786,"value":"xSize = 105;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1788,"value":"ySize = 68;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2772,"value":"xReal = d3.scaleLinear().domain([0, 100]).range([0, xSize]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":2774,"value":"yReal = d3.scaleLinear().domain([0, 100]).range([0, ySize]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"md `Definitions of margins and sizes of the picture. We can adjust the size with the rInchesPx parameter.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"rInchesPx = 60; ","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"margin = ({top: 40, right: 50, bottom: 40, left: 50});","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"innerwidth = 12.8 * rInchesPx;","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"innerheight = 7.2 * rInchesPx;","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"width = innerwidth + margin.left + margin.right;","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"height =innerheight + margin.top + margin.bottom;","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"md`Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"rawData = d3.csv(\"https://raw.githubusercontent.com/Friends-of-Tracking-Data-FoTD/Last-Row/master/datasets/positional_data/liverpool_2019.csv\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require('d3', \"d3-delaunay@5\", \"d3-tricontour@0.1\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":2983,"value":"math = require(\"mathjs\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"import {select, number, checkbox, slider} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2165,"value":"import { pick2d } with { rng } from \"@fil/2d-point-distributions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2238,"value":"import { shortest_tree } from \"@fil/dijkstra\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2248,"value":"import {createGraph} from \"@fil/mobility-landscapes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2974,"value":"import {multivariateNormal} from '@sw1227/multivariate-normal-distribution'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}