pitch

2f:Te6f,function markings() { return (index, {x, y}) => { return htl.svg``} }30:[] 2d:{"title":"⚽️ Football control space","cells":[{"id":0,"value":"# ⚽️ Football control space ","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":93,"value":"viewof frame = Scrubber(\n d3.range(max_frame),\n {delay: 20, loopDelay: 1000}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof voronoi = Inputs.toggle({label: \"Voronoi\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":294,"value":"viewof colors = Inputs.select([[\"#12EDA2\",\"#ED125D\"], [\"#0F17F0\",\"#F0E80F\"], [\"#EB1414\",\"#14EBEB\"], [\"#FF7F00\",\"#0080FF\"]], {label: \"Colors\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":20,"value":"play_list = d3.union(data.map((d) => d.play))","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"data_p = data.filter((d) => d.play === playName)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"data_f = data_p.filter((d) => d.frame === frame)","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"max_frame = d3.max(data_p, (d) => d.frame)","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"att = data_f.filter((d) => d.team === \"attack\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"def = data_f.filter((d) => d.team === \"defense\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"pitch = d3s.pitch().height(340)","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"sx = d3.scaleLinear().domain([0, 100]).range([0, pitch.width()])","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"sy = d3.scaleLinear().domain([0, 100]).range([0, pitch.height()]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"# Import","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"d3s = require(\"d3-soccer\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}