Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
HHirsh Gupta
Last edited Mar 16, 2021
Created on Mar 15, 2021

This interactive scatter plot visualizes fantasy football team efficiencies by comparing actual versus optimal weekly performance across different positions. A dropdown menu lets users filter data by team or position, with each team represented as a colored circle. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleLinear for axes and d3.csv to load the dataset. Hover interaction is not implemented, but the menu-driven filtering updates the scatter plot dynamically.

AI-generated description
MIT Licensed

Similar vizzes

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
84% 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
84% 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
83% 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
82% 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
82% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays football player statistics across six attributes (ARG, BRA, ESP, FRA, GER, ITA) from a FIFA dataset. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with react state managing the selection. The code uses d3.scaleLinear for scales, d3.extent for domains, and d3.csv to load data, rendering circles as SVG marks with tooltips via the title element. Axis components generate ticks with tick formatting using d3.format.

NNikithakatta30
80% match
Loading thumbnail…

Interactive Scatter Plot

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.

Eeschuman20@gmail.com
80% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users select which variables from the auto-mpg dataset appear on the x- and y-axes. The visualization renders circles in SVG with d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, while the custom dropdownMenu component triggers re-renders via onOptionClicked. Points animate from the center outward using transition().duration(2000), and axis labels update dynamically. The menus are built with plain HTML select elements, and the data is loaded via d3.csv.

Bbencestubnya
80% match