Interactive Word Cloud (Part 1)

I have not been keeping my site nearly as up to date as I intended… since my last post I have started and finished a degree, directed a development project in Tanzania and expended over 1% of my anticipated working life. Now I would like to walk through I project I have started to try to get some posts up :)

The Idea: Instead of arriving to my website and immediately seeing my posts (and perhaps wondering why I haven’t posted content in 18 months) I want people to see a splash screen that has an interactive word cloud. Since this is my portfolio, I would like people to be able to really quickly get a feel for the breadth of the things I am interested in and then be able to dive in and quickly get an understanding for my interests and experience.

In the past, I have used Processing to make word clouds for report covers. Using the WordCram library ( I can create word clouds and export them to SVG. My plan is to take this SVG image and monitor for mouse events using the SVG DOM. Once I can monitor the events, I can place a div near the mouse and give the user more information about the given word. Eventually, I hope to manage clicks so that clicking on certain words will redirect the user to a given page on my site.

Here is a quick sample cloud I came up with using WordCram, code will follow in a later post:

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>