30:T416,# Football Wind ⚽️💨 A wind map visualisation of a typical football game. Each particle is following a force field built from the aggregation of 882,536 passes from 890 matches played in various major leagues/cups (Champion League 1999, FA Women’s Super League 2018, FIFA World Cup 2018, La Liga 2004 – 2020, NWSL 2018, Premier League 2003 – 2004, Women’s World Cup 2019). Data Source: [StatsBomb](https://github.com/statsbomb/open-data) The force field is defined at every square meter on the terrain, the force direction corresponds to the average angle of the passes originating from the corresponding square meter and the force intensity is proportional to the average distance of the passes: the longer the pass, the greater the force. I kind of like the visual in the way that it resemble rain pouring on a terrain eroded by almost a million passes. FYI I've also created a [3D interactive visual](https://observablehq.com/@karimdouieb/all-the-passes) showing every single passe used to build this football wind visual. 31:T5f2,{ while(true){ var canvas = d3.select("canvas#canvas-wind"); if(!canvas.empty()){ canvas = canvas.node(); var context = canvas.getContext('2d'); context.fillStyle = "rgba(0, 0, 0, 0.9)"; context.lineWidth = lineWidth; context.strokeStyle = 'white'; var prev = context.globalCompositeOperation; context.globalCompositeOperation = "destination-in"; context.fillRect(0, 0, canvas.width, canvas.height); context.globalCompositeOperation = prev; const projection = d3.geoProjection(function(x, y) { return [x, y];}).scale(200) const path = d3.geoPath(projection, context); updateParticles(); for (let i = 0; i < particles.length; i++) { let p = particles[i]; context.beginPath(); context.moveTo((width*(1-scale)/2) + (p.x * width / 120 * scale), (height*(1-scale)/2) + (p.y * height / 80 * scale)); context.lineTo((width*(1-scale)/2) + (p.xt * width / 120 * scale), (height*(1-scale)/2) + (p.yt * height / 80 * scale)); context.stroke(); p.x = p.xt; p.y = p.yt; if(p.x < 0){ p.x = fieldWidth; } else if(p.x > fieldWidth){ p.x = 0; } p.life++; } } yield 1; } }32:T584,function drawField(canvas) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "#2c2c2c"; context.fillRect(0, 0, canvas.width, canvas.height); const lines = [ [0,0,0, 120,0,0, 120,80,0, 0,80,0, 0,0,0], [60,0,0, 60,80, 0], [0,18,0, 18,18,0, 18,62,0, 0,62,0], [120,18,0, 102,18,0, 102,62,0, 120,62,0], [0,30,0, 6,30,0, 6,50,0, 0,50,0], [120,30,0, 114,30,0, 114,50,0, 120,50,0], ].map(l => l.map(c => c * scale)) const num = 50 const centerRound = [] const cercle = d3.range(num).forEach(i => { const angle = i * Math.PI * 2 / (num - 1); centerRound.push((scale*120/2 + (9.15 * scale * Math.sin(angle)))) centerRound.push((scale*80/2 + (9.15 * scale * Math.cos(angle)))) centerRound.push(0) }) lines.push(centerRound) lines.forEach(lineCoodrinates => { for(let i =0; i < lineCoodrinates.length; i += 3){ context.beginPath(); context.moveTo((width * (1-scale)/2) + (lineCoodrinates[i]* (width/120)), (height * (1-scale)/2) + (lineCoodrinates[i+1]* (height/80))); context.lineTo((width *(1-scale)/2) + (lineCoodrinates[(i+3)%lineCoodrinates.length]* (width/120)), (height * (1-scale)/2) + (lineCoodrinates[(i+4)%lineCoodrinates.length]* (height/80))); context.lineWidth = 1.5; context.strokeStyle = 'white'; context.stroke(); } }) }33:T6a8,function createLegend(selection, width, height) { const svg = selection.append("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("width", width) .attr("height", height); svg.append("text") .attr("transform", `translate(${-width*0.5},-${height*0.5})`) .attr('class', 'title') .attr('x', width * 0.05) .attr('y', height * 0.1) .attr('font-size', width * 0.05) .attr('text-anchor', 'start') .attr('fill', 'white') .text('Football Wind ⚽️💨') svg.append("text") .attr("transform", `translate(${-width*0.5},-${height*0.5})`) .attr('class', 'sub-title') .attr('x', width * 0.05) .attr('y', height * 0.15) .attr('font-size', width * 0.016) .attr('text-anchor', 'start') .attr('fill', 'white') .text('Force field visualisation created from the aggregation of 882,536 passes from 890 matches played in various major leagues/cups') svg .append("text") .attr("transform", `translate(15,${height*0.38})`) .attr('font-size', width*0.016) .attr('text-anchor', 'middle') .attr('fill', 'white') .text("Direction of play →") const twitter = svg.append('a') .attr('href', 'https://twitter.com/karim_douieb') .attr('target', '_blank') .style('pointer-events', 'initial') twitter.append("image") .attr("xlink:href", twitterLogo) .attr("x", width*0.31) .attr("y", height * 0.45) .attr("width", width*0.025) twitter.append("text") .attr('x', width*0.34) .attr('y', height * 0.47) .attr('font-size', width*0.016) .attr('text-anchor', 'start') .attr('fill', 'white') .text('@karim_douieb') return svg.node(); }34:T44a,// Quite heavy to load, leaving it her to show how the passes data have been agreggated to compute force field // passes = d3.dsvFormat(',').parse(((await FileAttachment("pass.csv").text())), d3.autoType) // .filter(d => d.pass_end_location) // .map(d => { // const end = { // x: +d.pass_end_location.split(',')[0].slice(1), // y: +d.pass_end_location.split(',')[1].slice(0, -1) // } // const deltaY = Math.sin(d.pass_angle) * d.pass_length; // const deltaX = Math.cos(d.pass_angle) * d.pass_length; // const x = end.x - deltaX // const y = end.y - deltaY // return { // ...d, // x, // y, // end, // angle: d.pass_angle, // dist: d.pass_length, // key: `${Math.floor(x)}_${Math.floor(y)}` // }}) // passFlowField = _(passes) // .groupBy('key') // .map(cell => { // return { // key: cell[0].key, // x: Math.floor(cell[0].x), // y: Math.floor(cell[0].y), // angle: meanAngleDeg(cell.map(d => d.angle)), // dist: d3.mean(cell, d => d.dist) // } // }) // .keyBy('key') // .value()35:[{"id":"01042aede72a12607f2e8ea63b6dbda53769fafb9a3e97d5b4d6b8d1010ae449f0215355d9afc36f3105ed44bfa95b633b64adfc5c61aa8ce7f5731d651f3edc","href":"https://static.observableusercontent.com/files/01042aede72a12607f2e8ea63b6dbda53769fafb9a3e97d5b4d6b8d1010ae449f0215355d9afc36f3105ed44bfa95b633b64adfc5c61aa8ce7f5731d651f3edc","name":"wind.json","type":"application/json","lastModified":1654468623907.688,"size":816627},{"id":"64556a58ddfcb6ff4c82d69214b10b371b6a80649bef0949808c534a9567aa2d14aa5eeca817ae7d559d67de39b32e868e9c1bc01a575fd839f7d856d3775ed2","href":"https://static.observableusercontent.com/files/64556a58ddfcb6ff4c82d69214b10b371b6a80649bef0949808c534a9567aa2d14aa5eeca817ae7d559d67de39b32e868e9c1bc01a575fd839f7d856d3775ed2","name":"passFlowField.json","type":"application/json","lastModified":1654554478061.243,"size":880482},{"id":"ca7faa6ed58ddec89cfb70c25bb355ef7099071b8984682aa49f1b77d65cc2519b4cb806566a2d1e55afde57ab9bed1b3ce80c696ac56993667bcdf6c48d9b86","href":"https://static.observableusercontent.com/files/ca7faa6ed58ddec89cfb70c25bb355ef7099071b8984682aa49f1b77d65cc2519b4cb806566a2d1e55afde57ab9bed1b3ce80c696ac56993667bcdf6c48d9b86","name":"Twitter_Bird.svg (3).png","type":"image/png","lastModified":1656092437613.402,"size":42796}] 2e:{"title":"Football Wind ⚽️💨","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":183,"value":"{\n var div = d3.create(\"div\")\n .style(\"width\", `${width}px`)\n .style(\"height\", `${height*1.2}px`)\n .style(\"background-color\", \"#2c2c2c\");\n\n var canvasMap = div.append(\"canvas\")\n .attr(\"id\", \"canvas-map\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"position\", \"absolute\")\n .style(\"top\", `${height*0.13}px`);\n \n div.append(\"canvas\")\n .attr(\"id\", \"canvas-wind\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"position\", \"absolute\")\n .style(\"top\", `${height*0.13}px`);\n\n let overlay = div.append(\"div\")\n .attr(\"class\", \"overlay\")\n .attr(\"width\", width)\n .attr(\"height\", height*1.2)\n .style(\"position\", \"absolute\");\n\n drawField(canvasMap.node());\n createParticles();\n createLegend(overlay, width, height*1.2);\n \n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof factor = Inputs.range([0, 0.1], {label: \"Factor\", step: 0.001, value: 0.04})","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"viewof maxSpeed = Inputs.range([1, 10], {label: \"maxSpeed\", step: 0.01, value: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"viewof lineWidth = Inputs.range([0, 2], {label: \"Line Width\", step: 0.01, value: 0.2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"MAX_PARTICLE_LIFE = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"MAX_PARTICLE_CNT = 10000","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"scale = 0.7","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"particles = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"function createParticles(){\n particles.length = 0;\n for (let i = 0; i < MAX_PARTICLE_CNT; i++) {\n let p = {};\n particles.push(p);\n initOneParticle(p);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"function initOneParticle(p){\n p.life = random(0, MAX_PARTICLE_LIFE);\n let tryCnt = 0;\n p.x = random(0, fieldWidth-1);\n p.y = random(0, fieldHeight-1);\n p.xt = p.x;\n p.yt = p.y;\n\n do {\n let xIdx = random(0, fieldWidth-1)//lons.length-1);\n let yIdx = random(0, fieldHeight-1)//lats.length-1);\n if (isCoordIdxValid(xIdx,yIdx)){\n p.x = xIdx;\n p.y = yIdx;\n p.xt = xIdx;\n p.yt = yIdx;\n break;\n }\n }while(tryCnt++ < 30);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"function updateParticles(){\n for (let i = 0; i < particles.length; i++) {\n let p = particles[i];\n if(!isParticleValid(p)){\n initOneParticle(p);\n }\n\n let xIdx = Math.ceil(p.x);\n let yIdx = Math.ceil(p.y);\n\n const vect = passFlowField[`${xIdx}_${yIdx}`]\n \n if(vect) {\n let vx = vect.dist * Math.cos(vect.angle) * factor / maxSpeed;\n let vy = vect.dist * Math.sin(vect.angle) * factor / maxSpeed;\n p.xt = p.x + vx;\n p.yt = p.y + vy;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"function isParticleValid(p){\n if(p.life > MAX_PARTICLE_LIFE){\n return false;\n }\n else if(p.y > fieldHeight || p.x > fieldWidth){\n return false;\n }\n\n let xIdx = Math.ceil(p.x);\n let yIdx = Math.ceil(p.y);\n return isCoordIdxValid(xIdx,yIdx)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"function isCoordIdxValid(xIdx,yIdx){\n return (passFlowField[`${xIdx}_${yIdx}`]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"function findInArray(arr, val){\n if(val < arr[0] || val > arr[arr.length-1]){\n return -1;\n }\n\n let low = 0, high = arr.length-1;\n let idx = 0;\n for (let i = 0; i < arr.length; i++) {\n idx = Math.floor((high-low) / 2) + low;\n if(arr[idx] > val){\n high = idx;\n }\n else{\n low = idx;\n }\n\n if(high - low < 2){\n break;\n }\n }\n\n return idx;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"function random(min, max) {\n if (max == null) {\n max = min;\n min = 0;\n }\n return min + Math.floor(Math.random() * (max - min + 1));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"jsonData = await FileAttachment(\"wind.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"function meanAngleDeg(a) {\n return Math.atan2(\n d3.mean(a.map(Math.sin)),\n d3.mean(a.map(Math.cos))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"{\n const size = 9\n const svg = d3.select(DOM.svg(size * 122, size * 82));\n const pass = Object.values(passFlowField)\n svg.selectAll(\"circle\")\n .data(pass)\n .join(enter => enter.append(\"circle\")\n .attr(\"r\", size * 0.15)\n .attr(\"cx\", d => size + d.x * size)\n .attr(\"cy\", d => size + d.y * size)\n )\n\n svg.selectAll(\"line\")\n .data(pass)\n .join(enter => enter.append(\"line\")\n .attr(\"transform\", d => `translate(${size + d.x * size}, ${size + d.y * size})`)\n .attr(\"x1\", d => 0)\n .attr(\"y1\", d => 0)\n .attr(\"x2\", d => d.dist * Math.cos(d.angle))\n .attr(\"y2\", d => d.dist * Math.sin(d.angle))\n .style(\"stroke\", 'black')\n )\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"passFlowField = FileAttachment(\"passFlowField.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"fieldWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"fieldHeight = height","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"height = width / 120 * 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"## Style","pinned":false,"hidden":false,"mode":"md"},{"id":754,"value":"fontName = 'Staatliches'","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"style = {\n yield html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":724,"value":"twitterLogo = FileAttachment(\"Twitter_Bird.svg (3).png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}