Adding A Menu

100%

✓ Published0🌍 Public

Last edited Mar 23, 2023

Created on Mar 23, 2023

A scatter plot of NHL playoff performance from 1996–2022 visualizes team goals scored against year, with teams colored using `d3.scaleOrdinal` and `schemeCategory10`. A dropdown menu enables users to switch the y-axis metric between goals scored and wins, triggering re-renders through a state management pattern. The visualization includes axes rendered with `d3.axisLeft` and `d3.axisBottom`, plus an interactive color legend that dims non-hovered points via opacity changes on mouseover.

AI-generated description

A scatter plot of the Iris Dataset with no axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between year and goals scored for NHL playoff teams, with circles colored by team. The chart includes labeled axes for both dimensions, rendering data from a CSV file. The visualization uses D3 v7 for its scales, axes, and data joins, with a helper function `scatterPlot` managing the plotting logic. Axes are generated using `axisLeft` and `axisBottom`, while `scaleLinear` and `extent` handle the data mapping. The visualization populates incrementally as data loads asynchronously via `fetch`.

Sstchiang

80% match

Loading thumbnail…

Fork of Scatter Plot

A scatter plot shows NHL playoff performance across teams and years, plotting each team-season as a colored circle based on goals scored against year, with team membership encoded by color. The visualization includes axes, labels, and an interactive color legend that highlights points from a selected team when hovered. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.csvParse` to load and map the dataset, while custom modules manage axes and legend rendering. Data comes from a CSV of NHL playoff records.

Sstchiang

79% 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

78% 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

77% match

Loading thumbnail…

Fork of Scatter Plot With Menus

This example presents an interactive scatter plot of top football league scorers, showing Goals against Shots, with points colored by league. The visualization includes a bar chart and dropdown menus for exploring the data. It uses D3.js version 7.8.5, employing `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for scales and colors. Interactive features include hover effects that enlarge points and display player names, plus a clickable color legend that filters points by league. The visualization is rendered as SVG with animation, incorporating the `@curran/responsive-axes` and `@curran/axis-labels` libraries for responsive axis handling. Data comes from a Kaggle dataset on football scorers.

Eeschuman20@gmail.com

77% match

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

77% match

Loading thumbnail…

Colorful Scatter Plot of NBA 2018-2019 Playoffs with Menu

This interactive scatter plot visualizes player statistics from the NBA 2018-2019 playoffs, with each circle representing an individual player’s performance across two selectable attributes. Dropdown menus let users switch between metrics like points, assists, and rebounds, while hovering over the team legend highlights players from that team and fades the rest. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for team colors, and SVG circles with hover tooltips to reveal player names. The data comes from a Kaggle dataset of basketball player stats per season.

ZZiyang Gao

76% match

Loading thumbnail…

Fork of Scatter Plot With Menus

This interactive scatter plot visualizes Top Football League Scorers data, allowing users to compare player statistics across different metrics and years. Three dropdown menus let viewers select the x-axis variable, y-axis variable, and season year, with the chart updating to display filtered data points. Each circle is colored by player club using `scaleOrdinal` with `schemeCategory10`, and includes hover tooltips showing player names. The visualization uses D3.js with `scaleLinear` for axes, responsive axes from `@curran/responsive-axes`, and a custom color legend with click-to-highlight functionality.

Eeschuman20@gmail.com

76% match