2b:null 2c:["$","title",null,{"children":"All the passes ⚽️ | KDO | Observable"}] 31:T100d,canvas = { const w = width const h = height const scene = new THREE.Scene() scene.background = new THREE.Color('#2a2a2a'); const terrain = new THREE.Group(); drawTerrain(terrain) terrain.position.set(-60, -40, 0) scene.add(terrain); const plane = new THREE.Mesh( new THREE.PlaneGeometry(160, 120), new THREE.MeshBasicMaterial({ color: '#000000', transparent: true, opacity: 0 }) ) plane.position.set(0, 0, -0.1) scene.add(plane); const sphere = new THREE.Mesh( new THREE.SphereGeometry(0.6, 16, 16), new THREE.MeshBasicMaterial({ color: 'white' }) ) scene.add(sphere); const heiglightX = new THREE.Mesh( new THREE.PlaneGeometry(1, 80), new THREE.MeshBasicMaterial({ color: 'white', transparent: true, opacity: 0.8 }) ) scene.add(heiglightX) const heiglightY = new THREE.Mesh( new THREE.PlaneGeometry(120, 1), new THREE.MeshBasicMaterial({ color: 'white', transparent: true, opacity: 0.8 }) ) scene.add(heiglightY) const disk = new THREE.Mesh( new THREE.RingGeometry( radius - 0.1, radius, 32 ), new THREE.MeshBasicMaterial({ color: 'white', transparent: true, opacity: 1 }) ) disk.position.set(0, 0, -0.5) scene.add(disk); particleSystem.position.set(-60, -40, 0) particleSystem.frustumCulled = false; scene.add(particleSystem); const fov = 35 const aspect = w / h const near = 0.1 const far = 3000 const camera = new THREE.PerspectiveCamera(fov, aspect, near, far) camera.position.set(0,0,200) scene.add(camera) const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(w, h) renderer.setPixelRatio(Math.min(2, window.devicePixelRatio)) const controls = new THREE.OrbitControls(camera, renderer.domElement) controls.enableDamping = true const raycaster = new THREE.Raycaster() //Mouse const mouse = new THREE.Vector2() const view = d3.select(renderer.domElement) view.on("mousemove", () => { let [mouseX, mouseY] = d3.mouse(view.node()); mouse.x = (2 * mouseX / w) - 1; mouse.y = -((2 * mouseY / h) - 1); }); const clock = new THREE.Clock(); while (true) { const time = clock.getElapsedTime(); raycaster.setFromCamera(mouse, camera) const intersect = raycaster.intersectObject (plane) if(intersect && intersect.length){ const p = intersect[0].point const x = Math.max(-60, Math.min(60, p.x)) const y = Math.max(-40, Math.min(40, p.y)) sphere.position.set(x, y, 0) if(p.x < -60 || p.x > 60 || p.y < -40 || p.y > 40) { disk.position.set(-10000, y, -0.05) if(p.y < 40 && p.y > -40) { heiglightY.position.set(0, y, -0.05) heiglightX.position.set(-10000, y, -0.05) } else if(p.x < 60 && p.x > -60) { heiglightX.position.set(x, 0, -0.05) heiglightY.position.set(-10000, y, -0.05) } else { heiglightX.position.set(-10000, y, -0.05) heiglightY.position.set(-10000, y, -0.05) } } else { disk.position.set(x, y, -0.05) heiglightX.position.set(-10000, y, -0.05) heiglightY.position.set(-10000, y, -0.05) } particleSystem.material.uniforms.mouse.value.x = 60 + p.x particleSystem.material.uniforms.mouse.value.y = 40 + p.y } else { sphere.position.set(-10000, 0, 0) disk.position.set(-10000, 0, 0) heiglightX.position.set(-10000, 0, 0) heiglightY.position.set(-10000, 0, 0) particleSystem.material.uniforms.mouse.value.x = -10000 particleSystem.material.uniforms.mouse.value.y = -10000 } particleSystem.material.uniforms.radius.value = radius animate() controls.update() renderer.render(scene, camera) let html_render = html`

${renderer.domElement}

${legend(particleSystem.material.uniforms.progress.value)}

` yield html_render; } }32:Tb86,function legend(progress) { const svg = d3.create("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('All the Passes ⚽️') 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.13) .attr('font-size', width * 0.02) .attr('text-anchor', 'start') .attr('fill', 'white') .text('Visualisation of 882,536 passes from 890 matches played in various major leagues/cups') const x = Object.assign( colorScale.copy() .interpolator(d3.interpolateRound(0, width*0.36)), {range() { return [0, width*0.36]; }} ); svg.append("image") .attr("transform", `translate(${-width*0.18},${height*0.43})`) .attr("width", width*0.36) .attr("height", width*0.01) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(colorScale.interpolator()).toDataURL()); const lengthScale = d3.scaleLinear() .domain([0,50]) .range([0, width*0.36]); const lengthAxis = d3.axisBottom() .scale(lengthScale) .tickFormat(d => d === 50 ? '50+' : d) .tickSize(width*0.015,0) .ticks(5); svg.append("g") .attr("transform", `translate(${-width*0.18},${height*0.43})`) .call(lengthAxis) .call(g => g.select(".domain").remove()) .selectAll(".tick text") .style('fill', 'white') .style("text-anchor", "middle") .attr("x", 0) .attr("y", width*0.025) svg .append("text") .attr("transform", `translate(${-width*0.18},${height*0.43})`) .attr('y', -10) .attr('font-size', width*0.016) .attr('text-anchor', 'start') .attr('fill', 'white') .text(`Pass distance in meters`) svg .append("text") .attr("transform", `translate(${width*0.19},${height*0.43})`) .attr('y', -10) .attr('font-size', width*0.016) .attr('text-anchor', 'end') .attr('fill', 'white') .text(`${Math.floor(progress) % 2 ? "Receiving the ball ← ⚽️" : "Passing the ball → ⚽️"}`) 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.465) .attr('font-size', width*0.016) .attr('text-anchor', 'start') .attr('fill', 'white') .text('@karim_douieb') return svg.node(); }33:T608,particleSystem = { const geometry = new THREE.BufferGeometry(); const vertices = []; const speed = []; const colors = []; const sizes = []; const source = []; const destination = []; let color = new THREE.Color(0xffffff); completePasses.forEach(pass => { const dist = Math.sqrt((pass.start.x - pass.end.x) ** 2 + (pass.start.y - pass.end.y) ** 2); vertices.push(0, 0, 0); color = color.setStyle(colorScale(dist)); colors.push(color.r, color.g, color.b); sizes.push(size); speed.push(1) source.push(pass.start.x, pass.start.y) destination.push(pass.end.x, pass.end.y) }) geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); geometry.setAttribute(`source`, new THREE.Float32BufferAttribute(source, 2)); geometry.setAttribute(`destination`, new THREE.Float32BufferAttribute(destination, 2)); geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1) .setUsage(THREE.DynamicDrawUsage)); const material = new THREE.ShaderMaterial({ uniforms: { progress: { value: 0 }, radius: { value: 200 }, mouse: { value: { x: null, y: null } } }, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true, vertexColors: true, blending: THREE.AdditiveBlending, opacity: 0.8, }); const particleSystem = new THREE.Points(geometry, material); return particleSystem; }34:T732,vertexShader = ` attribute vec2 source; attribute vec2 destination; attribute float size; attribute float speed; varying vec3 vColor; uniform float progress; uniform float radius; uniform vec2 mouse; void main() { vColor = color; float proportion = fract(progress); float x = source.x + (proportion * (destination.x - source.x)); float y = source.y + (proportion * (destination.y - source.y)); float dist = sqrt(pow(source.x - destination.x, 2.0) + pow(source.y - destination.y, 2.0)); float sourceDistFromMouse = sqrt(pow(source.x - mouse.x, 2.0) + pow(source.y - mouse.y, 2.0)); float destDistFromMouse = sqrt(pow(destination.x - mouse.x, 2.0) + pow(destination.y - mouse.y, 2.0)); float PI = 3.1415926535897932384626433832795; float z = dist * 0.3 * sin(proportion * PI); //Pushing out of view but should be better to just hide the particle bool selected; float particleSize = size; if(mouse.x < 0.0 && mouse.y < 0.0) { selected = true; particleSize = particleSize * 0.3; } else if (mod(progress, 2.0) < 1.0) { if(mouse.y > 80.0 || mouse.y < 0.0) { selected = abs(source.x - mouse.x) < 1.0; } else if(mouse.x > 120.0 || mouse.x < 0.0) { selected = abs(source.y - mouse.y) < 1.0; } else { selected = sourceDistFromMouse < radius; } } else { if(mouse.y > 80.0 || mouse.y < 0.0) { selected = abs(destination.x - mouse.x) < 1.0; } else if(mouse.x > 120.0 || mouse.x < 0.0) { selected = abs(destination.y - mouse.y) < 1.0; } else { selected = destDistFromMouse < radius; } } vec3 pos = vec3(x - (selected ? 0.0 : 1000000.0), y, z); gl_PointSize = particleSize; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `;35:[{"id":"ca7faa6ed58ddec89cfb70c25bb355ef7099071b8984682aa49f1b77d65cc2519b4cb806566a2d1e55afde57ab9bed1b3ce80c696ac56993667bcdf6c48d9b86","href":"https://static.observableusercontent.com/files/ca7faa6ed58ddec89cfb70c25bb355ef7099071b8984682aa49f1b77d65cc2519b4cb806566a2d1e55afde57ab9bed1b3ce80c696ac56993667bcdf6c48d9b86","name":"Twitter_Bird.svg (3).png","type":"image/png","lastModified":1623179866964.066,"size":42796},{"id":"4972220a394077666a4cb36c8150d7cef6f20de53c01f8024acaec3627f47a8fb4065a598d683952d26d4288095301a31a46b3f020324d1baa2788e8fb2d4bf6","href":"https://static.observableusercontent.com/files/4972220a394077666a4cb36c8150d7cef6f20de53c01f8024acaec3627f47a8fb4065a598d683952d26d4288095301a31a46b3f020324d1baa2788e8fb2d4bf6","name":"completePasses (1).csv","type":"text/csv","lastModified":1623191523636.95,"size":24211496}] 2f:{"id":"aff9aab2958f925e","slug":"all-the-passes","title":"All the passes ⚽️","thumbnail":"1f66644982c5ce9839471e840ac302cd0e5dae81e265704b320fb79923fdcce6","access_level":"public","create_time":"$D2021-06-02T12:02:31.191Z","update_time":"$D2025-11-04T21:09:18.781Z","view_time":null,"first_public_time":"$D2021-06-09T07:04:23.099Z","fork":true,"stars":120,"starred":false,"owner":{"type":"team","id":"d7884d59069d1d32","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":"starter_2024"},"version":806,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9002a3c6466edd6e","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":null}],"members":[{"type":"individual","id":"9002a3c6466edd6e","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":null,"role":"editor"}],"comments":[{"id":"1154740c814a6cf2","reply_to_id":null,"content":"Two things jump out.\n1. The flow of passes is predominantly L-R, meaning that the data for the adversarial teams is mirrored and superimposed.\n2. The algorithm processing the footage had many false positives identifying the ball when it crosses markings on the pitch, hence the clear empty spots.\nBeautiful viz 👏","create_time":"$D2021-06-17T19:47:55.809Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4463ef404bd99b16","login":"hugoberry","name":"","avatar_url":"https://avatars-next.observableusercontent.com/edbb6a6165ce69ef17c1863f7024b08435153541390d8227eb12cfb63d17d1fc","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":28,"collection":null,"type":"notebook","body":{"title":"All the passes ⚽️","cells":[{"id":0,"value":"# All the passes ⚽️\n## A visualisation of 882,536 passes from 890 matches played in various major leagues/cups such as \n- the Champion League 1999\n- FA Women’s Super League 2018 \n- FIFA World Cup 2018, La Liga 2004 – 2020 \n- NWSL 2018\n- Premier League 2003 – 2004\n- Women’s World Cup 2019 \n\nData provided by [StatsBomb](https://github.com/statsbomb/open-data)\n\nOriginal inspiration: [Alexander Varlamov's blog post](https://coolbluedata.com/ordering-chaos/)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"function animate() {\n const progress = particleSystem.material.uniforms.progress.value;\n particleSystem.material.uniforms.progress.value = progress + speed;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":620,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"viewof radius = Range([0, 100], {step: 1, value: 5, label: \"Radius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"viewof speed = Range([0, 0.05], {step: 0.001, value: 0.008, label: \"Speed\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"viewof size = Range([0, 10], {step: 0.1, value: 3, label: \"Particle Size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":612,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"twitterLogo = FileAttachment(\"Twitter_Bird.svg (3).png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"colorScale = d3.scaleSequential(d3.interpolateInferno)\n .domain([0, 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"fragmentShader = `\n varying vec3 vColor;\n\n void main() {\n gl_FragColor = vec4(vColor, 1.0); \n }\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"drawTerrain = (holder) => {\n const materialWhite = new THREE.MeshLineMaterial({ \n color: 'white', \n transparent: true,\n opacity: 1\n });\n const lines = [\n [0,0,0, 120,0,0, 120,80,0, 0,80,0, 0,0,0],\n [60,0,0, 60,80, 0],\n [0,18,0, 18,18,0, 18,62,0, 0,62,0],\n [120,18,0, 102,18,0, 102,62,0, 120,62,0],\n [0,30,0, 6,30,0, 6,50,0, 0,50,0],\n [120,30,0, 114,30,0, 114,50,0, 120,50,0],\n ]\n \n const num = 50\n const centerRound = []\n const cercle = d3.range(num).forEach(i => {\n const angle = i * Math.PI * 2 / (num - 1);\n centerRound.push(60 + (9.15 * Math.sin(angle)))\n centerRound.push(40 + (9.15 * Math.cos(angle)))\n centerRound.push(0)\n })\n lines.push(centerRound)\n \n lines.forEach(lineCoodrinates => {\n const line = new THREE.MeshLine();\n line.setPoints(lineCoodrinates, p => 0.1);\n const lineMesh = new THREE.Mesh(line, materialWhite);\n holder.add(lineMesh) \n })\n\n return holder\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":777,"value":"completePasses = (await FileAttachment(\"completePasses (1).csv\").csv())\n .map(d => ({\n end: { x: +d.endX, y: +d.endY},\n start: { x: +d.startX, y: +d.startY},\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.126.1/build/three.min.js\");\n await require(\"three@0.126.1/examples/js/controls/OrbitControls.js\").catch(() => {});\n await require(\"three.meshline@1.3.0\").catch(() => {});\n THREE.MeshLine = window.MeshLine;\n THREE.MeshLineMaterial = window.MeshLineMaterial;\n THREE.MeshLineRaycast = window.MeshLineRaycast;\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"import { Select, Range, Radio, Button } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"