Guardian Tag Bubbles

This page refers to an old project. It was rewritten in Elm, and you can see that running live now, view the source code, and read about the coding experience.

This was an application to show what’s in the news and how those concepts relate to each other via the Guardian’s Open Platform Content API. Those concepts will be subjects, contributors, or types of content (e.g. article, video, etc) and appear on the screen as bubbles. Bigger bubbles represent tags that have been used more; smaller bubbles represent tags that are used less. Distance is also relevant: closer bubbles mean those tags are used together more often; more distant bubbles are tags that have less in common.

So for example, the first screen you see will have UK news and World news quite large, because we write a lot about those subjects, Sport is slightly smaller, and Travel smaller still. Meanwhile Poll and Video have a bit of distance because content tends not to be both.

But the real fun starts when you double-click on a bubble — that’s when you drill down into a tag. If I double-click on Technology to drill down into that several things happens. First the Technology bubble pulsates while it fetches the data. Then, when that’s arrived, the Technology bubble inflates. That’s because I’m looking at the Technology tag and of course that’s the dominant theme. Also the Article bubble appears, similarly large and very close (overlapping, in fact) to Technology. That’s because a lot of our technology content is also articles. There’s quite a lot of blogposts written about technology, too, so there’s a Blogposts bubble there — but it’s slightly smaller and slightly more distant. Running this on different days you’ll see different things, but as I write this I can also see Bobbie Johnson closely related to the Internet, and a (different) close relationship between the less-written-about subjects (smaller bubbles) of Piracy, File sharing and Ebooks.

Double-clicking on the Bobbie Johnson bubble allows me to see what he’s been writing about today and how it all relates.

The status bar at the bottom shows what’s going on. Currently it says “Now showing Bobbie Johnson on 2009-08-26” which is when I’m writing this piece.

Extra features

There are a few other things you can do, too. You can drag the bubbles around to rearrange them, although they’ll always try to return to some kind of equilibrium, which may or may not be their original position.

You can use the arrow buttons (bottom right) to go back and forth through your bubble history.

You can click the Show Controls button to get more options. You can change the date either directly (“what was Bobbie writing about exactly one year ago?”) or in one-day steps (“what about yesterday?”). You can also adjust the relative size and spacing of the bubbles to get a more pleasing layout or if you can’t read the bubbles’ labels.

Finally there’s a feature (which may not be available on all machines; it depends on your setup) to drag the applet out of the browser and go full screen. If you move the mouse over the very top of the applet a drag bar should appear. Use that to drag the applet away, and then you can even minimise or close the brower and it’ll keep running. And you can double-click the drag bar to go full screen.

Once you’re in full screen mode then you’ll almost certainly want to change the bubble spacing to make better use of space. Double-click the drag bar again, or press ESC, to return to the normal view.

Find out more

You can find a bit more about this application elsewhere: