Gitignore all files inside .quarto/ and _site/ from now on

.gitignore

@@ -5,3 +5,6 @@
 /.quarto/
 /_site/
 .DS_Store
+.quarto/
+_site/
+.DS_Store

.quarto/idx/posts/demo-nhl-play-by-play-app/index.qmd.json

@@ -1 +1 @@
-{"title":"Demo of NHL Play-by-Play App","markdown":{"yaml":{"title":"Demo of NHL Play-by-Play App","author":"Howard Baek","date":"2019-08-20","description":"I will be showing *insights from looking at a regular season game between the Montreal Canadiens and the Toronto Maple Leafs* on October 3rd, 2018","categories":["Data Visualization"],"image":"thumbnail.png"},"headingText":"Introduction","containsRefs":false,"markdown":"\n\n\nAs part of the [1st RStudio Shiny Contest](https://community.rstudio.com/t/shiny-contest-winners-full-list/36347), I created the [NHL Play-by-Play App](https://jsonbaik.shinyapps.io/nhl-pbp/). Previously, I wrote about the makings of this app ([Hacking the NHL Play-by-Play App in Shiny](http://insidethetv.rbind.io/post/hacking-the-nhl-pbp-app-in-shiny/)), but I realized that I should provide an example of how this app can be used to extract information. As a result, in this post, I will be showing *insights from looking at a regular season game between the Montreal Canadiens and the Toronto Maple Leafs* on October 3rd, 2018.\n\n## How to Search for Game ID\n\n![](img/search-game.gif)\n\n\n1. Select Season from NHL Season dropdown menu\n2. Find Game ID from Table\n3. Enter Game ID in NHL.COM GAME ID\n\n<br>\n\n### Shot Chart\n\n![](img/shot-chart.png)\n\n- Montreal Canadiens shot locations are displayed on the left half of the rink containing the Canadiens logo. Toronto Maple Leafs shot locations are displayed on the right half of the rink containing the Maple Leafs logo.\n\n- Looking at the region between the faceoff circle and the blue line, Toronto took significantly more shots on the left side (5 vs 1), signifying that Toronto's attack was tilted to the left-side and perhaps, Toronto's left \ndefensemen were more involved in the offense than Toronto's right defensemen.\n\n- The Canadiens took alot of shots around the net whereas Toronto's shots are spread out. There is one Canadiens shot outside the blue line that we can explore further using the interactive shot chart below.\n\n<br>\n\n### Interactive Shot Chart\n\n![](img/interactive-shot.gif)\n\n\n- Interactive Shot chart shows information that the static shot chart doesn't contain: distance of shot from goal, name of the shooter, players who assisted the goal (if shot is a goal), number of goals/assists a player scored, type of shot, and goal probability (probability that the shot is a goal).\n\n- Large circles represent goals whereas small circles represent shots\n\n- Generally, shots taken closer to the net and toward the middle of the ice have higher goal probability. A good example of this is Armia's shot; it is taken outside the blue line and has a 1.6% chance of going in the net. On the other hand, Lehkonen's goal, 4 ft from the net, has a 14.5% goal probability.\n\n<br>\n\n\n### Shot Animation\n\n![](img/shot-animation.gif)\n\n\n- A real-time representation of the Play-By-Play data that look at two event types, shots/goals. Since both event types are directed toward the net, the animation shows all points moving towards the net.\n- In the near future with real-time rendering of [`gganimate`](https://gganimate.com/) and the advent of [NHL tracking data](https://www.nhl.com/news/nhl-plans-to-deploy-puck-and-player-tracking-technology-in-2019-2020/c-304218820), I can create a more accurate animation of the puck and players, similar to my [NBA animations](http://insidethetv.rbind.io/post/epv-the-epilogue/)\n\n<br>\n\n### Shot Distance\n\n![](img/shot-distance.png)\n\n- Histogram of shot distances support what we learned from the shot chart: \"Montreal took a lot of shots around the net whereas Toronto's shots are spread out\"\n\n- Histogram contains vertical lines for the goal line, faceoff dots, and blue line. This helps users visualize the placement of shots on the ice as another angle to the shot chart.\n\n<br>\n\n### Goal Probability Animation\n\n![](img/goal-probability.gif)\n\n- It shows the ebbs and flows of the game very well since it visualizes the momentum swings of the game.\n- Vertical lines represent end of periods 1,2,3\n\n<br>\n\n### Game Recap\n\n![](img/nhl-recap.gif)\n\n\n- Official [NHL.com](www.nhl.com) Recap\n- Watch highlights, box score, and the summary of the game. \n\n<br>\n\n"},"formats":{"html":{"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":true,"echo":true,"output":true,"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"engine":"markdown"},"render":{"keep-tex":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[]},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","css":["../../styles.css"],"output-file":"index.html"},"language":{},"metadata":{"lang":"en","fig-responsive":true,"quarto-version":"1.2.245","editor":"visual","theme":"litera","title-block-banner":true,"comments":{"utterances":{"repo":"howardbaek/blog-comments"}},"title":"Demo of NHL Play-by-Play App","author":"Howard Baek","date":"2019-08-20","description":"I will be showing *insights from looking at a regular season game between the Montreal Canadiens and the Toronto Maple Leafs* on October 3rd, 2018","categories":["Data Visualization"],"image":"thumbnail.png"},"extensions":{"book":{"multiFile":true}}}}}
+{"title":"Demo of NHL Play-by-Play App","markdown":{"yaml":{"title":"Demo of NHL Play-by-Play App","author":"Howard Baik","date":"2019-08-20","description":"I will be showing *insights from looking at a regular season game between the Montreal Canadiens and the Toronto Maple Leafs* on October 3rd, 2018","categories":["Data Visualization"],"image":"thumbnail.png"},"headingText":"Introduction","containsRefs":false,"markdown":"\n\n\nAs part of the [1st RStudio Shiny Contest](https://community.rstudio.com/t/shiny-contest-winners-full-list/36347), I created the [NHL Play-by-Play App](https://jsonbaik.shinyapps.io/nhl-pbp/). Previously, I wrote about the makings of this app ([Hacking the NHL Play-by-Play App in Shiny](http://insidethetv.rbind.io/post/hacking-the-nhl-pbp-app-in-shiny/)), but I realized that I should provide an example of how this app can be used to extract information. As a result, in this post, I will be showing *insights from looking at a regular season game between the Montreal Canadiens and the Toronto Maple Leafs* on October 3rd, 2018.\n\n## How to Search for Game ID\n\n![](img/search-game.gif)\n\n\n1. Select Season from NHL Season dropdown menu\n2. Find Game ID from Table\n3. Enter Game ID in NHL.COM GAME ID\n\n<br>\n\n### Shot Chart\n\n![](img/shot-chart.png)\n\n- Montreal Canadiens shot locations are displayed on the left half of the rink containing the Canadiens logo. Toronto Maple Leafs shot locations are displayed on the right half of the rink containing the Maple Leafs logo.\n\n- Looking at the region between the faceoff circle and the blue line, Toronto took significantly more shots on the left side (5 vs 1), signifying that Toronto's attack was tilted to the left-side and perhaps, Toronto's left \ndefensemen were more involved in the offense than Toronto's right defensemen.\n\n- The Canadiens took alot of shots around the net whereas Toronto's shots are spread out. There is one Canadiens shot outside the blue line that we can explore further using the interactive shot chart below.\n\n<br>\n\n### Interactive Shot Chart\n\n![](img/interactive-shot.gif)\n\n\n- Interactive Shot chart shows information that the static shot chart doesn't contain: distance of shot from goal, name of the shooter, players who assisted the goal (if shot is a goal), number of goals/assists a player scored, type of shot, and goal probability (probability that the shot is a goal).\n\n- Large circles represent goals whereas small circles represent shots\n\n- Generally, shots taken closer to the net and toward the middle of the ice have higher goal probability. A good example of this is Armia's shot; it is taken outside the blue line and has a 1.6% chance of going in the net. On the other hand, Lehkonen's goal, 4 ft from the net, has a 14.5% goal probability.\n\n<br>\n\n\n### Shot Animation\n\n![](img/shot-animation.gif)\n\n\n- A real-time representation of the Play-By-Play data that look at two event types, shots/goals. Since both event types are directed toward the net, the animation shows all points moving towards the net.\n- In the near future with real-time rendering of [`gganimate`](https://gganimate.com/) and the advent of [NHL tracking data](https://www.nhl.com/news/nhl-plans-to-deploy-puck-and-player-tracking-technology-in-2019-2020/c-304218820), I can create a more accurate animation of the puck and players, similar to my [NBA animations](http://insidethetv.rbind.io/post/epv-the-epilogue/)\n\n<br>\n\n### Shot Distance\n\n![](img/shot-distance.png)\n\n- Histogram of shot distances support what we learned from the shot chart: \"Montreal took a lot of shots around the net whereas Toronto's shots are spread out\"\n\n- Histogram contains vertical lines for the goal line, faceoff dots, and blue line. This helps users visualize the placement of shots on the ice as another angle to the shot chart.\n\n<br>\n\n### Goal Probability Animation\n\n![](img/goal-probability.gif)\n\n- It shows the ebbs and flows of the game very well since it visualizes the momentum swings of the game.\n- Vertical lines represent end of periods 1,2,3\n\n<br>\n\n### Game Recap\n\n![](img/nhl-recap.gif)\n\n\n- Official [NHL.com](www.nhl.com) Recap\n- Watch highlights, box score, and the summary of the game. \n\n<br>\n\n"},"formats":{"html":{"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":true,"echo":true,"output":true,"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"engine":"markdown"},"render":{"keep-tex":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[]},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","css":["../../styles.css"],"output-file":"index.html"},"language":{},"metadata":{"lang":"en","fig-responsive":true,"quarto-version":"1.2.245","editor":"visual","theme":"litera","title-block-banner":true,"comments":{"utterances":{"repo":"howardbaek/blog-comments"}},"title":"Demo of NHL Play-by-Play App","author":"Howard Baik","date":"2019-08-20","description":"I will be showing *insights from looking at a regular season game between the Montreal Canadiens and the Toronto Maple Leafs* on October 3rd, 2018","categories":["Data Visualization"],"image":"thumbnail.png"},"extensions":{"book":{"multiFile":true}}}}}