Skip to main content
SimilarExport ZIP
100%

Fork of NBA Player Efficiency Scatter Plot

✓ Published0🌍 Public
YYichen Li
Last edited Dec 9, 2021
Created on Oct 27, 2021

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.

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. Darker color represents higher efficiency.

What's new:

  • Added a dropdown meun interaction to the y-axis representation.
  • Added the hover interaction to dots. It shows the player's name when your mouse is on the dots.
MIT Licensed

Similar vizzes

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
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
94% 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
93% 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
93% 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
90% match
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
90% match
Loading thumbnail…

NBA Player Efficiency Scatter Plot with Brush

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.

YYichen Li
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This reusable scatter plot, built with D3.js, visualizes the NBA dataset from a GitHub Gist, with each point representing a player. It shows the relationship between two selected attributes—initially petal width and sepal length—while coloring the points by team abbreviation. The plot’s axes and circles are rendered as SVG, with an animation cycling through four different attribute combinations every two seconds. The implementation uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs to construct the chart dynamically.

FFAN CHI YU(范紀予)
80% match