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

100%

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

✓ Published1🌍 Public

Last edited Apr 7, 2023

Created on Apr 5, 2023

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

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.

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

MIT Licensed

Similar vizzes

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

97% match

Loading thumbnail…

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

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.

MMatthew Dzwil

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

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

81% match

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

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

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

75% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the final Premier League standings, plotting each team’s points total along the x-axis against team names on the y-axis using a categorical scale. It uses d3.csv to load the data, d3.scaleLinear for the point values, and d3.scalePoint for team ordering, with axes from d3.axisLeft and d3.axisBottom. Circles are rendered via SVG, with gridlines generated through tickSize, and margin-based positioning via a translated group.

Bbenholvey

75% match