Skip to content

Interactive Spherical Tag Cloud

March 26, 2013

This is only viewable in HTML5.

If you see this message, your browser is too old.

Here’s a 3D tag cloud where the tags are displayed in a sphere. It is implemented in Javascript. Some features of this tag cloud:

  • The tag locations are mapped to points on the surface of a sphere (the point is at the center in the text).
  • The sphere may be rotated by clicking and dragging in the canvas.
  • If you move the sphere, it will move itself back to its starting orientation.
  • The sphere wobbles around its axis when it’s not being dragged.
  • Tags are fetched from the categories on this blog.
  • The more popular tags are at the front side of the sphere, less popular on the dark side.
  • Clicking on the tag takes you to the categories link.
  • It’s really a 2D context, so the sphere’s points are mapped onto a 2D space.

Before I implemented it Javascript, I created a previous version of this several years ago as a way to learn Silverlight. At the time, it was displaying trending topics from various social networking sites. It was a bit more complicated because the trends changed over time, both in rank and content. To handle this, it allowed the text tags to migrate positions as they changed rank relative to each other (i.e. an item that changed rank would “walk” across the sphere to its new position). This was to keep the higher ranked items on the front-side. In this new version, since I’m using a tag cloud that is not so dymanic, a text’s position on the sphere remains fixed–only the sphere itself needs to move.

Although I wrote this to play with Silverlight, the exercise didn’t teach me much. Since I already worked in C# and .NET, using Silverlight just meant figuring out which API methods to call. I wanted to host this on my blog, and wasn’t interested in serving Silverlight content from my site (which runs from a Linux server) even though it is apparently possible. So I used this as an opportunity to learn some JavaScript by porting it. I came very close to choosing Dart instead, but it seemed too similar to C#.

The main difference using JavaScript is its object model. At first it wasn’t behaving as I expected, but all I needed was a close reading of some of the details of this model to clear up my misconceptions. I’m not sure if my code resembles JavaScript conventions. I noticed that JavaScript lends itself well to doing functional-style idioms, such as making data objects immutable. Nevertheless, I avoided that approach in some cases where data was being generated in a loop. I didn’t want to risk excess allocations causing the sphere to stutter, so used a more imperative approach.

The main obstacle I faced is the variance in browser support for some mouse events. It turns out that getting the position of a mouse relative to a canvas is different on some browsers. As of now I’ve seen it working in recent versions of Firefox, Chrome, Safari, and IE9, but I’m not confident it will work across the board on older versions or different browsers.

The other thing I needed to complete this project was getting the tags from my own site. Not long ago, Jetpack (which is a kitchen-sink plugin for WordPress blogs provided by released a JSON-based REST API to access data from your blog. It looked promising, but unfortunately doesn’t provide some very basic functionality you would think it should, such as “get a list of my tags.” The only way to learn the tags was to fetch every post, and gather every tag from each. That’s not ideal. Luckily there are some third-party WordPress plugins that provide REST access to your blog, and so I ended up using one called JSON API.

I put the source code on GitHub for reference.

2 Comments leave one →
  1. August 10, 2018 9:11 AM

    It’s remarkable in support of me to have a web page, which is useful for my
    know-how. thanks admin

Leave a Reply

Your email address will not be published. Required fields are marked *