Our first objective was to find an effective way to make people who were not yet playing the game aware of what we had concocted and hopefully entice them to join in.

For those who were already playing the game, we wanted to visually represent how they were doing and allow them to share their progress with others. In addition to the information provided through the iOS App UI, we wanted to display on highly visible screens for all to see how many beacons players had claimed and the, hopefully impressive, Barscore they had managed to amass.

Most importantly though, we wanted some kind of engaging way to visualize micro-location detection and share the selfies people took with the iOS App with the rest of the party crowd...

D3.js

When it came to HTML based visualization the choice was easy. We had successfully utilized D3.js for client projects and felt comfortable enough that we would be able to hack up something interesting for this.

If you have not heard about D3.js, it is a JavaScript library for manipulating documents based on data using HTML, SVG and CSS. For more information check out D3.js

‘People At The Bar’ Visualization

We figured the best way to visualize micro-location detection was to simulate typical 'people at the bar' behaviour, to display their mugshot and screen name and attempt to engage them with game-related personalized messages. The iOS App already detects if a person is close to iBeacons placed strategically at the bar. The Server App provides a web-service giving us all the players who were currently at the bar. All we needed was an interesting way to simulate people hanging out a bar, bumping into each other, trying to push through the crowd to order a drink...

A quick doodle clarified things a bit....

The people in the sketch all look a bit pissed off, hopefully the real crowd would be happier, but we shall see. New arrivals would come bouncing onto the screen causing movement of others already at the bar... you know, kind of typical, jostling at-the-bar behaviour.

d3.layout.force provides all of the features that are needed to perfectly simulate the forces at play in a crowded bar. A little bit of JavaScript, CSS and SVG hacking and bubbles of people were bouncing around the screen.

If you are interested in how it was all implemented you can take a look at the src code here: https://github.com/objectlab/Visualization

‘Leaderboard’ Visualization

The second visualization needed to show the current leaders in both game play objectives - the Barscore and the Claimed Beacons Count.

First, a leaderboard for the highest Barscore. We figured the more people frequented the bar the more drinks they had to be consuming. Therefore, the complicated mathematical equation of:

high barscore = high level of drunkenness

The second game objective would be to collect all of the iBeacons hidden in the club. The party had somewhat of a TRON-related theme, so to visualize each beacon we borrowed some nerdtastic TRON symbols.

Again, we wanted to incorporate the players’ pictures and their screen names and add a little animation into the mix.

More doodling clarified what had to be done.

The Barscore Leaderboard is basically a bar chart with screen name labels on the left and barscores displayed on the right. To tie this to the ‘People At The Bar’ Visualization we used bubbles for each player to display their selfie. We would show the leading players on the top, new leaderboard arrivals would animate onto the screen from above pushing less successful players off the screen, position changes would animate respectively.

The Beacon Leaderboard would simply show the players who were most successful at collecting beacons and highlight the ones they had claimed.

And all of that had to of course happen in real-time.

For a more detailed description and the src code please read: https://github.com/objectlab/Visualization