Final xP vs. Points for the 2021-2022 Premier League Season

100%

Final xP vs. Points for the 2021-2022 Premier League Season

✓ Published0🌍 Public

Last edited Apr 27, 2023

Created on Apr 27, 2023

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

This interactive scatter plot tracks Arsenal’s expected points (xP) and actual points across the 2021-2022 Premier League season. A sidebar of team crest buttons lets users switch teams, updating two overlaid line charts: a solid line for points and a dashed line for xP. Built with D3 v7, the visualization uses `scaleLinear`, `line`, and `axisBottom`/`axisLeft` from the `axes` module, with data fetched from CSV files via `csvParse`. A legend highlights line types, and hover effects scale crest images.

AI-generated description

A scatter plot of the PL xG data with axes and a button.

Help from: https://d3-graph-gallery.com/graph/line_select.html and https://www.w3schools.com/howto/howto_js_dropdown.asp and https://www.freecodecamp.org/news/how-to-build-a-dropdown-menu-with-javascript/ and https://alvarotrigo.com/blog/drop-down-menu-javascript/ and https://www.solodev.com/blog/web-design/how-to-add-scroll-functionality-to-your-dropdowns.stml and https://www.youtube.com/watch?v=POeKjbV6TMI and https://www.w3schools.com/js/js_events.asp and https://www.sololearn.com/Discuss/422441/how-to-use-image-as-a-button-in-java-script and https://www.d3indepth.com/selections/

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Scatter Plot PL xG Data

This scatter plot shows Arsenal’s points and expected points (xP) per matchweek across a Premier League season. A single SVG canvas displays two overlaid linear scales mapping matchweek to points and xP, with axes labeled accordingly. The code uses D3 v7 primitives like `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` from the `axes` module. Data is loaded via `csvParse` from a raw GitHub CSV, filtered for Arsenal, and rendered as circles using `selectAll('circle').join()`. The visualization clarifies how actual results compare to underlying performance metrics.

MMatthew Dzwil

86% match

Loading thumbnail…

Scatter Plot PL xG Data with both xP and Points

This scatter plot visualizes Arsenal’s Premier League performance by overlaying actual points and expected points (xP) across matchweeks. Red and green circles distinguish the two metrics, with both plotted against the same axes. The visualization uses d3.scaleLinear for scales, d3.scaleOrdinal for coloring, and d3.axisLeft and d3.axisBottom for axes. Data is fetched as CSV and parsed with d3.csvParse, then filtered to Arsenal. The chart updates responsively with window dimensions and renders separate groups for points and xP values.

MMatthew Dzwil

85% match

Loading thumbnail…

Line Chart PL xG Data with both xP and Points

This line chart visualizes Arsenal's expected goals (xG) data across Premier League matchweeks, comparing their xP (expected points) against actual Points earned. The visualization uses a red solid line for points and a green dashed line for xP, with both plotted against the same axis. Built with D3.js v7, the implementation uses `scaleLinear` for axes and the `line()` generator to create path elements. The data is loaded via `csvParse` from a GitHub gist containing the 2021-22 season statistics.

MMatthew Dzwil

84% match

Loading thumbnail…

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

This example visualizes Premier League expected goals (xG) data for Arsenal, plotting both actual points and expected points (xP) across matchweeks as separate scatter plot layers over a shared axis. A clickable “Team” button toggles a dropdown menu listing all teams, allowing the user to filter and compare different squads. The visualization is built with D3 v7, using `scaleLinear` for axes, `csvParse` to load data from a GitHub gist, and applies a join-based approach for incremental SVG rendering of circles and menus. The code also integrates custom axis and dropdown modules.

MMatthew Dzwil

84% match

Loading thumbnail…

Scatter Plot Simple PL xG Data

This scatter plot visualizes Arsenal's performance data from the 2021-22 Premier League season, displaying two overlapping datasets from a CSV file: actual points scored and expected points (xG) per matchweek. Both series appear as red and green circles plotted against matchweek on the x-axis, with no axes or labels visible. The visualization uses d3.scaleLinear for both coordinate mappings and d3.scaleOrdinal for color encoding, while data is fetched and parsed with d3.csvParse.

MMatthew Dzwil

83% match

Loading thumbnail…

Scatter Plot Simple PL xG Data

MMatthew Dzwil

83% 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

82% match