The Euros 2012 website: Social stats have never been so exiting

I would like to introduce you to my latest development project at VIVA Aspire.

The project is about demonstrating the impact of football players performance (whether good or bad) on the pitch and how it affects their social media print off it.

Chris Jones & Gary Blowers have been doing a great job in writing consistently fresh content, pulling out and explaining some social facts we can see on the graph, along with interesting feedback on the players performances.

The design was created by Gavin Auty, and I have worked on a few refinement of the UI for optimal ease of use.

How does it work

The website is equipped with a cron job (a schedule task on the server), which fetches data every 30 mins for a list of players owning a Twitter and/or Facebook account. The data is then saved in a database (over 90,000 rows so far!) to be later processed by the charts.

In order to display a nice graph, we need to generate an array of values every 30 mins between a start date and end date. I had to program an extrapolation script which covers for missing data points. As good as Twitter's API is, we do get the odd connection lost, which means we have holes in the data. Using the extrapolation, we just use the previous values if the current one is missing, avoiding holes in the graphs.

Datatainment

Once we had the data nicely processed, it was time to display it a beautiful charts. Lack of time forced me to use a third party chart code (amcharts.com) which in the end proved to be a great asset of the site.

We feed the data to the chart using a JSON data object that we get from an AJAX call. The data object is then processed in the chart into a beautiful line graph, which also allows you to refine the view by zooming and slicing.

Putting it all together

One of the biggest challenge has been to layout the home page of the site in a way that tell the visitor what is this all about in a single glance. Having using great imagery for the blog articles, we have featured a quick stat view on the right hand side which allow the visitor to quickly play around, but mainly give an incentive to use the great charts we produce.

Then comes the tournament results and fixtures for reference and how to connect with our social network.

We also decided to support The Great Ormond Street Hospital by giving a small donation for each unique visitors we get on the site.

It's also fully responsive.

< / >