CS Engineer, PhD student in sports analytics, Data geek
{
const height_header = 70;
const width_bar = 20;
const pitch_margin = 10;
// Select a match to plot
const data = tracking_data.filter(d => d.play == "Fulham 0 - [1] Liverpool");
// Create the pitch
const pitch = d3_soccer.pitch();
// Create the header
const header = d3_soccer.matchHeader()
.hed("Premier League")
.score([0, 1])
.logoAway("https://upload.wikimedia.org/wikipedia/fr/thumb/5/54/Logo_FC_Liverpool.svg/langfr-130px-Logo_FC_Liverpool.svg.png")
.logoHome("https://upload.wikimedia.org/wikipedia/en/thumb/e/eb/Fulham_FC_%28shield%29.svg/150px-Fulham_FC_%28shield%29.svg.png");
// Create an svg container
const chart = d3.create('div')
.style('font-family', 'Helvetica')
const svg = chart.append('svg')
.attr('width', pitch.width() + + pitch_margin+ width_bar)
.attr('height', pitch.height() + height_header + pitch_margin);
// Draw the header
let ax_header = svg.append('g')
.attr("transform", `translate(${pitch_margin}, 0)`)
.call(header)
ax_header.selectAll("image").attr("height", 35);
// Draw the pitch
let ax_pitch = svg.append('g')
.attr("transform", `translate(0, ${height_header})`)
.call(pitch);
// Draw footnote
ax_pitch.append('text')
.attr('x', pitch.width() - pitch_margin)
.attr('y', pitch.height() + pitch_margin)
.attr('text-anchor', 'end')
.style("fill", "grey")
.style("font-style", "italic")
.style("font-size", "11px")
.text("Data provided by LastRowView");
// Draw the metric bar
let ax_bar = svg.append("g")
.attr("transform", `translate(${pitch.width()}, ${height_header + pitch_margin})`)
let bar = ax_bar.selectAll("rect")
.data([100])
bar.enter()
.append("rect")
.attr("class", "value")
.attr("fill", "steelblue")
.attr("width", 20)
.attr("x", 0)
.merge(bar)
.attr("y", d => d)
.attr("height", d => pitch.height() - 2 * pitch_margin - d);
ax_bar.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", pitch.height() - 2 * pitch_margin)
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("width", 20);
// Plotting
let pitch_plot_layer = ax_pitch.select(".above")
let x = d3.scaleLinear()
.domain([0, 100])
.range([0, 105]);
let y = d3.scaleLinear()
.domain([0, 100])
.range([0, 68]);
let z = d3.scaleLinear()
.domain([0, pitch.height() - 2 * pitch_margin])
.range([0, 105]);
function updateData(frame) {
// Get all data for the current frame
let frameData = data.filter(d => d.frame == frame);
// Plot the locations of all players and the ball
let u = pitch_plot_layer.selectAll('circle')
.data(frameData, d => parseInt(d.player) || 0);
u.enter().append('circle')
.attr('cx', d => x(parseFloat(d.x)))
.attr('cy', d => y(parseFloat(d.y)))
.attr('r', 1)
.attr('fill', d => d.bgcolor || 'black')
.attr('stroke', d => d.edgecolor)
.attr('stroke-width', .2)
.attr('fill-opacity', 0.5);
u.attr('cx', d => x(parseFloat(d.x)))
.attr('cy', d => y(parseFloat(d.y)))
u.exit().remove();
// Plot the distance to the goal
let ball_obj = frameData.filter(d => d.team == "")
console.log(distToGoal(ball_obj[0]), z(distToGoal(ball_obj[0])))
let v = ax_bar
.selectAll("rect.value")
.data(ball_obj)
.transition() // Smooth transition
//.duration(50) // Transition duration;
.attr('y', d => z(distToGoal(d)))
.attr('height', d => pitch.height() - 2 * pitch_margin - z(distToGoal(d)))
}
let frames = d3.max(data, d => parseInt(d.frame));
// Data provided has 20 frames per second --> update every 50 ms.
var i = 0
setInterval(function(){
i = i === frames ? 0 : i + 1;
updateData(i)
}, 50);
return chart.node()
}
tracking_data = d3.csv('https://raw.githubusercontent.com/Friends-of-Tracking-Data-FoTD/Last-Row/master/datasets/positional_data/liverpool_2019.csv')
d3 = require("d3@7")
d3_soccer = require("d3-soccer@0.2.0")
distToGoal = (obj) => {
const dx = 0 - parseFloat(obj.x);
const dy = 68/2 - parseFloat(obj.y);
return Math.sqrt(dx * dx + dy * dy);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
