30: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; } }31: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(); }32: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; }33: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); } `;34:[{"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}] 2e:{"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"},{"id":24,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":620,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"viewof radius = Range([0, 100], {step: 1, value: 5, label: \"Radius\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"viewof speed = Range([0, 0.05], {step: 0.001, value: 0.008, label: \"Speed\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"viewof size = Range([0, 10], {step: 0.1, value: 3, label: \"Particle Size\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":615,"value":"twitterLogo = FileAttachment(\"Twitter_Bird.svg (3).png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"colorScale = d3.scaleSequential(d3.interpolateInferno)\n .domain([0, 50])","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":13,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":5,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":92,"value":"import { Select, Range, Radio, Button } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}