Basic Rink

Render a hockey rink with default NHL dimensions and styling.

Simple Rink

The most basic usage, just create a rink and render it.

import { Rink } from "d3-hockey";

new Rink("#container").render();

Custom Colors

Override default colors to match team branding or personal preferences.

import { Rink } from "d3-hockey";

new Rink("#container")
  .colors({
    ice: "#000000",
    boards: "#003e7e",
    redLine: "#c8102e",
    blueLine: "#003e7e",
  })
  .render();

Half Rink

Render just the offensive or defensive zone horizontally.

import { Rink } from "d3-hockey";

new Rink("#container")
  .width(600)
  .height(540)
  .halfRink(true, "offensive")
  .render();

Render just the offensive or defensive zone vertically.

import { Rink } from "d3-hockey";

new Rink("#container")
  .width(600)
  .height(540)
  .halfRink(true, "offensive")
  .vertical(true)
  .render();

Custom Sizing

Adjust dimensions and padding to fit your layout requirements.

import { Rink } from "d3-hockey";

new Rink("#container").width(500).height(255).render();

Framework Usage

React

import { useEffect, useRef } from "react";
import { Rink } from "d3-hockey";

function HockeyRink() {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      new Rink(containerRef.current).render();
    }
  }, []);

  return <div ref={containerRef} />;
}

Vue

<template>
  <div ref="container"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Rink } from "d3-hockey";

const container = ref(null);

onMounted(() => {
  new Rink(container.value).render();
});
</script>

Angular

import { Component, ElementRef, ViewChild, AfterViewInit } from "@angular/core";
import { Rink } from "d3-hockey";

@Component({
  selector: "app-hockey-rink",
  template: "<div #container></div>",
})
export class HockeyRinkComponent implements AfterViewInit {
  @ViewChild("container") container!: ElementRef;

  ngAfterViewInit() {
    new Rink(this.container.nativeElement).render();
  }
}

Svelte

<script>
  import { onMount } from 'svelte';
  import { Rink } from 'd3-hockey';

  let container;

  onMount(() => {
    new Rink(container).render();
  });
</script>

<div bind:this={container}></div>