Loading Data for Premier League xG for teams from 21-22 season

100%

Loading Data for Premier League xG for teams from 21-22 season

✓ Published3🌍 Public

Last edited Jan 30, 2023

Created on Jan 23, 2023

This example demonstrates the loading process for Premier League expected goals (xG) data from the 21-22 season, sourced from Understat. The visualization displays the raw CSV data as a JSON-formatted table within a `<pre>` element, showing each team’s categorical name alongside quantitative values for matchweek, expected points (xP), actual points, and league table position based on xP. The code fetches the CSV file asynchronously, parses it with `d3.csvParse`, converts numeric strings to numbers, and renders the state using d3’s selection and join operations. The interface initializes with a loading state before populating the data table.

AI-generated description

This data comes from: https://understat.com/

Variables and their types:

Team (categorical): A Premier League Team

Matchweek (quantitative): Which week in the 38 week season the game occured

xP (quantitative): A probability that corresponds to the expected amount of points a team has accumulated so far in the season

Points (quantitative): The number of points gained in the game so far in the season

xPTable (quantitative): The position in the PL table a team would be based on their xP

MIT Licensed

Similar vizzes

Loading thumbnail…

Mapping Data for Premier League xG for teams from 21-22 season

This visualization displays the average points per game (PPG) and expected points per game (xPPG) for each Premier League team during the 21-22 season, derived from Understat data. It uses d3.csvParse to load the CSV, d3.flatRollup to group matches by team, and d3.max to calculate the final point totals before dividing by 38 matchweeks. The results are rendered as a JSON-formatted text block using d3.select and .join. Team, Matchweek, xP, Points, and xPTable variables are all parsed as quantitative or categorical types for the aggregation.

MMatthew Dzwil

85% match

Loading thumbnail…

Loading Overall Player Data for 21-22 Premier League

This example loads and displays the complete overall player dataset for the 2021-22 Premier League season, sourced from FBref. It shows the raw data as a JSON-formatted text dump within a `<pre>` element, initially displaying a "LOADING" state while fetching. The visualization uses D3 v7’s `csvParse` to convert the fetched CSV into an array of objects, coercing all quantitative fields to numbers. The `viz` function orchestrates the rendering, and state management is handled via a custom `setState` function that triggers re-renders. No visual chart is generated; the output is purely the parsed data structure.

MMatthew Dzwil

81% match

Loading thumbnail…

Data Transformation for Premier League xG for teams from 21-22 season

This example demonstrates data transformation for Premier League xG data from the 21-22 season, filtering the dataset to a single team (Arsenal) and computing their maximum accumulated xP and Points values. The visualization uses d3.csvParse to load the CSV, then applies type coercion to convert Matchweek, xP, Points, and xPTable from strings to numbers. Using d3.max, it calculates the season’s peak expected points and actual points for Arsenal, and displays the filtered team data as JSON in a pre element. The data originates from understat.com and is fetched asynchronously through a gist URL.

MMatthew Dzwil

80% match

Loading thumbnail…

Scatter Plot PL xG Data with both xP and Points with menu

This interactive scatter plot visualizes Premier League data for a selected team, comparing actual points against expected points (xP) across matchweeks. A dropdown menu lets users choose among teams, updating two overlaid lines: a solid red line for actual points and a dashed black line for xP. Built with D3 v7, the visualization fetches CSV data from GitHub Gists, uses scaleLinear for axes, and implements a custom dropdown with scroll functionality. The menu, axes, and scatter plot are modularized into separate JavaScript functions, with styled red accents matching team colors.

MMatthew Dzwil

74% match

Loading thumbnail…

Line Plot comparing 2021-2022 PL teams xP to Total points Updated

This interactive line plot compares a selected Premier League team's expected points (xP) to their actual points across the 2021-2022 season. Users choose a team by clicking a button with the team’s logo, which updates the visualization using D3.js v7. The chart uses `d3.scaleLinear` and `d3.line` to render the two lines, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Team data is fetched from a GitHub Gist CSV file.

MMatthew Dzwil

73% match

Loading thumbnail…

Table updated of PL xG Data with both xP and Points

This visualization displays Arsenal’s Premier League expected points (xP) and actual points across matchweeks, rendered as a table alongside a scatter plot with two overlaid line charts. The code uses D3 v7 APIs including `scaleLinear`, `line`, `axisLeft`, and `axisBottom` to draw axes and paths, while the table is built from parsed CSV data using `csvParse` and dynamic column mapping. Data comes from a GitHub-hosted CSV file, with xP and Points values converted to numbers.

MMatthew Dzwil

73% match

Loading thumbnail…

Table of PL xG Data with both xP and Points

This example displays a table of Arsenal’s Premier League data, showing matchweek, expected points (xP), actual points, and expected points table position. The code fetches a CSV file from a GitHub gist, parses it with `d3.csvParse`, and filters rows for Arsenal. It builds an HTML table using D3’s selection and data-join methods, appending table headers and rows. The visualization also includes commented-out D3 line chart code using `d3.line()` and axes, but the active output is purely the tabular view.

MMatthew Dzwil

73% match

Loading thumbnail…

Line Plot comparing 2021-2022 PL teams xP to total points

This interactive line plot compares each Premier League team's expected points (xP) against their actual points across the 2021-2022 season. Users select a team via image buttons or a dropdown menu, dynamically updating the chart to display two overlaid lines: a solid line for actual points and a dashed black line for expected points. The visualization uses d3.scaleLinear and d3.line to construct the axes and series from CSV data, with team colors sourced from stadium location data.

MMatthew Dzwil

72% match