Visible Tweets

30 April 2009

27 comments

A Blue Perspective: Visible Tweets

Visible Tweets – A Twitter visualiser for rock concerts

I'm not exactly a prolific Twitterer. In fact, I'm even behind Oprah in the updates count. But the beauty of Twitter isn't just the sound of a single voice. Its beauty is the cacophony of the masses – a sea of voices that gently washes over you and allows you to savour the zeitgeist in 140 character canapes.

The situations where I find this ambience most useful is anytime there's a dense conglomeration of people – meetups, conferences, concerts, public rallies, pub crawls – Twitter can help you observe these scenes from halfway around the world. But it's even more interesting when you're there, surrounded by the noise of physical and virtual. Particularly at conferences, Twitter gives a voice to an audience who for many years have played a subservient role to those who were officially there to speak. But who says they have less to say?

At Web Directions 2008, I set myself the aim of bringing these subdued conversations to the attention of the audience, and so I wrote a Twitter visualiser designed for the big screen. Something with big, f@#! off readable letters you could see from the other side of the room. Something you could glance at mid-conversation, rather than tethering your finger to the refresh button of an iPhone.

There's a few Twitter visualisers out there, but with the exception of Twistori, I'd hardly say that any of them were particularly pleasing to the eye. So that was my secondary goal – make a seductive bit of eye candy. It kind of worked. And even went so far as to steal Mark Pesce's thunder in his closing keynote. (By his own choice.)

After six months, I've managed to robustify and productionamify my original code, and along the way I've added a couple more visualisations to the original concept of "blowing leaves".

It's now up at visibletweets.com for anyone to use and I hope that at your next get-together you'll be able to hook it up to a big screen and make some conversation with robots.

I'll be endeavouring to continue development of this mini-application with new visualisation modes and features (such as permalinking), so stay tuned to @visibletweets for updates. Let me know if you're using it as well, or have any ideas/bugs.

Categories

, , , , ,

Comments

  1. 1/27

    Ryan Merrill commented on 30 April 2009 @ 06:45

    Nice work, Cameron. Quite impressive.

    I see it's made in Flash, any plans on making it using JavaScript?

  2. 2/27

    Scott Nelle commented on 30 April 2009 @ 07:16

    That's just awesome. The tag cloud mode is super cool.

    Have you had any API rate limit issues yet?

  3. 3/27

    Mountain/\Ash commented on 30 April 2009 @ 07:33

    Read this blog post on the iPhone, followed the link, Fail (in a pretty way though).

    You asked for them, so here are my ideas:

    1) Too Quick. Beautiful and amazing, but I think when used in situ the updates need to stay complete for a bit longer (maybe it can be an optional timing setting, but it would be cool to do it based on character length: longer tweets take longer to read).

    2) Location Location Location. At events I like to see where everyone has come from (probably because it's always a journey for me to get to events). So it would be nice if it showed this alongside the avatar and screen name. You could even plot them on a background map.

    3) Pics. This is a visual experiment, so it would be cool if you pulled in images when referenced in a message (Tweetpic has an API)

    Cool stuff again Cameron, and much better than BrightKites attempt (http://brightkite.com/wall).

  4. 4/27

    The Man in Blue commented on 30 April 2009 @ 11:48

    @Ryan: No plans on making it in JavaScript for a couple of reasons:

    - I don't think it'd be quick enough
    - No font support
    - No effects (such as blurring, shadows)
    - No full screen (important for displaying on big screens)

    @Scott: I haven't hit any API rate limit issues yet, and I'm not certain I will -- each request to the search engine is performed via the client, so it doesn't actually pass through my server?

    @Mountain: Each tweet *is* shown by how long it is. Less characters, less time. Maybe you just read slow :) (But I could up the per character time setting)

    Map's a cool idea, but a whole lot more complicated :)

  5. 5/27

    Michael Koukoullis commented on 30 April 2009 @ 12:13

    Awesome work Cam. I'm no flash developer but agree with you that its the best tool for the job in this case, after all it is a visualiser. Well done!

  6. 6/27

    Di commented on 30 April 2009 @ 14:54

    Love it. Will definitely use it at our Local Government Web Network conference. We had just the Twitter Search and had it automatically refreshing the page last year which was a bit ugly. This is much more elegant and beautiful :)

  7. 7/27

    Dushan Hanuska commented on 30 April 2009 @ 15:42

    Nice work, Cameron! It looks great! I will definitely use it in the future.

  8. 8/27

    Steve commented on 1 May 2009 @ 00:11

    Odd, works in IE8 for me, but FF3 chokes on it and all I get is a black screen. hmmm

  9. 9/27

    Chris commented on 1 May 2009 @ 00:18

    Very nice, although I'm not sure I'm a fan of that purple color.

    I tried a similar experiment, but with jQuery. It could easily be animated, but I didn't want to make it too flashy. Also had it preload tweets in the background before it displays them, for obvious reasons.

    It searches for one term but the same way yours does, so it could be easily modified to have a search box.

    Only design change I would make is having the footer be sticky. I was too lazy to implement it while writing the markup.

    http://fluidmarkup.com/democracy

    Nice job on yours as well!

  10. 10/27

    Shaun Inman commented on 1 May 2009 @ 00:47

    Might be a good idea to filter out prepositions, articles, pronouns and helping verbs from the tags in the cloud. Otherwise the cloud quickly becomes overwhelmed by the search term(s) and ubiquitous sentence "glue."

    Brilliant work regardless.

  11. 11/27

    Jim commented on 1 May 2009 @ 05:51

    Agree with the note that the updates change too quickly. Maybe a slider to adjust time per letter?

    Other than that - very slick! I'm gonna set this up in my house to be running 24/7.

  12. 12/27

    Charan commented on 1 May 2009 @ 06:13

    Very nice work - looks fantastic. Would be great as a plugin / widget for sites to highlight twitter buzz.

  13. 13/27

    Ryan commented on 1 May 2009 @ 07:26

    Full screen mode works great on my 30" Cinema. Any plans for a OSX screensaver?

    Amazing.

    @parrfolio

  14. 14/27

    Romy Macias commented on 1 May 2009 @ 15:45

    Cameron,

    When can we get this app. It is really beautiful and fun. I tweeted and then searched my keywords: ballet, influenza... and there was my tweet - cool!

  15. 15/27

    pracas upreti commented on 1 May 2009 @ 17:59

    hey cameron ,

    its very nice , the mode which the tweet displays is awesome, i made fullscreen and watched for while , great work ,

    i had seen some other simple twitter application on web, but u have rocked ,


    great great great

  16. 16/27

    Troels commented on 1 May 2009 @ 20:12

    This is very nice!

    One feature request from me would be to be able to bypass the setup using a querystring with search terms and animation like this:

    http://visibletweets.com/search?q=FTW+or+WTF&a=cloud

    That would also make it fun to personalize it a bit when telling friends on twitter about it.

    Awsome work!

  17. 17/27

    Jaclyn Hawtin commented on 2 May 2009 @ 10:37

    You absolutely Rock!!!!

  18. 18/27

    Anaska commented on 4 May 2009 @ 04:37

    Hey Camaron, That's a great work! Just loved the idea. Continue to amaze us...

  19. 19/27

    Michael Lipsey commented on 4 May 2009 @ 08:38

    Works as a search tool for what I'm interested in. Better than the window I've been using.

  20. 20/27

    Andrew Green commented on 4 May 2009 @ 10:37

    Lovely work, Cam. Nice one on stealing Pesce's thunder too. :)

  21. 21/27

    Xander commented on 5 May 2009 @ 20:50

    This is a truly awesome visualisation for Twitter, I like to keep it running in the background on one of my other monitors with a variety of queries.
    Make a screensaver version! :D

  22. 22/27

    Adeline commented on 6 May 2009 @ 09:00

    This is very cool! nice work!

  23. 23/27

    gary commented on 6 May 2009 @ 20:02

    you should do a screensaver for this.. good stuff!!!

  24. 24/27

    Ian Gilman commented on 12 May 2009 @ 15:22

    I love it!

    There seems to be a growing movement of these kinds of sites, ambient websites, that just do cool stuff without requiring interaction. Here's mine (not Twitter related):

    http://gimmeshiny.com/

    My feature request for Visible Tweets is to have an auto-start mode (presumably an additional item on the URL), so it gets going immediately rather than waiting for the user to hit Go. If it had this, I'd love to include it in the Gimme Shiny meta mode:

    http://gimmeshiny.com/blog/2009/03/ambient-websites.php

    I'd also love to be able to specify to cycle through all animation modes (again on the URL, so it can start without user involvement).

    Cheers!

  25. 25/27

    The Man in Blue commented on 12 May 2009 @ 15:48

    Hi Ian,

    It already takes URL arguments and auto-starts:

    http://visibletweets.com/#query=visibletweets&animation=1

  26. 26/27

    Ben Walker commented on 13 May 2009 @ 01:40

    Brilliant! I was looking for exactly this sort of thing for Ben's Big Gig a couple of weeks ago. Looks like you launched it as I walked on stage. Talk about timing...

    I will absolutely be using and recommending this to everyone. It's a simple and attractive implementation of a very useful app. Thank you.

    At the Big Gig we ended up hacking together something with Growl, Vienna RSS reader and Applescript. Ugly, but it worked. This would have blown the audience away. ;)

  27. 27/27

    Arthur Taubo commented on 15 May 2009 @ 08:39

    Well done Cameron!!! :0)

  28. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed