Twitter local trends using Xcelsius

Twitter local trends helps users to discover what topics are trending in their location. Launched in early 2010 with just a few locations, twitter had expanded the local trends feature to 70 more cities and countries in April 2011. Inspired by Ryan Goodman’s twitter ticker using Xcelsius, I started browsing the Twitter API documentation to see if I can build something quickly. I finally decided on simulating the Local Trends feature using Xcelsius. I’m a pixel person :), so emphasis was not just on the functionality but was also on the visual elements. I tried to mimic the Twitter version of local trends as much as possible.


One of the parameters that the Trends xml looks for is a yahoo WOEID (Where On Earth ID). WOEID is a unique reference identifier assigned by Yahoo! to identify any feature on Earth. In order to find a WOEID for a specific place, I had to use another XML data connection from Yahoo Developer Network. Like any other developer network, you need a valid Application ID to see the results.

The Yahoo XML connection returns a WOEID which I’m passing to the Twitter local trends XML connection as a parameter. Note that the trigger logic for both the connections is different. The WOEID XML connection is triggered based on the location you select and the Twitter connection is fired when the WOEID changes. See the XLF for more details.

Since Xcelsius outputs a flash file, there is always a Crossdomain issue when it comes to data transfer between 2 different domains. Since Twitter’s Crossdomain file is not so¬†lenient¬†(Unlike it’s search counterpart), I had to use a Crossdomain proxy to bypass the error. Again, thanks to Mr Goodman for sharing this on his blog. You will notice once you download the source files and try to open the SWF from your local machine, it might throw a crossdomain error.

Navigation:
Use the buttons to drill down into a specific country and then to a city. Notice that as you drill down a breadcrumb trail starts building on the top. You can go back to the parent location by clicking on the breadcrumb buttons. Once the trending topics load on the side, you can click on them to launch the individual Twitter search pages.

If the SWF is too small on your screen, click on the fullscreen button on the top right corner to go full screen.

The rest of the visual design is self explanatory. Feel free to download the source files (XLF and SWF) by clicking on the Download button below.

  • Joshua Tapley

    Fantastic post and nice use of the fullscreen button!

    – Josh