Visual Analytics / Computer Science.
Public
Edited
Jun 6, 2023
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
drawFromSkyShotChart(
shots.filter((d) => d.possession_team.name === team),
"#shotChart .fromSkyShotChart",
{
height: 500,
width: (500 * 68) / 105 + 5,
margin: { top: 10, bottom: 20, left: 20, right: 10 },
home: game.home_team.home_team_name,
away: game.away_team.away_team_name
}
)
drawGoalChart(
shots.filter((d) => d.possession_team.name === team),
"#shotChart .goalChart",
{
height: 300,
width: 500,
margin: { top: 10, bottom: 20, left: 20, right: 10 }
}
)
events = getEvents(game)
shots = events.filter((d) => d.type.name === "Shot")
shots
Type Table, then Shift-Enter. Ctrl-space for more options.
shots[2]
seasonGames = getSeasonOfCompetition(competition)
sortedGamesOfSeason = sortGamesOfSeason(seasonGames)
class ShotTypeLegend extends GeneralChart {
constructor(data, selector, config) {
super(data, selector, config);
this.setAxes();
}
setAxes() {
this.sx = d3
.scaleBand()
.domain(d3.map(this.data, (d) => d.type))
.range([this.margin.left, this.width - this.margin.right]);
this.sy = d3
.scaleLinear()
.domain([0, 1])
.range([this.height - this.margin.bottom, this.margin.top]);
}
draw() {
this.svg.call(this.paintBackground.bind(this), "#fff1ff");
this.svg
.append("g")
.selectAll("circle")
.data(this.data)
.join("circle")
.attr("cx", (d) => this.sx(d.type) + 10)
.attr("cy", this.sy(0.5))
.attr("r", 5)
.attr("stroke", (d) => d.color)
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("stroke-dasharray", (d) => (d.type === "Goal" ? "" : "3 3"));
this.svg
.append("g")
.selectAll("text")
.data(this.data)
.join("text")
.attr("x", (d) => this.sx(d.type))
.attr("dx", 20)
.attr("y", this.sy(0.5))
.attr("dy", 5)
.attr("font-size", 14)
.text((d) => d.type);
}
}
function drawShotTypeLegend(data, selector, config) {
new ShotTypeLegend(data, selector, config).draw();
}
drawShotTypeLegend(
[
{ type: "Goal", color: "green" },
{ type: "Saved", color: "red" },
{ type: "Blocked or Wayward", color: "blue" },
{ type: "Off Target", color: "grey" }
],
".shotTypeLegend",
{
height: 70,
width: 800,
margin: { top: 10, bottom: 20, left: 20, right: 10 }
}
)
import { GeneralChart } from "@gshirato/chart-class"
shotsInCompetition = getEventsOfCompetition(seasonGamesByCompetition)
drawGoalChart(shotsInCompetition, "#shotChartByCompetition .goalChart", {
height: 300,
width: 500,
margin: { top: 10, bottom: 20, left: 20, right: 10 },
opacityUnselected: 0.01
})
drawFromSkyShotChart(
shotsInCompetition,
"#shotChartByCompetition .fromSkyShotChart",
{
height: 500,
width: (500 * 68) / 105 + 5,
margin: { top: 10, bottom: 20, left: 20, right: 10 },
home: game.home_team.home_team_name,
away: game.away_team.away_team_name,
opacityUnselected: 0.01
}
)
seasonGamesByCompetition = getSeasonOfCompetition(competitionByCompetition)
sortedGamesOfSeasonByCompetition = sortGamesOfSeason(seasonGamesByCompetition)
import {
drawFromSkyShotChart,
drawGoalChart
} from "@gshirato/statsbomb-open-data-goal-chart-methods"
import {
getEvents,
getEventsOfCompetition,
sortedCompetitions,
matchRepresentation,
competitionRepresentation,
getSeasonOfCompetition,
sortGamesOfSeason
} from "fcd9b0454fdddbb1"
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.
