Skip to main content
SimilarExport ZIP
100%

NBA Player Efficiency Scatter Plot with Brush

✓ Published2🌍 Public
YYichen Li
Last edited Dec 8, 2021
Created on Oct 20, 2021

This interactive visualization displays NBA player scoring efficiency using two coordinated scatter plots. Each dot represents a player, positioned by minutes played on the x-axis and points scored on the y-axis, with darker colors indicating higher efficiency. A brushable mini time-series chart allows users to select a range of minutes, filtering the main scatter plot to show only players within that selection. Built with React and D3 v5, the example uses `d3.brushX` for the interactive brushing and `d3.scaleSequential` with the `interpolatePuRd` color scale for efficiency encoding. The dataset is loaded from a GitHub-hosted CSV file.

AI-generated description

Description:

The scatter plot visualizes the NBA Player State Dataset. It is designed to depict player's scoring efficiency.

Representation:

  • X-axis: Minutes played
  • Dots: Each dots represents a player.
  • Colors: Darker color represents higher efficiency.

What's new:

  • Add a brush to the scatter plot using d3-brush.

Reference:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of NBA Player Efficiency Scatter Plot with Brush

This scatter plot visualizes NBA player scoring efficiency, where each dot represents a player positioned by minutes played (x-axis) and points scored (y-axis), with darker colors indicating higher efficiency. The visualization uses React with D3 v5 libraries, including `scaleLinear` for axes and `scaleSequential` with `interpolatePuRd` for the efficiency color encoding, rendered as SVG circles. A brushed time series panel at the bottom, implemented with `brushX`, filters the main scatter plot by a time range.

VVishnu Sudireddy
94% 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
89% match
Loading thumbnail…

NBA Player Scoring Efficiency Scatter Plot

This scatter plot visualizes NBA player scoring efficiency by plotting minutes played on the x-axis against total points on the y-axis. Each dot represents a player, with darker red-to-purple colors indicating higher scoring efficiency, calculated as points per minute. The visualization uses d3.csv to load data from a GitHub Gist, d3.scaleLinear for the axes, and d3.scaleSequential with the interpolatePuRd color scheme to encode efficiency. Hovering over any dot reveals the player’s name and point total via an SVG title tooltip.

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

Fork of NBA Player Scoring Efficiency Scatter Plot

This scatter plot shows NBA player scoring efficiency, with each dot representing a player positioned by minutes played on the x-axis and total points on the y-axis. A darker dot color indicates higher scoring efficiency, computed as points per minute multiplied by 15. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` for both axes, `scaleSequential` with the `interpolatePuRd` color scheme for efficiency shading, and `csv` to load the NBA Player State Dataset from a GitHub gist. Hovering over a dot reveals the player’s name and point total via a tooltip.

Cclarkboyd15
85% match
Loading thumbnail…

Fork of NBA Player Efficiency Scatter Plot

This scatter plot visualizes NBA player scoring efficiency using a dataset from a GitHub gist. It plots minutes played on the x-axis against a selectable y-axis metric—points, rebounds, assists, steals, or blocks—with each dot representing a player. Dot color indicates efficiency (points per minute), with Western Conference teams shown in reds and Eastern Conference teams in blues, differentiated through `d3.scaleSequential` with `interpolateReds` and `interpolateBlues`. The visualization uses D3 v6 with SVG rendering, including animated transitions via `transition().duration(600)`, interactive hover opacity, a dropdown menu built with a custom `menu` module, and a color legend for conference identification.

YYichen Li
85% match
Loading thumbnail…

Fork of NBA Player Scoring Efficiency Scatter Plot

This scatter plot visualizes NBA player scoring efficiency by plotting minutes played on the x-axis against points scored on the y-axis. Each circle represents a player, with darker colors indicating higher scoring efficiency, computed as points per minute multiplied by fifteen. The visualization uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.scaleSequential with an interpolatePuRd color scale. Hovering over a dot reduces its opacity, while a title tooltip displays the player’s name and points. The chart renders as SVG, sized to the full window.

SSamanvitha1
85% match
Loading thumbnail…

Scatter Plot with Color

A scatter plot visualizes NBA player statistics with points colored by rebounds, showing the relationship between points and assists across players. The visualization uses React components with D3 v5 scales, including `scaleLinear` for both axes and `scaleOrdinal` for categorical color mapping. Data loads asynchronously from a CSV file via `useEffect` and `d3.csv`, rendering circles in an SVG with positioned axes.

FFAN CHI YU(范紀予)
77% match