You can create SVG shapes like line, circle, rectangle, and path using Plotly’s shapes feature. With the help of these shapes, we will create the Ice Hockey rink and plot all his shots (in the season 2015-16) on it.

Data Collection

Creating the ice hockey rink

The court rink has a physical dimension of 200 ft (61 m) × 85 ft (26 m), we will use the NHL Rulebook for reference.

Ice Hockey Rink (delroccofloors.com)

For the post, we will draw just the half (in height) of the rink.

The X-axis and Y-axis of our court chart will range from -250 to 250 and 0 to 580 respectively. A single unit on the chart scale is equal to 0.17 (85/500) and 0.172 (100/580) ft for X and Y axis respectively.

Outer lines

The standard size of the rink is 200 ft long and 85 ft wide. The corners are rounded in the arc of a circle with a radius of 28 ft.

We will use the Rectangle, Line, and Arc shapes to draw the outer lines. The upper side of this rectangle is a line 11 ft away from both ends of the rink.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#list containing all the shapes

rink_shapes=[]

outer_rect_shape=dict(

type='rect',

xref='x',

yref='y',

x0='-250',

y0='0',

x1='250',

y1='516.2',

line=dict(

width=1,

)

)

rink_shapes.append(outer_rink_shape)

To support the arcs, we’ll draw a line parallel to the X-axis.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

outer_line_shape=dict(

type='line',

xref='x',

yref='y',

x0='200',

y0='580',

x1='-200',

y1='580',

line=dict(

width=1,

)

)

rink_shapes.append(outer_line_shape)

To simulate the rounded corners, we will use the Arc shape.

1

2

3

4

5

6

7

8

9

10

11

outer_arc1_shape=dict(

type='path',

xref='x',

yref='y',

path='M 200 580 C 217 574, 247 532, 250 516.2',

line=dict(

width=1,

)

)

rink_shapes.append(outer_arc1_shape)

We need to draw one more arc just opposite (Y-axis) to this.

red lines

It’s a red line in the center of the rink along the width.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

center_red_line_shape=dict(

type='line',

xref='x',

yref='y',

x0='-250',

y0='0',

x1='250',

y1='0',

line=dict(

width=1,

color='rgba(255, 0, 0, 1)'

)

)

rink_shapes.append(center_red_line_shape)

This line is 11 ft away from the end of the rink and red in color.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

end_line_shape=dict(

type='line',

xref='x',

yref='y',

x0='-250',

y0='516.2',

x1='250',

y1='516.2',

line=dict(

width=1,

color='rgba(255, 0, 0, 1)'

)

)

rink_shapes.append(end_line_shape)

blue line

It’s 1 ft wide along the width and located at 25 ft distance from the center red line. We will use the rect shape to give it the desired width.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

blue_line_shape=dict(

type='rect',

xref='x',

yref='y',

x0='250',

y0='150.8',

x1='-250',

y1='-145',

line=dict(

color='rgba(0, 0, 255, 1)',

width=1

),

fillcolor='rgba(0, 0, 255, 1)'

)

rink_shapes.append(blue_line_shape)

face-off spots and circles

A circular blue spot, 1 ft in diameter, shall be marked exactly in the center of the rink.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

center_blue_spot_shape=dict(

type='circle',

xref='x',

yref='y',

x0='2.94',

y0='2.8',

x1='-2.94',

y1='-2.8',

line=dict(

color='rgba(0, 0, 255, 1)',

width=1

),

fillcolor='rgba(0, 0, 255, 1)'

)

rink_shapes.append(center_blue_spot_shape)

Two red spots 2 ft in diameter shall be marked on the ice in the neutral zone 5 ft from each blue line.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

red_spot1_shape=dict(

type='circle',

xref='x',

yref='y',

x0='135.5',

y0='121.8',

x1='123.5',

y1='110.2',

line=dict(

color='rgba(255, 0, 0, 1)',

width=1

),

fillcolor='rgba(255, 0, 0, 1)'

)

rink_shapes.append(red_spot1_shape)

The second red spot in the neutral zone is the mirror image of this along with the Y-axis.

In both end zones and on both sides of each goal, red face-off spots and circles shall be marked on the ice. There will be circles of radius 15 ft as the blue and the red spots (in the end zones) as the center.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

red_spot1_circle_shape=dict(

type='circle',

xref='x',

yref='y',

x0='217.6',

y0='487.2',

x1='41.2',

y1='313.2',

line=dict(

width=1,

color='rgba(255, 0, 0, 1)'

)

)

rink_shapes.append(red_spot1_shape)

Face-off lines

At the outer edge of both sides of each face-off circle and parallel to the goal line shall be marked two red lines, 2 inches wide and 2 ft in length and 5 ft 7 inches apart.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

parallel_line1_shape=dict(

type='line',

xref='x',

yref='y',

x0='230',

y0='416.4',

x1='217.8',

y1='416.4',

line=dict(

color='rgba(255, 0, 0, 1)',

width=1

)

)

parallel_line2_shape=dict(

type='line',

xref='x',

yref='y',

x0='230',

y0='384',

x1='217.8',

y1='384',

line=dict(

color='rgba(255, 0, 0, 1)',

width=1

)

)

rink_shapes.append(parallel_line1_shape)

rink_shapes.append(parallel_line2_shape)

The other two red lines will be the mirror images of these line along with the Y-axis.

Here is the line configuration near face-off spots.

These four line shapes represent the approx face-off spot configuration lines.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

faceoff_line1_shape=dict(

type='line',

xref='x',

yref='y',

x0='141.17',

y0='423.4',

x1='141.17',

y1='377',

line=dict(

color='rgba(10, 10, 100, 1)',

width=1

)

)

faceoff_line2_shape=dict(

type='line',

xref='x',

yref='y',

x0='117.62',

y0='423.4',

x1='117.62',

y1='377',

line=dict(

color='rgba(10, 10, 100, 1)',

width=1

)

)

faceoff_line3_shape=dict(

type='line',

xref='x',

yref='y',

x0='153',

y0='406',

x1='105.8',

y1='406',

line=dict(

color='rgba(10, 10, 100, 1)',

width=1

)

)

faceoff_line4_shape=dict(

type='line',

xref='x',

yref='y',

x0='153',

y0='394.4',

x1='105.8',

y1='394.4',

line=dict(

color='rgba(10, 10, 100, 1)',

width=1

)

)

rink_shapes.append(faceoff_line1_shape)

rink_shapes.append(faceoff_line2_shape)

rink_shapes.append(faceoff_line3_shape)

rink_shapes.append(faceoff_line4_shape)

Goal Crease

NHL Goal Crease

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

goal_line1_shape=dict(

type='line',

xref='x',

yref='y',

x0='64.7',

y0='516.2',

x1='82.3',

y1='580',

line=dict(

width=1

)

)

goal_line2_shape=dict(

type='line',

xref='x',

yref='y',

x0='23.5',

y0='516.2',

x1='23.5',

y1='493',

line=dict(

width=1

)

)

# mirror images of "goal_line1" and "goal_line2" along with the Y-axis

goal_arc1_shape=dict(

type='path',

xref='x',

yref='y',

path='M 23.5 493 C 20 480, -20 480, -23.5 493',

line=dict(

width=1,

)

)

goal_arc2_shape=dict(

type='path',

xref='x',

yref='y',

path='M 17.6 516.2 C 15 530, -15 530, -17.6 516.2',

line=dict(

width=1,

)

)

rink_shapes.append(goal_line1_shape)

rink_shapes.append(goal_line2_shape)

rink_shapes.append(goal_arc1_shape)

rink_shapes.append(goal_arc2_shape)

Referee Crease

On the ice immediately in front of the Penalty Timekeeper’s seat there shall be marked in red on the ice a semi-circle of 10 ft radii and 2 inches in width, known as the REFEREE’s CREASE.

1

2

3

4

5

6

7

8

9

10

11

12

referee_crease_shape=dict(

type='path',

xref='x',

yref='y',

path='M ',

line=dict(

width=1,

color='rgba(255, 0, 0, 1)'

)

)

rink_shapes.append(red_spot1_shape)

Here is the resultant “Ice Hockey Rink Outline” diagram.

Point Chart for Shots

We will start from importing the JSON dataset into a pandas DataFrame object.