Tour de Flex Live Planetary Dashboard

May 26, 2009 | By

Ok, it’s technically not “planetary” since only one planet is involved… but… this is still pretty cool.   Check out the new ILOG real-time activity dashboard here (screenshot below).   What you are seeing is LIVE data from Tour de Flex.  Every time someone views a sample, a new dot appears.  Chances are if you go view a sample, you will see yourself on the map almost instantly!  Keep in mind that the geolocation is not perfect, but it’s pretty good!  See below for the scoop.

History

When we first launched Tour de Flex in November 2008, we built in a simple HTTPService call to a tiny backend PHP file that uses a database to log which sample was viewed.  We did this so that we could rank Tour de Flex search results by popularity and so that we could keep track of how many samples our application was serving up (see my recent post about reaching 5 million!).

In early March, I was looking at the latest ILOG Elixir components in their 2.0 release and I was especially fascinated by their heatmap visualization component.  That’s when I had an idea!  What if we could plot who was using Tour de Flex on the heatmap?!  Christophe Coenraets and I started talking about the potential and quickly determined that it was indeed possible.  We had to first find a way to convert IP addresses to latitude and longitude in real-time.  After a little research, we found MaxMind’s GeoIP technology and purchased their GeoIP City Database.

At this point, we had a source of constant data and a means of converting it to something that the heatmap component could use.  The next challenge was to figure out how to distribute the data so that multiple clients could subscribe to it and process it.  That’s where the publish and subscribe messaging features of  LiveCycle Data Services (or BlazeDS) come into the picture.

Christophe configured LiveCycle Data Services and created a Java servlet to handle the backend messaging.  He then created a simple Flex app that subscribes to the message topic and displays the data in an auto-updating datagrid that shows a new line every time a new sample was viewed in Tour de Flex.  Every second or two, I saw a new line of data appear.  The coolness was already starting to show.

I then sent the data grid code to our friends at ILOG with a short note that said, “Would you guys like to try and make a cool heatmap or other visualization of this data?” (the bait!).  A few days later, they sent us the dashboard that is linked above.  I was totally impressed!  Not only did they implement the heatmap, they also included other visualizations to really put it over the top!  I shared the link with a few internal folks and the reaction was fantastic; although a few people complained that they spent too much time staring at the dashboard instead of working.  :)

How it works

The diagram below provides a high-level description of how everything fits together.

  • Christophe Coenraets provides all of the details including source code related to the messaging in his blog post.
  • Damien Mandrioli from ILOG provides the source code in the dashboard itself (right-click the application and choose “View Source”)

Future possibilities

As you can see, this application was fairly easy to build.  There are some intriguing possibilities created by combining pub/sub messaging with data visualization.  I’m already thinking about building a similar dashboard to monitor traffic to Flex.org as well as my blog and other sites!  I’m sure that you are already thinking of other applications.

A big THANKS to the guys at ILOG for building the dashboard!  We are already working with them on adding historical data analysis to the dashboard.

Another THANKS goes out to Christophe for building the backend infrastructure and helping me quadruple my knowledge about pub/sub messaging!  (By the way, a good starting point on pub/sub messaging is Christophe’s Adobe TV video)

Filed in: Adobe Flex, Adobe LiveCycle Data Services, Cool Technology, Tour de Flex | Tags: , , , , , , , , , , ,

About the Author (Author Profile)

Greg is a developer advocate for the Google Cloud Platform based in San Francisco, California

Comments (14)

  1. I also recommend MaxMind’s GeoIP. I’d been in communication w/ the NSA a few years ago regarding their NGT technology, but they hadn’t yet established a commercial implementation of it.

  2. 7tungsten4

    How can we get auxillary information about the TDF sample selected? There is a sampleID field, but what is the RMI for additional data?

    Thanks! and great work!

  3. Kaushik

    Google’s Javascript provides longitude / latitude too. Here is a reference of how I used it http://doyouflex.com/google/search-google.html This page auto detects your location.

  4. Philippe

    Great app!
    Can you share the PHP code that sends the example ID and IP to the LCDS backend? I couldn’t find it on Christophe’s blog.
    Thanks in advance.