JavaFX Tag Visualizer

Monday, January 19th, 2009

Lately I’ve been experimenting with some of JavaFX’s animations to do some Data Visualization. Below is a screen shot of a little app that will visualize some of the top tags on my blog, much like my Tag Cloud widget does.

If you’d like to launch it and see some of the animations yourself, click the button below:

Similar to a Tag Cloud, the “dome” size is relative to the frequency of the tag (big domes = more tags). There’s an extra couple of bits of information in here though: the arcs that connect the tags represent how tags are correlated to each other. The wider the arc the stronger the correlation. So in the above screen shot, Java and Groovy are strongly correlated (they frequently appear together in the same post), whereas DSL and Groovy are weakly Correlated, and Swing and DSL aren’t correlated at all.

The data is canned at the moment, but in order to get a sense of what a different cloud would look like, here’s a screen shot with data populated from a blog by my fellow colleague Shane Johnson, an active blogger on WCM and the like:

The arcs are traced out via the new PathTransition class. In fact all of the animations make heavy use of the Transition API: FadeTransitions, ScaleTransitions, PauseTransitions, and even SequentialTransitions to keep everything together. These classes seem to be new to the 1.0 release (I don’t recall seeing them in the Preview), and they really do take a lot of the pain out of trying to programmatically manage an animation.

This was a fun experiment. It would be nice to pull from live data in the future, and perhaps even have a widget like this co-existing along side a tag cloud in a blog.

By the way, the idea for this type of visualization was taken from the excellent new book on Graphic Design: “Data Flow“.

Tags: ,

9 Responses to “JavaFX Tag Visualizer”

  1. Paul wrote:
    January 19th, 2009 at 6:22 pm |

    Cool animations … very nice. Although I am a bit skeptical about this type of visualization … it seems that a typical tag cloud would overwhelm the visualization, turning it into something akin to the spaghetti pie that Ms. Meta likes to make.

  2. sanderson wrote:
    January 19th, 2009 at 10:40 pm |

    Hi Paul, thanks for the comment. You’re right in that this doesn’t scale past a “top 10″ (at the most) tags. I think the value (if there is any) is more in the correlation between tags, which is something you don’t get from a cloud.

    I could imagine this existing along side of a tag cloud, perhaps on a timer randomly popping tags in and out.

  3. Behrang wrote:
    January 20th, 2009 at 9:15 am |

    Good work. However on my 2.4Ghz Core 2 Duo iMac the animation is not very smooth and it has a couple of noticeable small pauses.

  4. OtengiM wrote:
    January 20th, 2009 at 9:22 am |

    Nice job, I get a smooth and cool animation I have a mac book with 2.4 core 2 duo and the intel video card, it is strange the guy above have problems with the animation.

  5. Sten’s Blog » Blog Archive » JavaFX Radial Tag Visualizer wrote:
    January 26th, 2009 at 6:52 pm |

    [...] Friends « JavaFX Tag Visualizer [...]

  6. Octavian Tanase wrote:
    January 31st, 2009 at 12:46 pm |

    Awesome. It would be interesting if you can hook up your widget to a web service or data feed from a website like http://technorati.com/

    Cheers,
    –Octavian
    Sr. Director Java Platform Group

  7. Pepe wrote:
    February 7th, 2009 at 2:11 pm |

    3.1 MB download for that example. Impressing…

  8. Sten’s Blog » Blog Archive » JavaFX Tag Visualizer Source Code wrote:
    March 17th, 2010 at 10:16 am |

    [...] with JavaFX involved alternative ways of visualizing tag clouds. Specifically there was the “dome” visualizer, and the “radial” visualizer, both pictured below with their respective webstart [...]

  9. Sten’s JavaFX Tag Visualizer | Music wrote:
    March 24th, 2010 at 12:17 am |

    [...] has a pretty nifty JavaFX Visualizer for social tags. Sten’s experimenting with the animation frameworks. It’s pretty [...]

Leave a Reply