Skip to main content
SimilarExport ZIP
100%

Fork of NBA Hex Shot Chart v3

✓ Published1🌍 Public
MMichael Bergerson
Last edited Jun 6, 2022
Created on Jun 5, 2022

This dashboard compares playoff shot charts for Stephen Curry and Jayson Tatum, displaying hexagonal bins colored by field goal percentage relative to league average and sized by shot frequency on a rotated basketball court. It uses d3.hexbin to aggregate shot coordinates into hexagons, with d3.scaleSequential and interpolateRdYlBu for color encoding, and loads data from CSV files via d3.csv. The SVG rendering includes dual courts, legends, and player labels, all styled with custom CSS.

AI-generated description

NBA PlayOff Hex Shot Chart Comparison

Stephen Curry and Jayson Tatum Playoff Comparison

up to game 2 of the finals

Data from NBA_api

MIT Licensed

Similar vizzes

Loading thumbnail…

NBA Hex Shot Chart Comparison Playoff

This visualization compares the playoff shooting efficiency of Stephen Curry and Jayson Tatum through the 2022 NBA Finals. Drawing shot-location data from the NBA API, it projects each player's field-goal percentage relative to the league average onto a basketball court as a hexbin heatmap. Using d3-hexbin, the chart renders hexagonal bins whose size encodes shot frequency and whose color—via a red-yellow-blue sequential scale—indicates performance against the league average. The SVG court is enhanced with a legend, while the player names and team affiliations are displayed through custom text elements.

MMichael Bergerson
88% match
Loading thumbnail…

Fork of NBA Hex Shot Chart

This interactive NBA hex map visualizes Damian Lillard's 2019-20 regular season shot data. It displays shot frequency and field goal percentage compared to the league average, with a diverging color scale from red to blue. Built with D3 libraries (`d3.hexbin`, `scaleSequential`, `interpolateRdYlBu`), the visualization aggregates shots into hexagonal bins overlaid on a basketball court SVG. The code loads data from a CSV file and includes a separate legend chart showing frequency and percentage difference scales.

Yyang28209187@gmail.com
85% match
Loading thumbnail…

Fork of NBA Hex Shot Chart

A hexbin shot chart visualizes Damian Lillard's 2019-20 regular season field goal attempts, overlaid on a basketball court. Each hexagon's size encodes shot frequency, while its color, using a red-yellow-blue scale, shows the difference between his field goal percentage and the league average. The visualization uses `d3.hexbin` for binning and `scaleSequential` with `interpolateRdYlBu` for coloring. Shot data is loaded from a CSV, with the court drawn as an SVG path and the chart rendered in SVG.

Qqwxyyigesm
84% match
Loading thumbnail…

Fork of NBA Hex Shot Chart

A hexbin shot chart maps Damian Lillard's 2019-20 regular-season field goal attempts, with each hexagon's size encoding shot frequency and its color encoding the player's field-goal percentage relative to the league average, from −9% to +9%. The visualization uses a custom D3 hexbin layout with a reversed color scale via `scaleSequential` and `interpolateRdYlBu`. Rendered as SVG, the court is drawn using a path, and the chart includes a legend for both frequency and percentage differential, based on shot data from a CSV file.

RRichard Wong
84% match
Loading thumbnail…

NBA Hex Shot Chart v2

This visualization compares NBA shot charts for Damian Lillard and Giannis Antetokounmpo, displaying hexagonal bins colored by each player’s field goal percentage relative to the league average, with hexagon size reflecting shot frequency. It uses D3’s `hexbin`, `scaleLinear`, `scaleSequential`, and `interpolateRdYlBu` to render SVG hexagons over a basketball court path. Shot data is loaded from CSV files, and separate legends for frequency and FG% differential are generated via a custom `legendChart` function.

MMichael Bergerson
83% match
Loading thumbnail…

NBA Hex Shot Chart

A hexbin shot chart maps Damian Lillard’s 2019-20 regular season field goal attempts onto a stylized NBA court. Each hexagon’s size encodes shot frequency, while its color shows the player’s field goal percentage relative to the league average, using a blue-to-red sequential scale. The visualization is rendered as an SVG with D3.js, using `d3.hexbin` for binning, `scaleLinear` for court coordinates, and `scaleSequential` with `interpolateRdYlBu` for color encoding. Shot data is loaded from a CSV file, and a separate legend explains the frequency and percentage scales.

MMichael Bergerson
81% match
Loading thumbnail…

Fork of More Basketball Shot Charts

This interactive visualization displays LeBron James’s shot chart overlaid on a basketball court, with green and red circles marking made and missed shots. The court is drawn as SVG elements using React components. Shot data is loaded from a CSV via `d3.csv`, scaled with `d3.scaleLinear`, and rendered as circles using the `Marks` component. The court geometry uses `d3.lineRadial` for arcs, while player data comes from the `nba_api` dataset.

BbeauMarko
78% 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
76% match