Basketball Court

100%

Basketball Court

✓ Published1🌍 Public

Last edited Feb 13, 2021

Created on Feb 13, 2021

This example renders a regulation NBA basketball court as a static SVG diagram using React and D3 v6. It shows the court’s full layout, including the key, three-point arc, free-throw circle, and backboard, all scaled to real court dimensions. The code uses `scaleLinear` for coordinate mapping, `lineRadial` to generate arc paths, and `Math.atan` to compute the three-point line angle. The implementation derives geometry from an Observable notebook by Will Hou, drawing all markings with styled SVG primitives and path elements.

AI-generated description

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

MIT Licensed

Similar vizzes

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

75% match

Loading thumbnail…

Basketball Court

A world map displays cities with populations exceeding 50,000 as semitransparent circles, sized by population using a square root scale. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with landmasses, country interiors, and graticules rendered as SVG paths. City coordinates are projected from latitude and longitude, with circle radii scaled by `d3.scaleSqrt`. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON, rendered through a React component structure.

Ssdilbaz

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

72% match

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

70% match

Loading thumbnail…

D3_

This example renders a single SVG arc using React and D3. The page displays a heading and a small 100x100 pixel SVG containing a path generated by `d3.arc()` with fixed inner and outer radii, plus start and end angles. The arc is drawn via the `d3.arc()` function’s output, which is assigned to the `d` attribute of an SVG path element. The code uses React 17 and D3 v7, with the visualization embedded directly in a JSX component and rendered through `ReactDOM.render`. The data is hardcoded in the arc parameters.

Kkhenghuatlim

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

68% match

Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams

68% match

Loading thumbnail…

D3: Drawing Scale

This example demonstrates how D3’s linear and square-root scales translate raw data coordinates into pixel positions and circle radii. It plots an array of 11 `[x, y]` pairs as circles and red text labels on an SVG canvas. The code uses `d3.scaleLinear()` for both the x and y axes, and `d3.scaleSqrt()` for sizing the circles proportionally. The scales are configured with custom domains and output ranges, with padding applied to keep marks inside the 500×300 viewport. Data is rendered statically, with labels showing the original coordinate values.

MMarisa Tania

68% match