Fork of NBA Player Skill Spider Chart

100%

Fork of NBA Player Skill Spider Chart

✓ Published0🌍 Public

Last edited Dec 1, 2024

Created on Dec 1, 2024

Forked from NBA Player Skill Spider Chart

This interactive spider chart visualizes NBA player performance metrics—points, rebounds, assists, steals, blocks, and turnovers per game—from the 2020-2021 season. Users select a team and then an individual player through dropdown menus, causing the chart to animate and update the polygonal shape. Built with React and D3 v5, the visualization uses `scaleLinear` for each attribute axis, trigonometric positioning for the six axes, and SVG paths to render the player skill overlay.

AI-generated description

Description:

The spider chart visualizes the NBA Player State Dataset. The chart is designed to depict players skills including: gaining score, steal, block, turnover, assist, rebound per game in 2020-2021 season.

Todo:

Add name to all axes
Make the axes more readable

MIT Licensed

Similar vizzes

Loading thumbnail…

NBA Player Skill Spider Chart

Interactive NBA player statistics from the 2020-2021 season are displayed in a spider chart, comparing six per-game skills (points, rebounds, assists, steals, blocks, and turnovers) for a selected player. Users choose a team and player via React dropdown menus, triggering an animated update of the polygon and data points. The visualization is rendered as SVG using D3 v5 scales and custom React components for axes and marks, with data loaded from a CSV file.

YYichen Li

92% match

Loading thumbnail…

Fork of NBA Players' Skills Chart

This interactive dashboard visualizes NBA player statistics from the 2020-2021 season, showing a spider chart of six skills (points, rebounds, assists, steals, blocks, turnovers) for a selected player on a chosen team, alongside a pie chart of team wins and losses. Built with React and D3 v5, it uses `scaleLinear` for the radial axes and `scaleOrdinal` for the win/loss color legend. Users can switch teams and players via dropdown menus, and tooltips display exact values for each skill metric. The data is loaded from a remote CSV file.

YYichen Li

91% match

Loading thumbnail…

NBA Players' Skills Chart

This example presents a spider chart and a pie chart examining NBA player statistics for the 2020-2021 season. The spider chart displays six per-game skill metrics—points, rebounds, assists, steals, blocks, and turnovers—for a selected player, with dropdowns to choose a team and player. The pie chart visualizes the player’s win-loss record. Built with React and D3 v5, the SVG renderings use `scaleLinear` for radial axes, `scaleOrdinal` for colors, and `pie` and `arc` for the pie chart, reading data from a CSV via `csv`.

YYichen Li

88% match

Loading thumbnail…

Fork of NBA Player Games Played Bar Chart

This interactive radar chart visualizes NBA player performance statistics—points, rebounds, assists, steals, blocks, and turnovers—for a selected team and player from a CSV dataset. Built with React and D3 v5, it uses d3.scaleLinear for each metric axis, positioned radially using trigonometric calculations, and renders SVG circles and paths with animation. Users select a team from a dropdown, then choose a player to display their statistical profile as a polygon overlay on the radar grid.

YYichen Li

86% match

Loading thumbnail…

Fork of NBA Players State Bar Chart

This interactive bar chart displays NBA player statistics for each of the 30 teams, letting viewers select both a team and a specific metric (points, field goals, rebounds, assists, steals, or blocks) via dropdown menus. For rebounds, bars split into offensive and defensive components with a color legend. The chart uses D3's `scaleBand` and `scaleLinear` for axes, renders bars as SVG `rect` elements with hover effects, and draws a mean line using D3's `line` generator. Data comes from a CSV of player stats, and the visualization is built with React and `react-dropdown` for controls.

Ddominicmecca07@gmail.com

82% match

Loading thumbnail…

Fork of NBA Player Games Played Bar Chart

This interactive bar chart displays games played by NBA players across all 30 teams, with a dropdown menu to select a team. Each bar represents a player, colored by wins (light green) versus losses (light coral), with a legend on the right. The React-based visualization uses D3 v5 scales and SVG rendering, with `scaleBand` for the x-axis player names, `scaleLinear` for the y-axis game counts, and the `csv` loader to fetch the NBA Player State dataset from a GitHub gist.

Rrmgoldberg24

81% match

Loading thumbnail…

Fork of NBA Player Efficiency Scatter Plot

The scatter plot visualizes NBA player statistics, displaying player efficiency with darker dots representing higher points-per-minute ratios. The x-axis shows minutes played, while the y-axis can be switched between points, rebounds, assists, steals, and blocks. Built with D3 v6 using SVG, the visualization includes dropdown menus for axis selection and hover tooltips revealing player names. The code uses d3.scaleLinear, d3.scaleSequential with the interpolatePuRd color scale, d3.axisLeft, and d3.axisBottom, with animated transitions updating circle positions and colors when the selected statistic changes.

YYichen Li

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

79% match