Shotmappingtest

Shotplot

This interactive SVG visualization plots every shot taken by a single soccer player across a season, with each shot positioned on a pitch diagram and colored by outcome (goal, blocked, off target, etc.). Hovering over a shot reveals a tooltip with the opponent, match minute, and home/away status. The visualization uses D3.js version 3.5 to draw the pitch, render the shot data points, and handle the d3-tip tooltips, with the data displayed in a static text file.

SSaintat1

77% match

drawpitch

This visualization displays the locations and outcomes of soccer shots during matches, plotted on a scaled pitch. Each shot is represented by a circle, with the x and y coordinates mapped from the CSV data onto the field. The size of each circle encodes the expected goal (xG) value, while color distinguishes whether the shot resulted in a goal or not. Hovering or interacting with the circles reveals player names, teams, and shot details. The SVG rendering uses D3 v4 to draw the pitch outline and position the shots, providing a clear spatial overview of shot distribution and quality across teams.

TTollyCoburn

77% match

Goals Scatter Plot with Hover

This example visualizes top football league scorers from a Kaggle dataset, plotting goals against shots for the 2018 season. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League), and hovering enlarges the point and displays the player’s name. The visualization is built with D3.js, using `scaleLinear`, `select`, and `transition` for the hover effect, while `@curran/responsive-axes` handles axis generation. The code animates circle radius changes on mouseover and removes tooltips on mouseout.

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

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.

Fork of Goals Scatter Plot with Hover

This fork of a goals scatter plot uses D3 to visualize top football league scorers from a Kaggle dataset, filtering the data to the year 2018. It shows the relationship between goals scored and shots taken, with each circle representing a player, colored by their league. Hovering over a circle enlarges it and displays the player’s name via a tooltip. The chart uses `scaleLinear`, `extent`, and `select` from D3, along with the `axes` and `observeResize` utilities, to render responsive axes and a fixed-size plot area.

Zzycbydxgs@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.

72% match

Goals Scatter Plot with Responsive Axis

This scatter plot displays the relationship between goals scored and shots taken by individual footballers in 2018, with points colored by league. It uses D3’s `scaleLinear` and `axisLeft` to map data from the Top Football League Scorers dataset onto a responsive SVG canvas, while the `@curran/responsive-axes` library handles axis resizing. The visualization filters the data to a single year and encodes league membership through a custom color function, offering a clear comparison of shooting efficiency across top European competitions.