pitch

27:null 28:["$","title",null,{"children":"⚽️ Football control space | KDO | Observable"}] 2d:Te6f,function markings() { return (index, {x, y}) => { return htl.svg``} }2e:[] 2b:{"id":"afdfa0726961b99a","slug":null,"title":"⚽️ Football control space","thumbnail":"830c354127418e7ada4561e831e560d8ad8385b4de88d0c36187c156281f66e6","access_level":"public","create_time":"$D2024-09-11T21:25:53.938Z","update_time":"$D2024-09-13T16:50:58.138Z","view_time":null,"first_public_time":"$D2024-09-12T14:01:21.738Z","has_unpublished_edits":null,"fork":{"id":"ea9c3d7e102c3fe8","slug":"football-d3-playground","title":"⚽️ Football d3 Playground ⚽️","owner":{"id":"6c82484afeac3cf5","login":"gshirato","name":"Gota Shirato"}},"stars":9,"starred":false,"owner":{"type":"team","id":"d7884d59069d1d32","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":"starter_2024"},"version":367,"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"},{"type":"team","id":"d7884d59069d1d32","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":"starter_2024","role":"editor"}],"comments":[{"id":"a7d09a38f63d9541","reply_to_id":null,"content":"our implementation of random-walk (https://observablehq.com/plot/marks/raster#interpolatorRandomWalk) has a maxSteps option that defaults to 2; if you set it to 0 you get the voronoi.","create_time":"$D2024-09-13T09:40:42.924Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"a9d530dae1d44a60","reply_to_id":"a7d09a38f63d9541","content":"Sweet! Thanks for the tip.","create_time":"$D2024-09-13T16:51:31.451Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"9002a3c6466edd6e","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"⚽️ Football control space","cells":[{"id":0,"value":"# ⚽️ Football control space ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"[Voronoi diagrams](https://www.youtube.com/watch?v=UJ0VwY0DcIs) are often used to visualize football positions and control of space. However, I find them somewhat distracting due to the jumpiness of animated Voronoi graphs. Here’s my alternative approach: instead of using Voronoi diagrams, I suggest using spatial interpolators. Specifically, I find that a **random-walk** interpolator, combined with a slight blur effect, creates a more visually pleasing representation. Observable Plot makes it super easy to implement (thanks @Fil). I'm sure this method has been used before, but this is my take on it. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"viewof playName = Inputs.select(\n Object.keys(Object.fromEntries(play_list.entries())),\n { label: \"Play\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"viewof frame = Scrubber(\n d3.range(max_frame),\n {delay: 20, loopDelay: 1000}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"viewof voronoi = Inputs.toggle({label: \"Voronoi\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"field = Plot.plot({\n //margin: 20,\n width: 515,\n height: 515 * pitch.height()/pitch.width(),\n x: {\n axis: false,\n domain: [0, pitch.width()],\n },\n y: {\n axis: false,\n domain: [pitch.height(), 0],\n },\n color: {\n domain: [\"defense\", \"attack\"],\n range: colors\n },\n marks: [\n Plot.raster(data_f.filter(d => d.player !== 0), {x: d => sx(d.x), y: (d) => sy(d.y), fill: \"team\", interpolate: Plot.interpolatorRandomWalk({maxSteps: voronoi ? 0 : 2}), blur: voronoi ? 0 : 8}),\n ...(voronoi ? [Plot.voronoi(data_f.filter(d => d.player !== 0), {x: (d) => sx(d.x), y:(d) => sy(d.y), fill: \"none\", stroke: \"white\", opacity: 0.2})] : []),\n markings(),\n Plot.dot(data_f.filter(d => d.player !== 0), {x: (d) => sx(d.x), y: (d) => sy(d.y), fill: \"team\", r: 4, stroke: \"white\", strokeWidth: 0.5}),\n \n Plot.text(data_f.filter(d => d.player === 0), {x: (d) => sx(d.x), y: (d) => sy(d.y), text: d => \"⚽️\", fontSize: 12}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"viewof colors = Inputs.select([[\"#12EDA2\",\"#ED125D\"], [\"#0F17F0\",\"#F0E80F\"], [\"#EB1414\",\"#14EBEB\"], [\"#FF7F00\",\"#0080FF\"]], {label: \"Colors\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = d3.csv(\n \"https://raw.githubusercontent.com/Friends-of-Tracking-Data-FoTD/Last-Row/72129b58d0b866c21ab895d97b426333330f6294/datasets/positional_data/liverpool_2019.csv\",\n d3.autoType\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"play_list = d3.union(data.map((d) => d.play))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data_p = data.filter((d) => d.play === playName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"data_f = data_p.filter((d) => d.frame === frame)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"max_frame = d3.max(data_p, (d) => d.frame)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"att = data_f.filter((d) => d.team === \"attack\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"def = data_f.filter((d) => d.team === \"defense\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"pitch = d3s.pitch().height(340)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"sx = d3.scaleLinear().domain([0, 100]).range([0, pitch.width()])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"sy = d3.scaleLinear().domain([0, 100]).range([0, pitch.height()]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"# Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"d3s = require(\"d3-soccer\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"