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.

7 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

  2. December 26, 2018 6:13 AM

    Hello, it’s Daniela here!
    I work as a professional an essay writer and have created this content with the intent of changing your life for the better. I started honing my writing talent in high school. I learned that my fellow students needed writing help—and they were willing to pay for it. The money was enough to help pay my tuition for my remaining semesters of college.
    Ever since college, I have continued to work as an academic writer. I was hired by a writing service based in the United Kingdom. Since then, the essays that I have written have been sold around Europe and the United States.
    In my line of work, I have become used to hearing, “Daniela, can you help me meet my writing assignment deadline?” I know that I can provide this service.

    Professional Writer – Daniela Jeffery – Planthealth Corps

  3. April 14, 2019 11:07 PM

    This is the suitable weblog for anybody who needs to find out about this topic. You notice so much its almost hard to argue with you (not that I truly would want…HaHa). You definitely put a new spin on a subject thats been written about for years. Nice stuff, simply nice!

  4. June 3, 2019 3:17 AM

    Hey, I am Kya an expert in report writing.

    I enjoy solving people’s problems and make them happy. That is what I have been doing for decades now.
    I have been writing since I was 12 years old and never knew it would turn out to be a full-time career. I have also been able to manage several projects that involves writing. And I worked in three organizations as a volunteer to assist people.My interest has always been to help people succeed. And I go the extra mile to make that happen.
    I enjoy writing academic papers and have helped people from countries like Australia.
    I work with a company whose mission is to provide quality works and make people happy. In fact, many clients come to me for help on a daily basis because they know I always deliver. And I will continue to provide nothing but quality to build trust like I have been doing for the past few years.

    Expert writer – Kya Pierce – Ebrcn Team

  5. June 21, 2019 7:03 AM

    *Your place is valueble for me. Thanks!?

  6. December 26, 2019 1:15 AM

    Hi, my name is Eva Mccarthy!

    I`m a professional writer and I`m going to change your lifes onсe and for all
    Writing has been my passion since early childhood and now I cannot imagine my life without it.
    Most of my books were sold throughout Canada, USA, Old England and even Russia. Also I`m working with services that help people to save their time.
    People ask me “Hey, Eva Mccarthy, I need your professional help” and I always accept the request, `cause I know, that only I can solve all their problems!

    Professional Academic Writer – Eva Mccarthy – Band

Leave a Reply to adonai Cancel reply

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