Bieber Fever Meter with HTML5’s Web Socket, d3.js and Pusher

Wanting to test out the data-driven visualisation library d3.js and HTML5’s WebSocket, I wrote a Python script to monitor Justin Bieber tweets, used Pusher to send them to a web page, and modified Mike Bostock‘s d3 bar chart example code to show a rolling bar chart of the count each second. Here’s the GitHub repo.

The server follows the Twitter stream for Bieber and counts the tweets as they come in. The count is sent to Pusher every second, which sends it on to any web clients. The client side page is server from Amazon S3, it connects to Pusher with JavaScript and receives the counts, which are added to the d3 chart.

Pusher is a great streaming data service, sparing you from writing up a slew of workarounds for the various degrees of WebSockets support in various browsers. As they put it: “We believe that your developer time is best spent making awesome features, not creating infrastructure.” For quick experiments and hacks I broadly agree.

My colleague Edd Parris and Pusher’s Developer Evangelist Phil Leggetter took my demo, put Twitter’s Bootstrap on the front end and hosted it with Heroku. You can see it running at bieber.nixonmcinnes.co.uk.

Screen Shot 2013-04-08 at 14.09.23