CS Engineer, PhD student in sports analytics, Data geek
pitch = d3_soccer.pitch()
.height(300) // Heigth of the SVG object (in pixels)
.rotate(false) // Rotate the pitch by 90 degrees
.showDirOfPlay(false) // Show an arrow on the plot to indicate the direction of play
.shadeMiddleThird(false) // Shade the middle third of the pitch
.pitchStrokeWidth(.5) // Strokewidth of the pitch lines
.goals("line") // Style used to draw the goals. Alternatives are "box" or a custom function.
.clip([[0, 0], [105, 68]]); // Clip the plotted area of the pitch
{
const chart = d3.create('div').call(pitch)
return chart.node()
}
{
const chart = d3.create('div')
.attr("class", "d3-soccer dark-theme")
.style("width", pitch.width() + "px")
.style("background-color", "black")
.call(pitch)
return chart.node()
}
html`<style>
.custom-theme {
--color: #43FCD5 ;
--color-meta: #f3efef ;
--pitch-line-color: white ;
--pitch-shade-color: gold ;
}
</style>
`
{
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()
}
x = d3.scaleLinear()
.domain([0, 120])
.range([0, 105]);
y = d3.scaleLinear()
.domain([0, 80])
.range([0, 68]);
heatmap = d3_soccer.heatmap(pitch)
.colorScale(d3.scaleSequential(d3.interpolateGreens))
.enableInteraction(true) // Enable interaction when hovering over a cell
.selected([0, 0]) // Sets the selected cell
.onSelect((x,y,v) => {}) // Function executed when hovering over a cell
.onDeselect((x,y,v) => {}) // Function executed when stopped hovering over a cell
.interpolate(true); // Interpolate using bicubic interpolation
xt_data_raw = {
const transpose = m => m[0].map((x,i) => m.map(x => x[i]))
let data = await d3.json("https://karun.in/blog/data/open_xt_12x8_v1.json");
return transpose(data);
}
grid = d3_soccer.grid();
xt_data = grid(xt_data_raw)
{
const chart = d3.create("div")
const title = chart.append("div")
.attr("id", "heatmap-title")
title.append("h4")
.html("Expected Threat (xT) = <span id='xt_value'>0.003</span>")
title.append("p")
.html(`
i.e. when the team has the ball in the highlighted zone,
they will score in the next 5 actions
<span id='xt_pct'>0.3</span>% of the time.
`)
chart.append("div").attr("id", "heatmap")
return chart.node()
}
{
const heatmap = d3_soccer.heatmap(pitch)
.colorScale(d3.scaleSequential(d3.interpolateGreens))
.enableInteraction(true)
.onSelect((x,y,v) => {
d3.select('#xt_value').text(v.toFixed(3));
d3.select('#xt_pct').text((v*100).toFixed(2))
})
.parent_el('#heatmap')
.interpolate(true);
d3.select('#heatmap').html('').datum(xt_data).call(heatmap);
}
data = await fetchp('https://raw.githubusercontent.com/statsbomb/open-data/refs/heads/master/data/events/18245.json').then(res => res.json());
rectbin = d3_soccer.rectbin()
.x(d => x(d.location[0]))
.y(d => y(d.location[1]))
.dx(105/nb_cells)
.dy(68/nb_cells);
rectbinData = rectbin(data.filter(d => (
d.hasOwnProperty("type")
&& d.type.name == "Pressure"
&& d.team.name == "Real Madrid")));
{
const heatmap = d3_soccer.heatmap(pitch.showDirOfPlay(true))
const chart = d3.create('div').datum(rectbinData).call(heatmap)
return chart.node()
}
data_belbra = FileAttachment("bel_bra.json").json()
{
var pitch = d3_soccer.pitch();
var actions = d3_soccer.actions(pitch)
.scale(2.5)
.teamColors({782:"#EF3340", 781:"#FDB913"});
var actionsTable = d3_soccer.actionsTable()
.teamColors({782:"#EF3340", 781:"#FDB913"});
const chart = d3.create('div')
.datum(data_belbra.slice(657,663))
chart.append('div').call(actions)
chart.append('div').call(actionsTable)
return chart.node()
}
import {fetchp} from '@tomlarkworthy/fetchp'
d3 = require("d3@7")
d3_soccer = require("d3-soccer@0.2.0")
stylesheet = html`<link rel='stylesheet'
href='https://unpkg.com/d3-soccer@0.2.0/dist/d3-soccer.css' />`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.