From CS 294-10 Visualization Sp10

Jump to: navigation, search


Data Domain

The data domain we're using is places of interest in SF. This includes restaurants, movie theatres, shopping malls, tourist spots, etc that both newcomers and regulars would like to visit. Every place of interest comes with a name, an address, hours of operation and Yelp categorization. We plan to collect this data through Yelp's API.

Interactive Visualization Techniques

We plan to combine 2 methods of visualization, each intended for a different purpose. We will be using an interactive Google map with an overlay of data with filters to add and remove data. We will also be using a set of timelines to show hours of operation.


The goal of this visualization is to help plan and route a day trip chronologically by hour and order that physical space is traversed.

Since we will be showing the order that a user should visit each of the attractions that he wants to see, a map makes the most sense. The map will allow the user to get a sense of how far apart the various locations are. This also allows us to overlay more data on the graph, such as nearby attractions. This lets the user easily see what other attractions are nearby in the case that he is interested in adding more stops to his trip, such as another attraction or to get lunch/dinner/a snack. The filters on these additional locations will help the user quickly change what types of destinations he sees - restaurants, coffee shops, movie theatres, etc and what features are available - parking, wheelchair accessible, etc.

Our other big feature is to help the user plan out the trip chronologically based on the hours each attraction is open. Based on our past experience, we've found that scheduling a day trip consisting of many events that have different hours can be incredibly frustrating. So, we've used a simple slider representation of hours of operation that users can play with to come up with the optimal schedule for them.

Page 1

The visualization starts by having the user choose the day that he plans to go to SF and during what time. This will help us to limit destinations based on their hours of operation.

Page 1

Page 2

This page allows the user to choose all the destinations that he knows he needs to go to during his time in SF.

Page 2

Page 3

This is the results page that includes both the map and timeline visualizations. The map shows all the locations chosen by the user on the second page as well as a recommended path to visit them. The timeline shows a suggested schedule for the day and also displays the hours of operation for all the destinations the user chose, giving the user the freedom to change any of the times.

Page 3

Page 4

The user can click on any one of the locations on the map to learn more about it. The information is displayed in the bottom left pane.

Page 4

Page 5

The user can choose to add more landmarks onto the map based on categories. In this screen, the user chose to show all the restaurants, which can be seen in purple on the map.

Page 5

Page 6

The user can then filter the landmarks on the page based on the various filters shown in the top left pane. Here, we chose to restrict landmarks to those good for groups.

Page 6

Page 7

The user can then decide to add any of the additional landmarks to his plan for the day. That landmark will get added to the recommended path on the map as well as the timelines.

Page 7

Page 8

The user also has the capability to change the proposed schedule for the day. He does this by moving the sliders around on the timeline.

Page 8

Page 9

In this case, the user decides he wants to spend more time at Golden Gate Park and less time in Chinatown, which he represents by moving the slider appropriately to the left.

Page 9


We are planning to use Protovis for our implementation because it will allow us to overlay data on top of Google Maps such as in the Oakland Crimespotting example.

Final Implementation

Our application displays Yelp data on a map. The user can add locations to the map by selection categories s/he is interested defined by Yelp, such as Restaurants, Nightlight, Art and Entertainment. Users can then filter out the locations based upon rating. Users can click on the marker to gain more information about that particular location, such as the address and Yelp rating. The user can also click on "More Info..." to go to the actual Yelp site to read the reviews.

By using the Google API, we inherently get some great navigation features, such as zooming in/out and panning. We also included a drag zoom feature, which can be used by clicking on the magnifying glass on the upper left corner. This way, users have many tools to interactively view the data.

Changes between the Storyboard and Final Implementation

Our storyboard add way to many features to implement in one week. So we decided to choose a subset of those features to implement. We originally wanted to implement the time line, so that users can drag and drop locations into the scheduler. Based upon when the business was open, we would constrict the interaction. However, we realized the Yelp did not provide us the hours of operation. Also, Protovis did not support really heavy interaction with the visualization. We started to look at Prefuse, which had a better support for animation and interaction. But the data we needed wasn't there. Thus, we decided to focus on the Map portion of our original design.

We ended up removing the opening splash screens (Pages 1 and 2 of our storyboard.) We ended up having a lot less filters than we wanted due to the lack of Yelp data. We were only able to filter by ratings.

We decided not to add in the idea of creating a list of different locations and creating an itinerary due to the amount of time we had for this assignment.

We planned on using Prefuse down the road, thus we decided to work with Flex and ActionScript. However, we didn't end up using a visualization toolkit and just used the Yelp and Google Map API using Flex. If we knew this ahead of time, we would have worked with just JavaScript alone, since Google Maps API has a better support for that language.

Application and Source Code

Our application can be found here. Our source code can be found here. A screenshot of the application:

Division of Labor


Lita did most of the front end work. Out of the two of us, she became the expert on Flex and the Google Maps API. The following are the features she worked on:

  • Initial layout of the application. (Priyanka changed the categories layout later)
  • Creating the map
  • Adding/Removing markers within the map
  • Creating the appropriate event handlers for filtering and adding new locations
  • The pop-up window when a location is clicked
  • Drag Zoom feature on the map
  • Optimizing the map so it can handle more than 100+ markers without crazy slow-downs
  • Images and logic for ratings filter


Priyanka did most of the back end work, as well as any work with the data. She learned the Yelp API and wrote several scripts to correctly format the data and data elements in the visualization. The following are the features she worked on:

  • PHP script to scrape raw JSON data from Yelp
  • PHP script to parse JSON data and input into a data structure
  • Generating comprehensive list of categories
  • Initial version of Adding markers within the map (Lita changed the process later)
  • Created data structures used to store data and map markers
  • Logic for using custom icons on Google maps based on the category
  • Further subcategorizing of the data
  • New layout of the categories
  • Uploaded application and source code to server

Development Process

The development process had many ups and downs. Both of us had to learn ActionScript and Lita had to learn the Google Maps API. We spent 40 hours on this project.

Scraping raw data from Yelp was fairly easy, but massaging it into a usable format was very time-consuming. Since we had several hundred pieces of data, we didn't want to do anything manually, so we automated everything. Writing scripts to this was fairly time-consuming. In addition to formatting the data so it could be fed into the visualization, we had to generate other elements of the visualization (ie. category lists) based on the data we had. We didn't know the best way to display categories, so this step took several iterations.

Most of the remaining time went to debugging and learning Google Maps API. There is a limit on how many location queries you can do on Google Maps. Also, the locations sometimes took a long time to propagate. The Google Maps API server also was unreliable at times, causing us to debug longer than necessary. Also, we didn't realize how slow Google Maps can get with just over a 100 locations. So we found ways to optimize. There were some bugs with the Google Maps API we ran into, specifically with iterating through markers, but we found workarounds after a few hours.

[add comment]
Personal tools