A3 Strip

A3 Boxplot

This example visualizes the distribution of total goals scored per game week across 38 weeks in the English Premier League using a boxplot. The p5.js sketch loads CSV data via `loadTable` from a GitHub gist, computes the five-number summary and outliers through a custom `Boxplot` class, and renders the plot with Canvas drawing functions like `line`, `rect`, and `circle`. The x-axis displays game weeks, while the y-axis represents goal counts, with outliers flagged individually.

80% match

A3 Histogram

This example visualizes the total goals scored per game week in a soccer season as a histogram. It uses the p5.js library to create a canvas and render bars representing aggregated goal counts, with mouse hover interactions displaying the exact value per bar. The data is loaded from a CSV file via `loadTable` in the `preload` function, and the bars are drawn using custom drawing logic that maps goal totals to vertical heights.

76% match

A4 - Scatter Plot

This scatter plot visualizes the relationship between total expected goals (xG) accumulated by football teams in home versus away games during a Premier League season. Each circle represents a team, positioned by aggregating home and away xG values via `d3.rollup` and `d3.sum` from CSV data. The visualization uses D3 v7 to create SVG axes with `d3.axisLeft` and `d3.axisBottom`, labels, and labeled circles, with hover effects defined in CSS.

71% match

A4 - Bar

This bar chart visualizes the average expected goals (xG) for English Premier League teams, comparing home versus away matches. The data is loaded from a CSV file and processed using `d3.csv` and `d3.mean`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map values, with bars rendered as SVG rectangles. A title and axes are added using `d3.axisLeft` and `d3.axisBottom`. The bars animate a color transition from steelblue to red using `transition`, while the page includes a video tutorial link. The rendering is SVG-based with dynamic interactivity.

70% match

Cars Scatter Plot

This scatter plot shows football match data from the English Premier League, with each circle representing a match and colored by the number of goals scored. The visualization maps match days on the x-axis and total goals per match on the y-axis, using a linear scale for both. The code uses D3 v5’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, compute scales, and render axes with SVG circles. It also computes rolling averages for home and away performance before rendering.

Bbenholvey

Goals Scatter Plot with Hover

This scatter plot visualizes the relationship between goals scored and shots taken by football players in 2018, drawing from the Top Football Leagues Scorers dataset. Each point represents a player, with circle color indicating the league (La Liga, Serie A, Bundesliga, or Premier League), and hovering over the visualization updates the state to potentially display contextual information. Built with D3.js, the chart utilizes `scaleLinear` for axis scaling, the `axes` component from `@curran/responsive-axes` for layout, and `select` and `join` operations to render and update the SVG elements. The plot also uses `observeResize` to handle responsive resizing and a custom color function to map league names to colors.

Eeschuman20@gmail.com

Goals Scatter Plot with Scale

This animated scatter plot visualizes top football league scorers from a 2018 Kaggle dataset, plotting each player's goals against their shots taken. Points are colored by league using an ordinal color scale with a clickable legend that filters the data through hover interactions. Built with D3.js, the visualization employs responsive axes, linear scales for positioning, and smooth transitions to enlarge points on mouseover, while a legend allows users to highlight specific leagues.

Eeschuman20@gmail.com

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

NNwaegerue Chinemerem