NBA Hex Shot Chart

100%

NBA Hex Shot Chart

✓ Published6🌍 Public

Last edited Apr 9, 2022

Created on Jun 21, 2021

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.

AI-generated description

NBA Hex Shot Chart

Damian Lillard 2019-20 regular season shot chart

https://gist.github.com/anxietyattacked/868d0e67d3dae4826b73b10366bdd138

MIT Licensed

Similar vizzes

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

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

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

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

89% match

Loading thumbnail…

NBA Shot Chart

Damian Lillard’s 2019-20 regular season shot chart visualizes every field goal attempt as a colored point on a basketball court, with green for made shots and red for misses. A separate heat map overlay, rendered using `d3.contourDensity` with the Inferno color scale, reveals shot frequency patterns. The SVG court is rotated for a player’s perspective, and the data is loaded via `d3.csv`.

MMichael Bergerson

86% match

Loading thumbnail…

Fork of NBA Hex Shot Chart v3

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.

MMichael Bergerson

81% match

Loading thumbnail…

NBA Heat Map Shot Chart

This visualization shows Damian Lillard’s 2019-20 regular season shot locations as a heat map overlaid on an NBA court. Kernel density contours, generated with `d3.contourDensity` and colored via `scaleSequential` with `interpolateInferno`, highlight shooting frequency, while white semi-transparent circles mark individual attempts. The court path is drawn with `d3.geoPath`, and the chart uses an SVG rendering with data loaded from a CSV file.

MMichael Bergerson

80% match

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

77% match