Skip to main content
SimilarExport ZIP
100%

Interactive Scatter Plot

✓ Published7🌍 Public
Eeschuman20@gmail.com
Last edited Mar 27, 2024
Created on Mar 27, 2024

This interactive scatter plot visualizes top football league scorers using D3.js, letting users explore relationships between performance metrics like goals, shots, expected goals (xG), and minutes played. Three dropdown menus allow selection of the x-axis variable, y-axis variable, and season year (2016–2020). The chart renders circles colored by league, with player labels on hover and a color legend that supports filtering by league via click, with double-click to clear. All visual elements—including axes, scatter points, and legend—update in response to user input, creating a dynamic, animated exploration of the dataset. The visualization is built with D3 v7 and is responsive to container resizing.

AI-generated description

A simple scatter plot with D3 showing the Top Football League Scorers,

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot With Menus

This interactive scatter plot visualizes top football league scorers, with menus to select different metrics for the x-axis, y-axis, and year. The chart displays each player as a circle, colored by league, and uses a color legend to filter points by league. The visualization is built with D3.js, using `scaleLinear` for axes, `scaleOrdinal` for colors, and responsive axes. Users can hover over points to highlight them and see player names via tooltips, while the legend allows clicking to isolate a specific league.

Eeschuman20@gmail.com
92% match
Loading thumbnail…

Fork of Scatter Plot With Menus

This scatter plot visualizes top football league scorers, allowing users to compare different metrics like goals, shots, and expected goals across several seasons. It uses D3.js with interactive dropdown menus to select the x-axis, y-axis, and year for the displayed data, while points are colored by league. A color legend enables filtering by league via click, and hovering over points reveals player names. The visualization also features responsive axes and a clean inner plot background, all implemented with D3’s scale functions and SVG rendering.

Eeschuman20@gmail.com
91% match
Loading thumbnail…

Fork of Scatter Plot With Menus

This interactive scatter plot visualizes football league scorers, with dropdown menus to select which attributes appear on the x- and y-axes (such as goals, shots, or xG), as well as the season year. Each point represents a player, colored by league, with tooltips displaying names on hover. The visualization uses D3.js scales and axes from `@curran/responsive-axes`, while a color legend allows filtering points by league through click interactions. Data comes from the Kaggle Top Football League Scorers dataset, with animated transitions on hover. The chart is implemented using D3 selections, `scaleLinear`, `scaleOrdinal`, and `schemeCategory10`.

Eeschuman20@gmail.com
90% match
Loading thumbnail…

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
87% match
Loading thumbnail…

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
87% match
Loading thumbnail…

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.

Eeschuman20@gmail.com
86% match
Loading thumbnail…

Fork of Goals Scatter Plot with Hover

This scatter plot visualizes top football league scorers, showing the relationship between goals and shots for players in 2018. The plot uses colored circles to represent different leagues—La Liga, Serie A, Bundesliga, and Premier League—with each circle sized and labeled by player name. Hovering over a circle enlarges it and displays a tooltip with the player's name. The visualization is built using D3.js, specifically the `select`, `scaleLinear`, and `axisLeft` APIs, while relying on the `@curran/responsive-axes` library for axes rendering. Data comes from the Top Football League Scorers dataset on Kaggle.

KKusumaKumariDama@my.unt.edu
86% match
Loading thumbnail…

Fork of Goals Scatter Plot with Scale- Menu

This interactive scatter plot, built with D3.js, visualizes goal-scoring statistics from top football leagues, using data from Kaggle. The visualization includes dropdown menus for selecting which numeric column to display on the X and Y axes, allowing users to compare different metrics such as Goals and Shots. The plot is color-coded by league, with an interactive legend that supports hover highlighting and click-to-filter functionality. The animation responds to axis changes, updating the visualization dynamically.

Eeschuman20@gmail.com
85% match