Fork of NBA Players' Skills Chart

100%

Fork of NBA Players' Skills Chart

✓ Published0🌍 Public

Last edited Dec 9, 2021

Created on Dec 1, 2021

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.

AI-generated description

Description:

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

Todo:

Spider Chart:
- Match the ticks with the circle

MIT Licensed

Similar vizzes

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

91% match

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

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 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 Games Played Bar Chart

This interactive bar chart visualizes the games played by NBA players for a selected team, using data from the NBA Player State Dataset. Users can choose a team from a dropdown menu, which updates the display to show each player's name on the x-axis and their total games played on the y-axis. The chart is rendered with React and SVG, using D3’s `scaleBand` and `scaleLinear` for axes, and includes a color legend differentiating wins from losses. Bars are colored light green, reflecting the "Wins" category.

VVamsiYandapalli

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

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

79% match

Loading thumbnail…

Interactive Highlighting Colorful Scatter Plot of NBA 2018-2019 Playoffs with Menu

This interactive scatter plot visualizes NBA 2018-19 playoff player statistics, where each circle represents a player and its position reflects selected attributes like games played or points. Users can switch between different statistical measures via dropdown menus and hover over the team legend to fade other teams, employing d3.scaleOrdinal for color mapping and d3.scaleLinear for axes. The plot uses React with D3 v5 for rendering SVG marks, and data comes from a Kaggle basketball dataset, filtered for playoff performance.

ZZiyang Gao

78% match