Update : Added a small animation, which makes the graphs grow down instead of just appearing. I’m all about the looks! [and] pulling in data from Twitter Search — less cache, more tweets.⌘
This morning, Chrome Experiments was revealed, which had some amazing looking Javascript-coded demos. My favourite is the Social Collider, an amazing visual of conversations going on in Twitter. It’s definitely not for the faint-browser-hearted1.⌘
That got me interested in the <canvas> element, upcoming in the HTML5 specification and already implemented (in some capacity) in Safari 3.1+/Firefox 1.5+/Chrome. So playing around with it today, I started by tackling graphs (being the easiest thing to make). I got some basic animations working too, but nothing Geekaholic-post worthy. The graphs came out nicely — satisfactory for a few hours work — so I thought of sharing it, in case anyone wants to get started with <canvas> or just finds this sort of stuff interesting. It’s extremely basic, but gets the job done well.⌘
As for the colour of the graphs, I wrote a random colour generator that has got absolutely nothing to do with anything else. Makes it look a little colourful.⌘
Graph script
Twitter apps frequency graphs using Canvas/Javascript : Refresh the page to regenerate the graph with updated tweets from the public timeline (only tested in Safari 4/Firefox 3)⌘
-
By the looks of it, anything except Safari 4 and Chrome will choke on it. CPU usage shoots up initially, but will slowly reduce, so make sure your processor can live through it before you open it. ↩