d3-hockey

Appearance

Examples ​

Browse interactive examples to learn how to use d3-hockey. Each example includes live code and explanations.

Basic Examples ​

Basic Rink ​

Learn how to render a hockey rink with different configurations and styling options.

Shot Charts ​

Visualize shot (or other event) data with customizable markers, colors, and styles.

Heatmap Charts ​

Create smooth, continuous density visualizations using kernel density estimation.

Hexbin Charts ​

Create density maps and hexbin aggregations to show event patterns.

Advanced Examples ​

Advanced Customization ​

Use the customRender hook to create sophisticated visualizations with player labels, speed rings, custom interactions, composite elements, and more.

NHL API Data ​

Work with real NHL API data using the built-in NHLDataManager and parsing utilities.

Coming Soon ​

More examples are being added. Check back soon for:

  • Interactive visualizations (zoom)
  • Support for external components such as titles, game metadata, legends, etc.
  • Player tracking support
  • Zone entry/exit charts
  • Passing networks
  • Additional customization