Skip to main content
SimilarExport ZIP
100%

Goals Scatter Plot with Hover

✓ Published4🌍 Public
Eeschuman20@gmail.com
Last edited Feb 20, 2024
Created on Feb 13, 2024

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.

AI-generated description

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

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

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
94% 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
93% 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
92% match
Loading thumbnail…

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

Fork of Goals Scatter Plot

This example shows a scatter plot of football scorers from the 2018 season, with goals on the x-axis and shots on the y-axis. Each point represents a player, colored by league (La Liga, Serie A, Bundesliga, or Premier League). It uses D3’s `scaleLinear` and axis functions from `@curran/responsive-axis` to render the plot. The code filters data from the Top Football League Scorers Kaggle dataset and customizes circle color, radius, and opacity via the `viz` function.

Eeschuman20@gmail.com
87% match
Loading thumbnail…

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

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

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
87% match