This past weekend I participated in the Node Knockout - a programming competition where teams of 1 - 4 members build something using node.js in 48 hours. I was very fortunate to have worked with @robfaraj on this, it was a fun couple of days! The end result is what we call Twends Twends: new location is now twends.us. Twends is a real-time Twitter trend visualization...app. It looks like this
First, you either select a trending topic or type in a term of your own, then you will see this word visualization based on a series of packed circles. The larger the circle and the redder it is, the more frequently the word is being said at the moment. All the while, birds are fly across the screen. Each bird on the screen represents a tweet that's been written, now...ish. Just sit back, relax and watch the pretty circles changing shape and the birds flying across your screen. By reading the words you can often learn interesting things. For example, I learned while reading Twends that Justin Beiber fans are called beliebers, while Taylor Swift fans are called swifies.
Oh! And here's a video of it in action
The Tech
Twends was built using client-side Javascript with the help of some great libraries and the Twitter REST API. d3.js is without a doubt the most valuable library(MVL). We used it to layout the circles as well as animate them from their old positions to the new positions each time new data comes in. We also used HTML5 Boilerplate and jQuery. On the server side, we used express and the jade templating language.
Graphics is done using SVG, which d3.js works very well with - although is independent of. IE8 and below do no support SVG so Twends do not work there. Twends could have worked on IE9 but it doesn't. IE9 supports SVG, so that was not the problem. The problem was that IE9 was blocking the JSONP requests I was making to the Twitter API due to this problem, of which the blame is half on Microsoft and half on Twitter. So, if you go to the site with IE, it will greet you with a friendly(?) message and prompt you to install Google Chrome Frame, yea!
The Aftermath
The competition is still being judged at the moment, so I don't know what's the aftermath just yet. I guess I'll update this part of the post another time.
Node knockout came to an end and the winners were victorious! Congrats to them. I am a little disappointed/surprised that one of my favorite entries: Pitchography didn't win anything, here's a demo of their awesome presentation tool. As for Twends, well we were decidedly better than half of the entries out there :) We also presented it at the Atlanta Javascript Users Group and got some good feedback. I've made the source code public on github as well.
Node Knockout was a great experience. The organizers did a superb job of allowing the contestants to focus on writing code rather than dealing with setting up servers or administrative stuff. I enjoyed everything from the planning stages where we threw around random ideas, to the actually coding and then to the showing it off to people and seeing their reactions and comments. If you love code, then I highly recommend that you try a hackathon like this one.
