A3-AndrewMcDiarmid-HannesHesse

From CS294-10 Visualization Fa07

Jump to: navigation, search

Contents

[edit] TourVis

We plan to build a map-based system to visualize the paths taken by bands on tour. Viewing multiple tours simultaneously on a map will facilitate pattern discovery and geographic genre distinctions, as well as being a fun, quick tool for viewing a band's touring history.

[edit] Data

Though we will not implement a full back end for this assignment, we envision using tour data scraped from MySpace.com and TourB.us. That data, properly transformed, will constitute the data set for our visualization, built in Flash using the Flex ActionScript framework.

[edit] Schema | Sample Data

[edit] Visualization

Tours are selected for viewing on the map using a check-box list. Additional bands can be added by entering names into an "Add a Band" text box. Date ranges (limits defined by the data set) can be selected using a dual slider. Tour paths will be shown as lines (edges) between cities (nodes). Paths traveled by multiple bands will either be drawn wider or as separate paths, with color indicating individual bands, as shown in the two options below. Hovering over a city will pop up a list of all visible tours including that city.

[edit] Storyboard

Image:HH-MCD-Storyboard1.png

Alternate option: Image:HH-MCD-Storyboard2.png


[edit] Implementation

Image:Tourvis_screenshot.png

The working, interactive version can be found here.


[edit] Changes

We did not get as far as we had anticipated in the initial storyboards. For each of us (Andrew more so as a novice programmer) there was a slow learning curve for ActionScript, and thus development took longer than expected. The interactive version currently loads an static xml data set, populates a list of bands at the right, and dynamically highlights a band's tour on mouseover of the the name. Not active are hovering over cities to reveal shows, date filtering, path aggregation (curved lines) and the search box to add bands to the current list.

[edit] Source code

The application is written in ActionScript 3.0, and is available [HANNES here].

[edit] Work breakdown

  • Planning: 50/50
  • Backend-ish coding (TourBus.as, Tour.as, Show.as): Andrew 90%, Hannes, 10%
  • Frontend coding (TourVis2.as, TourvisMap.as, Gui.as, BandList.as): Andrew 20%, Hannes 80%
  • XML file generation (Python script to scrape TourBus's rss feeds): Hannes 100%

[edit] Development process

We estimate that we each spent around 30 hours on the project, usually working together. To share code, we used a cvs repository that Hannes had access to. As noted above, the learning curve was slower than we expected, and we spent lots of time learning ActionScript 3 and searching for the best documentation at Adobe's infuriating website.

We are not thrilled with our dataset, which seems to include only a handful of cities. TourBus was an easier site to scrape, and at first glance its data seemed sufficient, but the Upcoming Shows table from MySpace pages is much more complete. Hannes worked on a script to scrape those pages, but, deeply embedded in HTML tables, the data proved much harder to get at.

Specific elements that took the most time were:

  • reading in and objectifying XML data
  • passing control effectively between the classes
  • curving paths effectively
  • HANNES, ADD MORE HERE

[edit] Known Issues

  • The nodes and edges are currently drawn with screen coordinates, and can appear beyond the edges of the map.
  • Adjusting a Sprite's width or height attribute makes it disappear, and we could not figure out why. Thus the text areas are not as wide as we would like.

[edit] Outlook



[add comment]