Sports Visual Storytelling

GameViews-Writers}takes a game URL as input and automatically generates the interface.

1. A shows the annotated game flow chart where the grey areas indicate runs and red dots annotate team largest leads and lead changes.
2. B is a box score table that shows all the players' statistical information. The table can be sorted by clicking the header for each statistic type.
3. C is player stats chart that shows all the home team's shots (and type) over time. This chart is dynamically updated to show a player's statistic information such as points or rebounds if the user clicks the corresponding stat header in the box score.
4. D is a shot chart that shows all shots spatially for both teams and can show individual player shots as well.

GameViews-Fans prototype showing an NBA game between the Golden State Warriors and the Cleveland Cavaliers.

1. A shows the live game video and the current play description.
2. B is an annotated game flow chart where red dots annotate the selected player's play events.
3. C shows the play-by-play descriptions and a customizable statistics table for the leading players and teams.
4. D is a chat box where users can send and read labeled comments.