d3-hockeyProduction-ready hockey visualization

A comprehensive D3.js library for creating beautiful, interactive hockey data visualizations with minimal effort

Get Started

View Examples

API Reference

🏒

Layer-Based Architecture

Build complex visualizations by stacking layers - rink rendering, shot charts, heatmaps, and custom overlays.

⚡

Simple or Powerful

Use defaults for quick visualizations, or dive deep with customizations.

🎯

NHL API Ready

Built-in support for NHL API data with automatic coordinate transformations, period handling, and event type detection.

🎨

Ready Out of the Box

Professional team colors for all 32 NHL teams, smooth animations, and sensible defaults.

🔧

Highly Extensible

Every component can be overridden and is designed to be extended. Build custom layers, create new chart types, and integrate with your existing D3 code.

📊

Advanced Features

Hexbin aggregation, custom symbols, dynamic data rendering, interactive tooltips, and more specialized hockey visualization patterns.

Quick Start

Install via npm:

bash

npm install d3-hockey d3

Create your first visualization:

typescript

import { Rink } from "d3-hockey";

// Simplified shot data
const shots = [
  { coordinates: { x: 75, y: 10 }, player: "Ovechkin" },
  { coordinates: { x: 80, y: -5 }, player: "Backstrom" },
  { coordinates: { x: 70, y: 15 }, player: "Green" },
];

// Create a rink and add shot data
new Rink("#container").width(1000).height(425).render().addEvents(shots, {
  id: "shots",
  color: "#FF4C00",
  radius: 5,
});