Skip to main content
SimilarExport ZIP
100%

NBA Players' Skills Chart

✓ Published1🌍 Public
YYichen Li
Last edited Dec 1, 2021
Created on Nov 24, 2021

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`.

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:
    • 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
93% 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…

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
80% match
Loading thumbnail…

NBA Players State Bar Chart

This interactive bar chart visualizes NBA player statistics across all 30 teams, with dropdown menus to select a team and a statistical category such as points, rebounds, or assists. For rebounds, bars are stacked by color to distinguish offensive and defensive rebounds. The chart uses React with D3 v5 scales for positioning, renders as SVG, and displays a horizontal line at the mean value for the selected metric. Data comes from a GitHub-hosted CSV of the 2020-2021 season.

YYichen Li
80% 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
79% match
Loading thumbnail…

Radial pie - Player statistics

This radial pie chart displays NBA player statistics across multiple seasons, using stacked segments to compare metrics like points, assists, and rebounds. Each state or season forms a slice, with segment lengths representing proportional values from the CSV data. The visualization uses d3.scaleRadial for the radial axis, d3.stack for layering, and d3.arc for rendering paths. SVG output includes custom labels, a legend, and circular gridlines with tick marks, all styled via D3 v4.

WW9183907
79% match
Loading thumbnail…

NBA 2018-2019 Playoffs with Menu

This interactive scatter plot visualizes NBA 2018-2019 playoff statistics, with each circle representing a player's performance metrics. The visualization uses React dropdown menus to dynamically select which attribute appears on the x-axis and y-axis, enabling exploration of relationships between statistics like assists, rebounds, and points. The chart renders as an SVG using D3.js v5 scales and axes, with React managing state for the selected attributes. Data comes from a CSV file loaded via d3.csv, and the tooltip displays formatted values on hover.

ZZiyang Gao
78% match
Loading thumbnail…

NBA Player Efficiency Scatter Plot

This interactive scatter plot visualizes NBA player statistics from a CSV dataset, showing minutes played on the x-axis while the y-axis can be switched between points, rebounds, assists, steals, and blocks via a dropdown menu. Each dot represents a player, colored using d3.scaleSequential with an interpolatePuRd interpolator based on scoring efficiency (y-value divided by x-value). The visualization uses D3 v6 with SVG rendering, featuring hover interactions that reveal player names via appended titles, and smooth transitions when updating the y-axis selection.

YYichen Li
78% match