Under the hood of The xx 'Coexist' album sharing visualization

Back to Articles
Article Image
Author

Article Image

On the 3rd of September, British indie pop band The xx began publicly mapping the spread of their free web stream of second album, Coexist, as it was shared around the globe. The band teamed up with Internet Explorer to create a micro-site that utilised some clever and visually stunning web technologies to create a fascinating visualisation.

In what could have been a risky move; the members of the band only gave the link of the site to one fan. It didn't stay that way for long though, the fan quickly passed it on and as each new person streamed and shared the link on social media - a fresh new beam of bright light appeared on the darkly hued world map. With each interaction, beams were reaching out from the source and ending with the recipient; some crossed countries, whilst others spanned oceans and continents.

Along with the audio player, there is also a slider functionality that lets you see the growth and spread of the album stream over time, beginning with that single dot in the UK at 6am on the 3rd of September.

We spoke to Bryan Saftler of Microsoft who drove the concept and execution of the project and Erik Klimczak of Clarity Consulting who was the creative lead/dev on the project.

Let's go under the hood of this project...

Article Image

What inspired the idea behind The xx Coexist album launch collaboration?

[Bryan] At Internet Explorer, we're all massive fans of the band. As such, we were very protective from the start to make sure our collaboration felt authentic and real to the voice of the The xx. In our initial brainstorms with the band, we talked through the challenges and opportunities of releasing their sophomore album. In particular, we felt by focusing on engaging their passionate fan base we were going to drive the biggest impact. We wanted to challenge people's expectations for what you can do on the web - particularly with an album release. The design for the share visual was inspired by the incredible work coming out of the development house at9elements. At the end of the day, this project was about collaboration. Taking an already incredible album, and helping as many people as possible experience it.

[Erik] For the past few years interactive data visualizations have been hot. However, most visualizations are focused on consumption only, we wanted visitors to feel like they were also contributing to the infographic. When the decided to go with a map-based approach as the primary mechanism for sharing we couldn't help but wonder, "How fast this thing will spread around the world?"

How did IE's involvement factor into the project?

[Bryan] There are a lot of creative people at IE. We're not just technical. Often, we do not typically get the opportunity to express our creative muscles. This was the perfect project for that. Collaborating closely with the band, we were able to understand the ethos of what The xx was trying to express through their new album. Being fans of the band as well, we innately knew how the audience perceives the music. Add in the fact that we know technology - particularly web technology - inside and out, we were able to engineer Coexist to be viral.

[Erik] The IE engineering team helped with performance optimizations and offered up creative direction during the concepting phase of the project. IE knows what their technology is capable of more than anyone else. And while we were straddling the conservative side of the fence, the IE team poked us to push the limits. And it paid off.

Article Image

How did you approach planning and developing the project?

[Bryan] We originally sat with the band and their management to understand what makes The xx... well, The xx. They gave us five guidelines [that we can't share] that embody who The xx is, and what they stand for. This helped to inform everything, from the concept itself, down to the look and feel of the art, transitions, feature set, and functionality. Once we had a concept locked and mood board placed, it was a simple matter of plugging in technology that speaks to what Internet Explorer stands for; 1) building an inclusive web, 2) challenging expectations of what the web can do, 3) lead in helping developers make trade off decisions between building rich web experiences and experience that reach a lot of people.

[Erik] In just under 8 weeks we went from concept to delivery. These types of projects are particularly challenging because...well, you don't always know if you can pull it off beforehand. Once the design direction was locked down, the next step was to understand the technology hurdles of building an interactive map with the HTML5 Canvas. Over the following week we proceeded to experiment with various approaches to plotting data and drawing Bezier curves on a map. Since time was not on our side, we presented a prototype to the Band and the IE team to get buy-in on our approach so far.

Working in short development cycles we had daily stand-up meetings to refine our approach and head off any technology/design issues before they became blockers. It was an intense couple of days leading up to the release of the site, but we were able to wrap up all of the loose ends on time. Then we sat back and watched one tweet turn into 1.3 million.

Can you tell us what tools and coding approaches were employed in the design and development?

[Bryan] The site was built entirely in HTML5, which is supported by all modern browsers. So you can experience Coexist from a PC, Mac, Tablet, iPad, or HTML5 enabled phone. We were inspired by other great work previously done on the web, particularly the jPlayer audio controls (similar to those used in Pandora) and the share visualization (similar to that created by 9elements).

[Erik] Here are some of the tech highlights from the app:

HTML5 Audio

Article Image

[Erik] If you've ever built anything in HTML5 that required audio you probably know that this is a huge pain point. And with an anticipated 500k+ views on the site we needed something that could withstand the load. So we hosted the audio streams on Amazon's web services and used a well-vetted audio player called jPlayer. jPlayer worked great for our purposes. Most of the work in getting jPlayer hooked up was spent on styling it to match the look of our site. And with a total little over 1.3million hits the player hasn't, pun intended, dropped a beat.

Map

Article Image

[Erik] When plotting data on the map it was crucial to have a map with exact bounds in latitude and longitude coordinates. This allowed us to plot with pixel-perfect accuracy. It was actually much harder than I thought to find a Mercator projection map with the exact size and boundaries we needed. That is when we stumbled uponTile Mill by MapBox. This awesome tool lets you do some really great things with maps. Not only can you generate custom map images, you can customize any aspect of them with basic css code and even plot complex data. For our purposes, we only needed a basic map with some specific boundaries and Tile Mill worked perfectly. It's a really great tool, one of the best I've ever used for mapping.

Bezier Curve Drawing

Article Image

[Erik] Over the past couple of years visualizing map data has become a hot to-do. We think map visualizations are beautiful and we drew inspiration from two stunning examples - Aaron Koblin's Flight Patterns visualization and 9Elements img.ly experiment. When it came time to build the curves for our site there were some technical hurdles that we had to overcome. Specifically, the math for drawing a bezier curves between two points and animating it is not trivial. There are also some really nice libraries to help with this including paper.js and theraphael.js that we looked into. But at the end of the day we opted for dynamically calculating control points and sing the HTML5 canvas's built bezierCurveTo() method.

Preloader

Article Image

[Erik] Creating a pre-loader to load assets for an Html5 site is something that we have to do every time we create a new site. And it becomes cumbersome to build it again and again. A javascript preloader ensures all image and sound elements are locked and loaded before the site experience starts up so images don't snap in or show up abruptly. The fine folks at Pixel Lab must have also felt the same way because they created a really nice, simple javascript preloader that reports progress and sends a completed event when all of your assets are ready. It couldn't be any easier to use and has become our preloaded of choice.

How did you approach the development of the slider that shows the growth and spread of the album stream?

[Bryan] The slider was key to showing how the experience was shared over 7 days. In the end, we unfortunately ran out of time in development to create the effect we were looking for - a seamless stream from day 1 to day 7.

[Erik] The slider was built using a combination of HTML5 Canvas and a DOM element. The tick marks were drawn dynamically in code onto the canvas and the thumb is a div element with an SVG image background. We used some simple snapping math along with a modified version of jQuery Grab to mouse and touch-enable the slider for use on tablets and touchscreens.

How did you achieve the visuals and ensure smooth running to as many users on as many browsers as possible?

[Bryan] Planning, planning, and more planning. We picked HTML5 libraries and frameworks we knew were compatible with modern browsers. We designed the site to adapt to changes in the browser window as well as be intelligent to the device it is being served on. And we tested the snot out of the site, both client side and server side to ensure that the site was performant as the number of concurrent users (traffic to the site) increased.

[Erik] We implemented lazy load and polling logic to ensure a snappy load time and smooth performance. We had about a million records containing geo-location information in an Azure database that we needed to send down to any give user. This was done little by little. And our drawing strategy with the map gave us some flexibility when queuing up the calls. Said another way, because it took about ~30seconds to draw 100 lines we were able to make async calls in the background while the drawing was happening. Then when the payload came back we removed the drawn lines from the queue and added the new ones. After about 10,000 lines were drawn we snapped a screen shot up the canvas and made it an image that we added to the DOM. This allowed us to start drawing on a blank canvas and helped clean up any perf killers.

Article Image

What were the technical challenges of this project and how did you overcome them?

[Bryan] Bar none the biggest challenge we faced was we were forging entirely new ground with Coexist. We're talking about creating an experience that works across all modern browsers, visualizes data in real-time, has an incredible streaming audio player, AND is performant! Let alone built in less than four weeks!

[Erik] The two biggest challenges were getting smooth performance while drawing the maps and handling 1M+ users. We overcame the map drawing hurdle with the throttling approach mentioned above. And by configuring our Azure instance properly we were able to keep a healthy uptime even during the peak traffic moments.

In what ways did you prepare for scalability given the aim of viral spread with a project of this type (for example bandwidth/hosting etc)?

[Bryan] When looking for scale, the cloud is the best option. We used Azure to host Coexist which allowed us to dial up / dial down the instances based on real-time traffic to the site. This helped to mitigate cost while allowing us to manage the influx of traffic to the site as the experience went viral.

[ERIK] We generated 1M records of fake data and uploaded it to our Azure database. Then we did our best to simulate making a ton of requests to see how the site would react. From there, we honed in our approach to the throttling and drawing strategy.

What are your main takeaways from the project?

[Bryan] The best collaborations happen when all parties have a vested interest in the same goals and outcomes - sounds simple, it's not.

[Erik] Building highly creative, scalable sites that can withstand 1M+ users in ~4 weeks is doable. You might not sleep much...but it's possible.

What are your plans for the site in the future, will it remain as an archive or disappear after a certain time period?

[Bryan] The site was designed to live from 3 September 2012 to 11 September 2012, tracking location information and showing via data vis the sharing of the site from a single individual. Also during that time, you could stream the entire album from the experience. On 11 September, we turned off the stream directing fans to purchase / download the album. And the data captured from 3-11 September was frozen so everything you see now is in the past. The site will live on for the time being as a tribute to the release of Coexist on The xx's band page.

[Erik] I don't know if we did anything with the data yet. But I now that we have 1.6M records of geo-location data it would be great to make it an available download for people to experiment with their own maps, visualizations, infographics, etc.

A big thank you to Bryan and Erik for their time and insights. If you'd like to check out The xx Coexist site and see how the sharing activity was visualized over the time period, click here.

Post a comment
Your Screen Name
Your Email Address
Your Comment
Recent