2c:null 2d:["$","title",null,{"children":"D3 Soccer | Pieter Robberechts | Observable"}] 32:T48f,{ const chart = d3.create('div').call(pitch) const layer = chart.select(".above"); layer.append('circle') .attr('cx', 0) .attr('cy', 0) .attr('fill', 'red') .attr('r', 1); layer.append('text') .attr('x', 2) .attr('y', 2) .attr('alignment-baseline', 'hanging') .attr('fill', 'black') .style("font-size", "3px") .text("I am the origin at (0, 0)!"); layer.append('circle') .attr('cx', 105) .attr('cy', 68) .attr('fill', 'blue') .attr('r', 1); layer.append('text') .attr('x', 103) .attr('y', 66) .attr('text-anchor', 'end') .attr('alignment-baseline', 'baseline') .attr('fill', 'black') .style("font-size", "3px") .text("I am at (105, 68)!"); layer.append('circle') .attr('cx', 30) .attr('cy', 50) .attr('fill', 'gold') .attr('r', 1); layer.append('text') .attr('x', 33) .attr('y', 50) .attr('alignment-baseline', 'middle') .attr('fill', 'black') .style("font-size", "3px") .text("I am a point on the pitch at (33,50)!"); return chart.node() }33:[{"id":"3bb366a1d07b11cf7405ebeb0360ae5322a099780b35a4a005aaa82df83853701e964c1b5dcba1709c7203297105c0971a30cd940fdddc1cd561ef42cc8678d4","href":"https://static.observableusercontent.com/files/3bb366a1d07b11cf7405ebeb0360ae5322a099780b35a4a005aaa82df83853701e964c1b5dcba1709c7203297105c0971a30cd940fdddc1cd561ef42cc8678d4","name":"bel_bra.json","type":"application/json","lastModified":1618752994736.791,"size":798855}] 30:{"id":"a9d7371d68ba5ea2","slug":"d3-soccer","title":"D3 Soccer","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-10-09T13:54:07.731Z","update_time":"$D2024-11-13T19:18:07.722Z","view_time":null,"first_public_time":"$D2021-04-18T13:45:57.905Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"8cfdbf50f630429e","login":"probberechts","name":"Pieter Robberechts","avatar_url":"https://avatars-next.observableusercontent.com/a4a891b2c24cc55bf2146ee1e871ba047039f559d25b0d4d1342e3ec9e152c10","tier":"starter_2024","bio":"CS Engineer, PhD student in sports analytics, Data geek"},"version":1218,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"370a16ad5c91515c","login":"probberechts","name":"Pieter Robberechts","avatar_url":"https://avatars-next.observableusercontent.com/a4a891b2c24cc55bf2146ee1e871ba047039f559d25b0d4d1342e3ec9e152c10","tier":null,"bio":"CS Engineer, PhD student in sports analytics, Data geek"}],"members":[{"type":"individual","id":"370a16ad5c91515c","login":"probberechts","name":"Pieter Robberechts","avatar_url":"https://avatars-next.observableusercontent.com/a4a891b2c24cc55bf2146ee1e871ba047039f559d25b0d4d1342e3ec9e152c10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"9707c5e3ea4a1025","slug":"d3-soccer","title":"d3-soccer","owner":{"id":"8cfdbf50f630429e","login":"probberechts","name":"Pieter Robberechts"}},"type":"notebook","body":{"titling":"auto","title":"D3 Soccer","cells":[{"id":0,"value":"md`# D3 Soccer\n\nThis notebook will run through the basic usage of [d3-soccer](https://www.npmjs.com/package/d3-soccer).\n\nLet's start by plotting a basic pitch...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`## The pitch component\n\nThe cell below creates a new pitch component with the default configuration values.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"pitch = d3_soccer.pitch()\n .height(300) // Heigth of the SVG object (in pixels)\n .rotate(false) // Rotate the pitch by 90 degrees\n .showDirOfPlay(false) // Show an arrow on the plot to indicate the direction of play\n .shadeMiddleThird(false) // Shade the middle third of the pitch\n .pitchStrokeWidth(.5) // Strokewidth of the pitch lines\n .goals(\"line\") // Style used to draw the goals. Alternatives are \"box\" or a custom function.\n .clip([[0, 0], [105, 68]]); // Clip the plotted area of the pitch","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`Now let's draw the pitch! We can create a new DOM element and append our pitch to it using the \\`call()\\` method.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"{\n const chart = d3.create('div').call(pitch)\n return chart.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"md`d3-soccer supports two themes: a default \\`.light-theme\\` and a \\`.dark-theme\\`. You can change the theme by adapting the class of the parent element. Below is what the dark theme looks like.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"{\n const chart = d3.create('div')\n .attr(\"class\", \"d3-soccer dark-theme\")\n .style(\"width\", pitch.width() + \"px\")\n .style(\"background-color\", \"black\")\n .call(pitch)\n return chart.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md`You can also create your own custom theme.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"{\n const chart = d3.create('div')\n .attr(\"class\", \"d3-soccer custom-theme\")\n .style(\"width\", pitch.width() + \"px\")\n .style(\"background-color\", \"#4B0082\")\n .call(pitch)\n return chart.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`## Adding data\nThe pitch contains two layers (#below and #above) which can be used to plot additional markers respectively below and above the pitch markers. The origin is located in the top-left corner of the pitch and the dimensions are (105, 68).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"md`[d3-scale](https://github.com/d3/d3-scale) can be used if the data uses a different coordinate system.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"x = d3.scaleLinear()\n .domain([0, 120])\n .range([0, 105]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"y = d3.scaleLinear()\n .domain([0, 80])\n .range([0, 68]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"md`## Adding a heatmap layer\n\nd3-soccer provides a component which makes it easy to add a heatmap on top of the pitch. The data for this heatmap should adhere to the following format:\n\n\n [\n {\n height: 0.99, // height of the cell\n width: 0.99, // width of the cell\n x: 4.95, // x-position of the cell\n y: 54.20, // y-position of the cell\n i: 5, // x-index of the cell\n j: 55, // y-index of the cell\n value: 0 // value of the cell\n },\n ]\n\nTwo custom layouts are provided to transform data to this format: [d3_soccer.grid()](https://github.com/probberechts/d3-soccer#grid) and [d3_soccer.rectbin()](https://github.com/probberechts/d3-soccer#rectbin). \n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"md`### The heatmap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"heatmap = d3_soccer.heatmap(pitch)\n .colorScale(d3.scaleSequential(d3.interpolateGreens))\n .enableInteraction(true) // Enable interaction when hovering over a cell\n .selected([0, 0]) // Sets the selected cell\n .onSelect((x,y,v) => {}) // Function executed when hovering over a cell\n .onDeselect((x,y,v) => {}) // Function executed when stopped hovering over a cell\n .interpolate(true); // Interpolate using bicubic interpolation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"md` ### The grid layout\n\nWe'll first illustrate how to use the 'grid' layout by plotting an [xT heatmap](https://karun.in/blog/expected-threat.html). This layout transforms a 2D matrix to the format that is required by the heatmap.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"xt_data_raw = {\n const transpose = m => m[0].map((x,i) => m.map(x => x[i]))\n let data = await d3.json(\"https://karun.in/blog/data/open_xt_12x8_v1.json\");\n return transpose(data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"grid = d3_soccer.grid();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"xt_data = grid(xt_data_raw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"{\n const chart = d3.create(\"div\")\n const title = chart.append(\"div\")\n .attr(\"id\", \"heatmap-title\")\n title.append(\"h4\")\n .html(\"Expected Threat (xT) = 0.003\")\n title.append(\"p\")\n .html(`\n i.e. when the team has the ball in the highlighted zone, \n they will score in the next 5 actions \n 0.3% of the time.\n `)\n chart.append(\"div\").attr(\"id\", \"heatmap\")\n return chart.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"{ \n const heatmap = d3_soccer.heatmap(pitch)\n .colorScale(d3.scaleSequential(d3.interpolateGreens))\n .enableInteraction(true)\n .onSelect((x,y,v) => {\n d3.select('#xt_value').text(v.toFixed(3)); \n d3.select('#xt_pct').text((v*100).toFixed(2))\n })\n .parent_el('#heatmap')\n .interpolate(true);\n\n d3.select('#heatmap').html('').datum(xt_data).call(heatmap);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"md`### The rectbin layout\n\nThe 'rectbin' layout can be used to aggregate data. In this example, we use the StatsBomb data of the 2019 Champions League final to visualize where Real Madrid exerted pressure.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"data = await fetchp('https://raw.githubusercontent.com/statsbomb/open-data/refs/heads/master/data/events/18245.json').then(res => res.json());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"rectbin = d3_soccer.rectbin()\n .x(d => x(d.location[0]))\n .y(d => y(d.location[1]))\n .dx(105/nb_cells)\n .dy(68/nb_cells);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"rectbinData = rectbin(data.filter(d => (\n d.hasOwnProperty(\"type\") \n && d.type.name == \"Pressure\" \n && d.team.name == \"Real Madrid\")));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"viewof nb_cells = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} cells`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"{\n const heatmap = d3_soccer.heatmap(pitch.showDirOfPlay(true))\n const chart = d3.create('div').datum(rectbinData).call(heatmap)\n return chart.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1168,"value":"md`## Plotting SPADL actions\nFinally, d3-soccer makes it easy to plot soccer actions in the [SPADL format](https://github.com/ML-KULeuven/socceraction). Here, we plot De Bruyne's goal that leads to Belgium's victory against Brazil on the World Cup. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"data_belbra = FileAttachment(\"bel_bra.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1147,"value":"{\n var pitch = d3_soccer.pitch();\n var actions = d3_soccer.actions(pitch)\n .scale(2.5)\n .teamColors({782:\"#EF3340\", 781:\"#FDB913\"});\n var actionsTable = d3_soccer.actionsTable()\n .teamColors({782:\"#EF3340\", 781:\"#FDB913\"});\n const chart = d3.create('div')\n .datum(data_belbra.slice(657,663))\n chart.append('div').call(actions)\n chart.append('div').call(actionsTable)\n return chart.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"import {fetchp} from '@tomlarkworthy/fetchp'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3_soccer = require(\"d3-soccer@0.2.0\") ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"stylesheet = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"