Challenge

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

94% match

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

93% match

Fork of Goals Scatter Plot

This fork of the Goals Scatter Plot visualizes football league scorers from the 2018 season, plotting player goals against shots taken. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, or Premier League) with constant opacity and radius. The chart uses D3’s `scaleLinear` for axes, `selectAll` data joins for the SVG elements, and the `@curran/responsive-axes` library for responsive tick rendering. Data comes from the Top Football League Scorers dataset on Kaggle, filtered to the year 2018.

MMANEEDI NAGAKIRAN

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.

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.

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.

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.