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: JavaFX, Visualization
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « May | ||||||
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | |||
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.
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.
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.
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.
[...] Friends « JavaFX Tag Visualizer [...]
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
3.1 MB download for that example. Impressing…
[...] 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 [...]
[...] has a pretty nifty JavaFX Visualizer for social tags. Sten’s experimenting with the animation frameworks. It’s pretty [...]