From CS294-10 Visualization Fa08

Jump to: navigation, search



  • Witton Chou
  • Michael So

The Data Domain

We plan to create a FilmFinder-like visualization, so our data domain will be movies. We will try to find a movie database where each record contains: the movie title, the release date, the distributor, the MPAA rating, the director, and the actor(s).

The Interactive Visualization Techniques

The layout of our Interactive Visualization Software will be similar to the Cell Phone Finder software. The dynamic querying tools occur at the top of the layout while the display of the film data take up the larger bottom half of the screen. Our visualization will have the movies partitioned by what letter their movie title starts with (whereas in the Cell Phone Finder, the cell phones were partitioned by network provider). To fit in all the movies that are in the database, each movie will be depicted as a tiny movie reel. If a user hovers the mouse over one of the movie reels, a details-on-demand window pops up containing the movie poster and the value for each field in the record for that movie. The movie reels vary in color because each color encodes a specific genre. There is a key in the display indicating what genre each color represents.

MPAA Ratings To filter by MPAA ratings, the user will utilize check boxes (as can be seen from the layout picture above).

Release Dates To filter by release dates, the user will have to use two slider bars: one for year and the other for month. On each slider, there will be two movable boxes: one to indicate the start and the other the end. Therefore the sliders are used to select an interval of time. If you look at the layout picture above, the way the sliders are positioned means that only movies released between May and August for each year from 1999 to 2002.

Distributors, Actors/Actresses, Directors, Genres To filter by distributors, actors/actresses, directors, and/or genres, there will be two scroll boxes. Between each pair of scroll boxes will be a pair of buttons: one pointing to the box on the left and the other pointing to the box on the right. The buttons are used to transfer items from one scroll box to the other. There are also radio buttons paired with each scroll box. This is done to filter out items of interest.

For example, let's say the user is interested in only movies starring Jessica Alba. The user searches for Jessica Alba's name in the scroll box that contains her name (the non-empty scroll box in this example). Once the user finds Jessica Alba, the user then clicks on that name and hits the arrow button pointing towards the empty scroll box.


After hitting the button, Jessica Alba's name is now in the scroll box on the left. The actress is no longer in the scroll box on the right. Once that is done, the user then clicks on the radio button corresponding to the scroll box on the left and now only movies starring Jessica Alba will be displayed (the movies displayed will also be filtered out by the other filters i.e. MPAA rating, release date, etc.).


Movie Titles To filter by movie titles, there are two options. The user can either use a search box that will function in an iTunes-like manner where each letter typed shows an immediate effect on the display of movies.

The second option is to choose from the 26 letters of the alphabet. It will be similar to choosing phone manufacturer(s) in the Cellphones demonstration of visualization software. The letters highlighted are the ones the user selected. So for example, if "A", "B", and "C" are highlighted, all the movies that have titles beginning with "A" "B", or "C" are the only ones shown in the display. (Note: The movies displayed will also be filtered out by the other filters i.e. MPAA rating, release date, etc.).

One major constraint is that only one of these options can be chosen for selecting movie titles. Therefore there will be a radio button for each option to reflect which option was chosen.

Modifying the Partitions For each of the filter types, there is an icon Image:sortIcon.jpg. When a user hits that icon, the partition in the display is changed to be partitioned by that filter type. So for example, if the icon in the Release Date section is clicked on, the layout changes to this:

And if the icon for the MPAA rating is clicked on, then the partitions will change once again, this time to MPAA ratings. The ability to modify the partitions gives the user the power to choose how the movies are grouped and, in effect, displayed.

The Final Interactive Visualization Application

Our interactive visualization application is called the Movie Searcher. The name is self-explanatory. The user is able to search for any movie that has been released in US theaters from May 2007 to October 2008. The movies are displayed in a scatterplot where the x-axis encodes the movie's release date and the y-axis (by default) encodes the movie's genre. The y-axis can be changed to encode MPAA rating by simply clicking on the blue underlined "MPAA Rating" text. To change the y-axis back to encoding genre, the user can simply click on the blue underlinged "Genre" text.

To filter what is displayed in the scatterplot, there are 4 different filters provided.

  • One is a search box where the user is suppose to enter a title of a movie. The search box is very much like the iTunes search box, where each character the user types in the search box dynamically updates the display.
  • The next filter is in the gray box titled "Release Date: ". There user can choose the years and the months such that only movies released during those years and months show up on the display. By default, all the years and months are selected. If a user, for example, starts out by clicking on "March", the "March" text becomes grayed out signifying that movies that were released during the month of March will not be displayed in the scatterplot. Clicking on the grayed out "March" text will turn it back to a bold black and the movies that were released during March are once again displayed.
  • The MPAA ratings filter acts as a legend as well as clickable buttons. The MPAA ratings are encoded by shape. The buttons work just like the buttons in the Release Date filter. Grayed out MPAA ratings mean those movies with those MPAA ratings are not displayed in the scatterplot whereas the bold black MPAA ratings mean those movies are shown in the scatterplot.
  • The last one filters movies by genres. It also acts like a legend (like the MPAA ratings filter) that indicates what genre each color encodes. The legend items are once again clickable buttons that operate the same as the buttons in the MPAA ratings and Release Date filters.

Changes Between Storyboard and Final Implementation

  • The display in the final implementation is a scatterplot instead of a display similar to the Cell Phone Finder. This was done because we did not know how to implement a layout that looked and operated like what we drew on the storyboards. Therefore we decided to settle on a different layout, which was the scatterplot. Now our display looks similar to the Film Finder instead of the Cell Phone Finder application.

  • For the movie title filter, we only kept one option: the search box. We did not implement the second option (which was choosing from 26 letters of the alphabet) because we felt the iTunes-like search box was adequate and we did not find time to implement the second option. Since the search field dynamically updates the contents of the visualization, we felt it was a reasonable change to leave out the "begins with..." search option which can essentially perform the same function.


  • The release date filter was changed from sliders to being implemented as clickable buttons. This was done because we did not know how to implement sliders in Flare. Because the movies in our database were movies released between May 2007 and October 2008, we decided on encoding the release date using 14 buttons: 12 were for the twelve months and 2 for the two years, 2007 and 2008. The resulting effect allows the user to view movies that were released during particular months. For example, many distributors schedule their best movies for summer and winter releases. In such a case, the user would select to view movies during the months of May, June, July as well as December.


  • The Actress/Actor, Director, and Distributor filter was scrapped. One major reason was we did not use a database that contained fields for Actress/Actors nor Directors. Our database did contain a field for Distributor. However, we did not make a Distributor filter for our final implementation because we did not know how to implement the filter we described in our story board. And we could not use clickable buttons because there were 88 total distributors. Having that many buttons on screen would cause too much clutter and prove annoying.
  • The MPAA rating filter changed from check boxes to clickable legend items. With legend items, it is apparent to the user what each shape in the scatterplot encodes.


  • The genre legend became a filter composed of clickable legend items. Instead of just having a static genre legend, we decided to make it also a filter. Since it is very similar to the MPAA rating filter, making a genre filter from clickable legend items was an easy-to-add feature.


  • The details-on-demand window in the final implementation does not contain a movie poster. We did not have movie poster images readily available.


  • The "Modifying Partitions" feature detailed in our story board was modified in our final implementation. Because we used a scatterplot to be our display, the "Modifying Partitions" should actually be called "changing the y-axis encoding". In our final implementation, the y-axis encoding can only be changed to either genre or MPAA rating. We did not allow the user to change the y-axis encoding to release date because the x-axis will always encode release date.

Comments on Development Process

We spent roughly 20 hours working on developing our application. A lot of the time was spent trying to learn Actionscript, flex, and flare. We spent a lot of time trying to implement what we planned in our storyboards, but eventually had to make compromises (detailed in the previous section, "Changes Between the Storyboard and Final Implementation") to our design since we failed many times.

The work was split up by planning out who would implement which filter. Michael ended up implementing the MPAA rating, genre, and release date filter. Witton implemented the Movie Title filter. Michael also placed in the methods that loaded the database data and created the scatterplot visualization. Witton did most of the layout for the rectangular sprites and the format and placement of the text sprites. Both Michael and Witton worked on the final write-up.

Source Code


[add comment]
Personal tools