Hello - I am trying to make a scatterplot of shot locations from an nhl game. I’ve gotten as far as plotting the points and overlaying half of the rink, but I’m struggling to get them to work together. What I’m trying to do is translate the rink svg (halfHorzPlot) to the right so that the redline sits at 0 on the x axis.
Eventually I’ll want to plot another half rink, and rotate it to create a symmetrical rink. I’m still a d3 and svg beginner, so was struggling to come up with ideas after my first few attempts failed.
I was going to try to do this for you to demonstrate, but the structure of the code makes this difficult to do quickly. Your functions do a whole lot of selecting svg elements by class, which means that when you try to call them a second time you end up selecting the same elements. I would generally recommend directly accepting/and returning svg elements in your functions instead of having them do selections this way.
Fantastic - this is exactly what I was looking for. If I understand correctly - you created the group elements first as the left and right rinks with the respective transformations, and then call the Rinkmap function that draws the rink?
Thank you again for the prompt and helpful solution.
Yeah, this is not the way I would do things if I were writing the code from scratch, but it was the easiest way I could figure out to do it from what you had already.
