San Fran Movie Places Insight
Team Project | Data Visualization & Interaction Design

San Fran Movie Places Insight
Team Project | Data Visualization & Interaction Design

Role: Wed dashboard designer, data visualizer
Client/course: CMU 05-839: Big Data Interactive System, under instruction of Prof. Jen Mankoff
Skills: Information architecture, data visualization, information design, interaction design, front-end development
Tools: R, JavaScript, Sketches on paper, Twitter Bootstrap (for presenting final work on the website)
Time: 4 weeks, Spring 2014

Project Goal

Develop an experience with providing end users with access to data.

The question: As a tourist and movie fan, where can I get information to help arrange the tour in San Francisco?

If you love movies, and you love San Francisco, you’re bound to love this — a presentation of filming locations of movies shot in San Francisco from 1905 – 2014. Also, if applicable, the approach that we have here can be applied to more cities to help people explore especially the tourism places with more interesting perspectives about films.

I, together with a teammate, designed and implemented the novel & interactive visualization to help achieve:

1. With respect to movie-related information (the ratings, runtime, and popularity), we want to provide visually helpful information for analyzing the underlying pattern about the relationship of time, locations, and movie itself, so that it help the tourists to know more context of that movie and association to that address as time goes by;

2. Help people explore data from the historical movie shots’ perspective;

3. Provide insights about the most popular places and its locations in the city.

Interactive Visualization

We delivered a web-based dashboard with multiple web pages to explore. (click the graph below to go to project website)


You can try to see the combined facets about films on this time-based motion visualization
(The file might take a few seconds to load due to its data size, so please be patient while waiting)
Or just explore places and gain insights on these interactive maps with San Fran's movie places marked

Design & Implementation

Data selection

The primary dataset we have selected is available here at SFGov’s database. Then, for the 1st goal of our project, it is still missing for the numeric data about the movie, so we utilized the OMDB API, which is an open source site that grab movie information from the IMDB (world’s largest movie database), to supplement the information. For the goal of plotting places on a map-based visual, it is most helpful to access latitude and longitude information, and we chose to use one of the world’s largest public supplier of geographical info, Google Place API.

Data cleaning and implementation

The primary language we used for ETL is Java and R, as the movie metadata need to be retrieved from elsewhere using APIs that can deal real-time requests; remove outliers of locations that are not San Fran; format the ambiguously described address into the input that can accept by Google Maps API in order to display them on the interactive global map. For visualization, we primarily used R , along with JavaScript that used to work with the Google developer’s interface for Motion Charts. We used R for processing the data as well as many of the visualization work. It is very intuitive to do the visualization directly after processing the data in one language, in order to realize our design ideas.

Documentation & future steps

The sources and approach can be further found at the project’s site’s documentation section.

In the future, we can apply our approach to more cities besides just in San Fran. We can even help to develop a greater tourism experience for people who feel that having the movies in life is inevitable!