Further interaction NBA Statistics

100%

Further interaction NBA Statistics

✓ Published0🌍 Public

Last edited Jan 2, 2022

Created on Oct 12, 2021

Forked from Iterated NBA Career Stats v1

This interactive visualization displays the career statistics of the top ten NBA players based on a selected metric—points, assists, rebounds, or seasons played. Users choose a stat from a dropdown menu, which triggers a re-sorting of the horizontal bar chart using React state and `scaleBand`/`scaleLinear` scales from d3.v5. The SVG bars are rendered with tooltips showing formatted values, and the data is loaded asynchronously via d3’s `csv` from a GitHub-hosted dataset.

AI-generated description

A brief investigation of Historic NBA players and their career statistics.

This iteration added frist included a lot of back end cleaning and preparation of data. Then I was able to add a dropdown that allows the viewer to select the stat they are interested in viewing. For now it is stuck sorted by points. A few issues are present first off all active players are treated differently than retired players. Their data is from the last season while retired players have their career stats. I will be adding a toggle to look at past season vs retired players. Unfortunatly this messes with some of the analysis I wanted to do but Ill adapt. I also want to add a slider that allows you to choose the years to look at.

Read more about how the project evolved here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Iterated NBA Career Stats v1

This interactive bar chart visualizes career statistics for top NBA players, allowing users to sort and display values for points, assists, rebounds, seasons played, or All-Star appearances. A dropdown menu controls which statistic is shown, while the chart renders horizontal bars via React components and D3 v5 scales. The visualization uses d3.csv for data loading, scaleBand and scaleLinear for positioning, and SVG rectangles with tooltips to display values for the top ten players sorted by the selected metric.

PPhilip Rago

91% match

Loading thumbnail…

Nba Data but better

This interactive bar chart visualizes NBA player statistics, letting viewers switch between points, assists, rebounds, and seasons played using dropdown menus. The visualization uses d3.scaleBand and d3.scaleLinear to position bars, with d3.transition animating bar growth and mouseover effects that dim other bars and display a date tooltip. Data loads from a CSV file via d3.csv, while the custom menu component uses d3.dispatch for change events. SVG rendering includes hover opacity transitions and axis updates.

PPhilip Rago

83% match

Loading thumbnail…

NBA career data d3

This visualization displays aggregated NBA career statistics by country for a selected season year, using horizontal bar charts to compare metrics like points, assists, rebounds, and all-star appearances. Users control the view through two dropdown menus to choose the year and stat category. The chart updates with animated transitions on bar widths as selections change. Data is loaded from a CSV file via `d3.csv` and processed with `d3.rollups` and `d3.sum`. The bars are rendered as SVG rectangles with `scaleLinear` for the x-axis and `scaleBand` for the y-axis, while `d3.select` handles interactive hover effects.

PPhilip Rago

81% match

Loading thumbnail…

nba career performance with filters and grouping

The visualization displays NBA career performance metrics with interactive filters for grouping, statistics type, player status, and top-N selection, alongside a timeline brush slider. It aggregates player data by attributes like school, country, or draft year, showing mean values for points, assists, rebounds, and other career stats. The implementation uses D3.js version 7 with csv loading, rollups for grouping, and scaleLinear/scaleBand for chart construction. A snap-to-grid slider brush enables timeline filtering, while dropdown menus control the grouping dimension and metric displayed, with data sourced from an external CSV file.

PPhilip Rago

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

79% match

Loading thumbnail…

Untitled

This interactive bar chart displays NBA team statistics for the 2021 regular season, with eight buttons letting viewers switch between metrics such as field goals made, assists, and rebounds. The visualization uses d3.csv to load data from a GitHub-hosted dataset and renders SVG line and circle marks, where each team’s value is shown as a point on a vertical baseline. The d3 scaleBand and scaleLinear axes update with smooth transitions on button clicks, changing the Y-axis domain to fit the selected statistic while coloring points by conference (Western or Eastern).

LLinhao Yu

79% match

Loading thumbnail…

nba over time vert bar

This interactive bar chart visualizes NBA player statistics across career timelines, filtering by active status and allowing selection of metric (points, assists, rebounds, experience, all-star appearances) and timeline type (draft year or birthdate). The visualization uses D3 v7 with d3.rollups for data aggregation, d3.scaleBand and d3.scaleLinear for scales, and d3.sliderBottom for interaction. The code loads CSV data, groups records by time period, and renders animated vertical bars whose heights represent the average value of the selected statistic per grouping.

PPhilip Rago

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