Visualizing Twitter with JavaScript
I'm always amazed about what you can do with JavaScript nowadays. Today I was curious about how often DokuWiki is mentioned on Twitter. I wondered if I could visualize this data without writing any server side code.
The quick answer is yes. By simply combining three available APIs:
- The Google Chart API
The first returns search results for a given term as an ATOM feed, the second is used to fetch and parse that feed and the third finally creates a nice graph from the data.
Here is how often DokuWiki was mentioned on Twitter every day:
If you want to visualize your own terms, feel free to directly use my script by embedding it through an iframe:
<iframe style="width: 500px; height: 300px;" src="http://www.splitbrain.org/_static/trend/twitter.html?yourterm" />
The term you want to visualize is simply given after the question mark.
If you want to hack it, the code is all in the HTML file and made available under a Creative Commons license.
Caveats
- The size of the iframe sets the size of the graph (max. 300k pixels overall, max. width and height = 1000 pixels)
- It doesn't work for very popular terms, try Twist instead
- Google caches the feed data, the tool will force Google to refresh about every 27 hours
- I only tested in Firefox and IE6, it might be broken in other browsers
- Non-Cached data takes a while to load and IE is slow
- There might be undiscovered bugs
- Building the same for identi.ca might be possible but I haven't looked into it