Public
Edited
Sep 12, 2023
raw = d3.json('https://raw.githubusercontent.com/statsbomb/open-data/eb6d5c6628f54fded043f42c4619a0bd8071fe96/data/events/15946.json', d3.autotype)
//raw = d3.json('https://raw.githubusercontent.com/statsbomb/open-data/master/data/events/15956.json', d3.autotype)
Inputs.table(raw)
//remove the files that don't include location
data = raw.filter( d => d.location ).map( d => {
let r = {}
r.x = d.location[0]
r.y = d.location[1]
r.player_name = d.player.name
r.team_name = d.team.name
r.position_id = d.position.id
r.event_name = d.type.name
return r
})
Plot.plot({
marks:[
Plot.dot(data,{x:"x", y:"y"})
]
})
Plot.plot({
inset: 10,
width: 900,
height: 600,
marks:[
Plot.image(bg,{x:60, y:40, width: 960,
height: 540, src: "url"}),
Plot.dot(data,{x:"x", y:"y"})
]
})
bg = [{"url":await FileAttachment("282370.png").url()}]
Plot.plot({
inset: 10,
width: 900,
height: 600,
color: {scheme:"YlGnBu"},
marks:[
Plot.image(bg,{x:60, y:40, width: 960, height: 540, src: "url"}),
Plot.rect(data,Plot.bin({fill:"count"}, {x:"x", y:"y"})),
Plot.dot(data,{x:"x", y:"y"})
]
})
list_players = [...new Set(raw.filter(d => d.location).map(d => d.player.name))]
viewof selected_player = Inputs.select(list_players)
Plot.plot({
inset: 10,
width: 900,
height: 600,
color: {scheme:"YlGnBu"},
marks:[
Plot.image(bg,{x:60, y:40, width: 960, height: 540, src: "url"}),
// Plot.rect(data,Plot.bin({fill:"count"}, {x:"x", y:"y"})),
Plot.dot(data.filter(d => d.player_name == selected_player),{x:"x", y:"y"})
]
})
Plot.plot({
inset: 10,
width: 900,
height: 600,
x:{domain:d3.extent(data, d=> d.x)},
y:{domain:d3.extent(data, d=> d.y)},
color: {scheme:"YlGnBu"},
marks:[
Plot.image(bg,{x:60, y:40, width: 960, height: 540, src: "url"}),
// Plot.rect(data,Plot.bin({fill:"count"}, {x:"x", y:"y"})),
Plot.dot(data.filter(d => d.player_name == selected_player),{x:"x", y:"y"})
]
})
list_events = [...new Set(raw.filter(d => d.location).map(d => d.type.name))]
viewof selected_event = Inputs.checkbox(list_events)
Plot.plot({
inset: 10,
width: 900,
height: 600,
color: {scheme:"YlGnBu"},
x:{domain:d3.extent(data, d=> d.x)},
y:{domain:d3.extent(data, d=> d.y)},
marks:[
Plot.image(bg,{x:60, y:40, width: 960, height: 540, src: "url"}),
// Plot.rect(data,Plot.bin({fill:"count"}, {x:"x", y:"y"})),
Plot.dot(data.filter(d => d.player_name == selected_player && selected_event.indexOf(d.event_name) > -1),{x:"x", y:"y"})
]
})
//remove the files that don't include location
data2 = raw.filter( d => d.location ).map( d => {
let r = {}
r.x = d.location[0]
r.y = d.location[1]
r.player_name = d.player.name
r.team_name = d.team.name
r.position_id = d.position.id
r.event_name = d.type.name
r.player_index = list_players.indexOf(r.player_name)
r.shot_outcome = d.shot ? d.shot.outcome.name : ""
return r
})
Plot.plot({
grid:true,
inset: 10,
width: 920,
height: 800,
color: {scheme:"YlGnBu"},
x:{domain:d3.extent(data, d=> d.x)},
y:{domain:d3.extent(data, d=> d.y)},
facet: {data:data2,
x: d => d.player_index % 5,
y: d => Math.round(d.player_index / 5)},
marks:[
Plot.frame(),
Plot.image(bg,{x:60, y:40, width: 800/5, height: 500/5, src: "url"}),
// Plot.rect(data,Plot.bin({fill:"count"}, {x:"x", y:"y"})),
//r = radious
Plot.dot(data2.slice(),{x:"x", y:"y", fill:"team_name", r:1, fill:"lightgray"}),
Plot.dot(data2,{x:"x", y:"y", fill:"team_name"}),
Plot.text(data2, { x:960/5/5 ,
y:540/5/2,
textSize:20,
textAnchor:"left",
text:"player_name"})
]
})
Plot.plot({
grid:true,
inset: 10,
width: 920,
height: 800,
color: {scheme:"YlGnBu"},
x:{domain:d3.extent(data, d=> d.x)},
y:{domain:d3.extent(data, d=> d.y)},
facet: {data:data2,
x: d => d.player_index % 5,
y: d => Math.round(d.player_index / 5)},
marks:[
Plot.frame(),
Plot.image(bg,{x:60, y:40, width: 800/5, height: 500/5, src: "url"}),
// Plot.rect(data,Plot.bin({fill:"count"}, {x:"x", y:"y"})),
//r = radious
Plot.dot(data2.slice(),{x:"x", y:"y", fill:"team_name", r:1, fill:"lightgray"}),
Plot.dot(data2,{x:"x", y:"y", fill:"team_name"}),
Plot.dot(data2,{filter: d => d.shot_outcome == "Goal", x:"x", y:"y", fill:"red", r:5}),
Plot.text(data2, { x:960/5/5 ,
y:540/5/2,
textSize:20,
textAnchor:"left",
text:"player_name"})
]
})
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.
