Skip to main content
SimilarExport ZIP
100%

Fork of More Basketball Shot Charts

✓ Published0🌍 Public
BbeauMarko
Last edited Mar 16, 2021
Created on Mar 16, 2021

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.

AI-generated description

React basketball court component made from https://observablehq.com/@willhoup/drawing-an-nba-court

data from https://github.com/swar/nba_api

MIT Licensed

Similar vizzes

Loading thumbnail…

More Basketball Shot Charts

A basketball shot chart displays LeBron James’s field goal attempts as red and green dots on an SVG court, with misses in red and makes in green. The court is drawn using React components and D3 scales and radial line generators. Shot data comes from a CSV loaded via D3’s `csv` method, and the visualization maps player coordinates to court positions using `scaleLinear`.

MMichael Bergerson
91% 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
88% match
Loading thumbnail…

Basketball Density Shot

This visualization displays the shot density and accuracy of LeBron James on a basketball court, using player shot data from the nba_api. Each shot is shown as a small circle, with green marks for made shots and red for misses, overlaid on a pixelated density grid. The grid’s color, using an interpolatePiYG palette driven by a d3.scalePow, indicates the ratio of misses to makes per cell. The court and its markings are drawn with React’s SVG components, while d3’s scaleLinear handles the coordinate mapping for both the player shots and the court geometry.

DDavid Emmanuel Katz
85% match
Loading thumbnail…

Fork of NBAanalysis

This interactive bar chart displays the number of shots taken by LeBron James in each quarter of NBA games, sourced from a CSV file. Users can filter the visualization by clicking buttons for All Data or individual quarters, which triggers `d3.csv` loading and `d3.filter` to subset the data. The bar chart, rendered as SVG elements, updates with a smooth `transition().duration(1000)` on both the y-axis and rectangles as the data changes, using `d3.scaleBand` and `d3.scaleLinear` for positioning. The legend clarifies the x-axis as shot distance and the y-axis as shot count.

Yyc4004
82% 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
78% 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
77% 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
76% match
Loading thumbnail…

Shot Distance Bar Plot

An interactive bar plot displays NBA shot distances across six court zones, with bars colored steelblue and labeled axes for area and goals. Buttons update the visualization to filter shots by game quarter. Built with D3 v7, the chart uses scaleBand and scaleLinear for positioning, while d3.csv loads data from a GitHub-hosted CSV file of NBA shot chart details, and transitions animate bar height changes across updates.

Yyc4004
76% match