A different way to watch the Ryder Cup

An interactive map for the Guardian blog to keep readers up to date with the latest Ryder Cup results.

The Project

The Guardian are well known for their up-to-the-minute coverage of sporting events and they approached us to help them to expand this offering through the creation of an interactive visualisation for the Ryder Cup 2014, sponsored by HP.

The process

The app consisted of an interactive SVG course map which acted as navigation to allow viewers to select and view live holes in play, as well as view more detailed maps of each of the holes. The holes in play were highlighted with a glowing yellow marker which transitioned across the map as the players moved around the course.

The right hand panel showed all of the matches (past, present and future) over the weekend and gave an overview of the scores for both the live and completed matches. By clicking into a match, the user could see the hole-by-hole scores to give them a full breakdown of the match.

Once a match was selected the interactive updates to show a map with the score for each of the holes and a detailed score table. We created a bespoke ‘hole by hole’ graph to sit at the top of the match to visualise that change in score throughout the match.

A player panel also allowed viewers to access data on each of the players; pulling in live data from the API on the player’s performance including their world ranking and net worth.

Using two APIs the interactive pulled in live data across the three days, showing the position of players on the map and the live score for each hole on the course. The interactive was positioned within the Guardian’s live blog and was fully responsive, working across mobile, tablet and the Guardian’s Live App.