LOTR Timeline Graph


By daniel - Posted on 22 January 2011

The ever-hilarious xkcd featured a comic which was very much a visualization. It was a chart showing the interactions between characters from a handful of movies. The comic was the kick I needed to do a quick experiment with timeline-based graph visualizations.

Here's the result.

It's a bit of a mess, but what I've done is synchronize three components: a slider, the original comic from xkcd, and the graph visualization. You can use the slider grip or the buttons to move through the story.

As time passes (or unpasses), the graph automatically shifts to reflect the data for the current time step. The animation helps viewers maintain context so it's possible to see the changes as they happen.

There's a lot more work that could be done to make the changes more obvious and less disorienting. In particular, when characters leave or die, it's pretty impossible to see what node disappeared.

Interactions Back to Geography

".. and you add places as they appear in groups .. geography reversed"

I had a quick back and forth with Dr. Lothar Krempel about making a timeline graph visualization. He's also into dataviz and pointed out that the clusters that form based on interactions could be used to determine geography.

The comic's visualization was portraying character interactions but since they didn't have phones in middle earth, it wasn't too hard to associate these interactions with locations. So each location gets a bubble and a label unless we don't know where the character is or they're dead.

I see a lot of potential for this kind of interface and hope to find more uses for it. Have fun and let me know what you think!

spacer

Daniel is a web developer specializing in the art of information visualization.

spacer
spacer
spacer
spacer

Projects

Developer Jeopardy Controllers
spacer
Rio+20 Environmental Resolutions Timeline
spacer
CPR Kit Signs NYC
spacer

Recent blog posts

  • Javascript QR Code Library
  • OpenFrameworks Building but Not Running in Xcode?
  • Visualizing LinkedIn Connections Using Protovis
  • New Twitter Network Graph Viz
  • How Google Website Optimizer Encourages Visitors to Act
  • Import Drupal Comments into Disqus
  • Getting the Most Out of Google Adsense
  • Website Back Online With a New Theme
  • Setting Up OpenFrameworks with Code::Blocks
  • Do You Have a Polling Addiction?
more

Recent Comments

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.