Top 2017 NBA FG Visualization

100%

Top 2017 NBA FG Visualization

✓ Published0🌍 Public

Last edited Sep 26, 2017

Created on Sep 26, 2017

This visualization shows the field goal attempts and shooting efficiency of NBA players from the 2017 season, with each player represented as a circle positioned along the x-axis by field goal attempts and the y-axis by field goal percentage. The data is loaded from a CSV file and rendered as SVG circles, with team affiliations and player performance encoded through size and color. The chart uses d3.v4 to map statistics such as player position, age, and advanced metrics like Player Efficiency Rating (PER) and true shooting percentage (TS%) into a compact scatterplot-like layout, making it easy to compare scoring volume against accuracy across the league.

AI-generated description

Part of the video course: D3.js in Motion.

This horizontal bar chart shows the top 7 Field Goals players of NBA in 2017.

The data is from Basketball Reference, also from Kaggle. Here is the according Glossary. The dataset is about players performance for NBA in 2017, including Number, Time, Player, Position, Age, Team, Games, Game Started, and etc.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/e842c1b64974666c60fc3e437f8c8cf9'>Horizontal Bar Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

NBA 2018-2019 Playoffs

This scatter plot visualizes NBA playoff player performance during the 2018-2019 season, plotting field goals made against assists. Each circle represents an individual player, colored by their team, with a legend identifying the 16 teams. The visualization highlights a standout scorer on Toronto (TOR) and a notably assist-heavy player on Golden State (GSW). Built with React and D3 v5, the chart uses `scaleLinear` and `scaleOrdinal` for axes and color encoding, rendering as an SVG with interactive tooltips via the `title` element. Data is loaded from a CSV hosted on GitHub Gist.

ZZiyang Gao

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

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

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

73% match

Loading thumbnail…

Basketball Shot Chart

This visualization displays an NBA basketball shot chart, plotting made and missed field goals as red and green circles on a detailed court diagram. The court, including the three-point line, free-throw lane, and basket, is drawn with React components and D3’s `scaleLinear`, `lineRadial`, and `arc` methods. Shot data is loaded from a CSV using `d3.csv` and mapped to positions. Makes are green, misses red, with the court rendered in SVG.

MMichael Bergerson

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

72% match

Loading thumbnail…

Scatterplot NBA

This interactive scatterplot displays NBA players’ offensive and defensive ratings during the 2019-2020 COVID season, with each circle representing a player. A dropdown menu filters the view to specific teams, while clicking a point reveals that player’s detailed ratings in a side panel. The visualization is built with D3.js v6, using SVG and a linear scale for both axes. Data is loaded as CSV from the project’s GitHub repository, and the chart includes labeled axes and interactive selection updates.

SSantos Chen Hernandez

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

72% match