Watch Dogs Data Visualisation

For the launch of Watch Dogs, Megarom games wanted to create a campaign to promote the game in South Africa. The campaign involved a competition based off the games aesthetics, mechanics and is associated media like the We Are Data project. I was tasked with chiefly developing the interactive visualisation and contributing to aspects of the design. This interactive visualisation would create a unique network of individual nodes, showing connections using colour and number of connections using node size. I wrote all the front-end code (HTML,SVG, CSS and JS) which powered the visualisation of data, plugging into the robust D3.js framework and along with some jQuery.

This project serves to illustrate my skills in design and development. All intellectual property belong to Weekday Heroes and their clients respectively.

User Flow

Wtach Dogs Login Screen

The first step in this flow, is to sign in via Facebook. This was the source used to gather information about the user as well has his or her friends, which was then cross referenced with the signed in users to build direct connections.

Watch Dogs Enter Page

At this point ajax requests were made to provide a seamless, app-like experience. User’s are asked to click to enter, mimicking the hacking processes in the game as well as giving the system time to gather data and draw the visualisation.

Watch Dogs Loading Screen

The loading screen would appear as data was processed. I implemented a large circular animation in the middle of the screen as well as a thin progress bar on the top of the page to provide feedback as the user’s unique visualisation was drawn.

Watch Dogs Visualisation Page

This illustrates a stripped down version of the visualization page. User’s were able to identify themselves by the white node, their direct connections (facebook friends who had entered) as blue nodes and everyone else as gray. The line connections between reflected their relationship as well.

Watch Dogs Node on Hover

Nodes were interactive, in that users were able to drag them about and sort through them. They would also pop up an informational block on hover, providing a name, number of connections as well as that user’s location. Profile pictures were pulled from facebook and fell back to an image of the games protagonist.

Infographic Label

After the competition ran for 2 weeks and the prizes were handed out. Megarom requested an infographic be made to share the success for the Watch Dogs competition. Watch Dogs accounted for almost half of the total traffic through the website. I designed this infographic that was shared on Megarom Games social media.

Watch Dogs Infographic