CSC220 Final Project 2010

From CSclasswiki
Jump to: navigation, search


This project involves gathering mobile phone-generated GIS files, in KML format, storing these files in a database, and generating a visualization of the paths. The GIS files can be gathered in several different ways: using the Walkmeter 4.0 iPhone app, using other apps created for different cell phone operating systems, or using a GPS unit (borrowed from Jon Caris). The visualizations will be generated using either Google Maps or Processing.

Some similar works have been done in Processing: Muni vehicle movement (San Francisco) , Cabspotting in San Francisco and Just Landed - 36 Hours. A gallery of animation Processing projects can also be found here.

  • Who is involved in this project?
    • Students from CSC 220:
      • Team Make: Aigerim, Elizabeth, Katie, Millie
      • Hot Team: RB, Julia P., Amy, Lindsey
      • Team Rain: Julia B., Kristjan
      • Betsy and Alex Team: Betsy, Alex
    • Wiki maintainer and editor: Alex
    • Consultant and GIS specialist: Jon Caris
    • CSC 220 professor: Dominique Thiebaut

What is GIS and KML?

GIS (Geographic Information System) files are a standard way of recording geographical information into a file. The files that we are using in this project are in KML format, short for Keyhole Markup Language. KML is "an XML schema for expressing geographic annotation and visualization within Internet-based, two-dimensional maps and three-dimensional Earth browsers" (source). KML was originally developed for use with Google Earth. Each KML file has a set of features, such as name, description, coordinates, etc. What is important for this project will be the coordinates in each KML file. The coordinates will specify where on Smith campus (or perhaps off-campus), the student has travelled. Using these coordinates, we generate a visualization of the students' paths using either Google Maps via Processing.

Examples of Interest

Google Maps and Google Earth: Since Google Maps/Earth already has the latitude/longitude values for each location stored, Google is able to directly map the coordinates of the KML file directly onto a map, showing the path the student took. Processing: "Processing is an open source programming language and environment for people who want to create images, animations, and interactions" (source). Using Processing for this project involves mapping the coordinates of the KML file onto an image of a map.

Example Name Visualization
Google Maps: Simply go to Google Maps, and enter in the link to a KML file in the search bar, Google Maps will automatically highlight a path on the map for you, indicating start and end points.

Image to the right generated by Google Maps using one of the paths in our database.
Google Earth: A download of Google Earth lets you import KML files into this application, and animates path on a satellite image.

Video to the right provided by Jon Caris, GIS Specialist at Smith College.
GPS GPX Interactive Map: "The GPS GPX Interactive Map allows one to view GPS information as one travels it. Upload a file and take a look." Play with the map! Note: You will need a GPX file.
Aaron Koblin: Aaron Koblin has a wealth of Processing visualizations that are located on this page to save space. His work is great! For purposes of this project, this is more of a "path" type of visualization.

Image to the right is "Data from the U.S. Federal aviation administration is used to create animations of flight traffic patterns and density."

Flight path visualization - global departures: This is "a visualization of globally departing flights and their destinations". This visualization assumes that all flights fly in a straight line, and that all flights depart and arrive at the same time. The flights change from orange to yellow as they near arrival. For purposes of this project, this is more of a "path" type of visualization.
Worldwide population density by city: This is a visualization of the population density by city in the entire world. For purposes of this project, this is more of a "hot spots" type of visualization.
Just Landed - 36 Hours: "This piece looks for tweets containing the phrases 'just landed in...' or 'just arrived in...'. Locations from these tweets are located using MetaCarta's Location Finder API. The home location for the traveling users are scraped from their Twitter pages. The system then plots these voyages over time."
Map of Where Tourists Flock: Bluemoon Interactive's work "maps touristiness, based on uploads to Panoramio, a site where people share photos of their favorite places."
Bus Movements in San Francisco: Eric Fischer's work in animation of San Francisco's MUNI (bus system) movement in June 2010. What he used to animate is unknown. See Bus Movements in San Francisco video
Picture Locations of Major Cities of the World: Eric Fischer's work in visualizing where people take photos in major cities of the world. He obtains photo locations from the Flickr and Picasa search APIs.

Image to the right an example of the photo locations in San Francisco generated by Eric Fischer.

Race and ethnicity mapped by block: Eric Fischer's work in visualizing where specific races and ethnicities live in big cities.

Image to the right an example of race and ethnicity in Boston generated by Eric Fischer.

GeoCommons: "GeoCommons enables everyone to find, use and share geographic data and maps. Easily create rich interactive visualizations to solve problems without any experience using traditional mapping tools."

Image to the right an example of a GeoCommons map showing Tweets around Silver Spring During Discovery Channel Hostage Situation.

uTrack: An online GPX track report generator. Play with uTrack! Note: You will need a GPX file.
swinglet CAM: "The swinglet CAM, is a safe and easy-to-use flying camera. It takes high-resolution pictures automatically based on user-defined GPS waypoints. It will be your eyes in the sky."
Modest Maps: "Modest Maps is a BSD-licensed display and interaction library for tile-based maps in Flash (ActionScript 2.0 and ActionScript 3.0) and Python. Our intent is to provide a minimal, extensible, customizable, and free display library for discriminating designers and developers who want to use interactive maps in their own projects."

Image to the right an example of a Modest Maps map showing AC Transit's Oakland route map.

Polymaps: "Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers."

Image to the right an example of a map created using Polymaps depicting photo locations using geotagged photos on Flickr. Full-resolution map.



Team Make: Processing with Animation

  • Goal: Inspired by the visualizations done by using Processing, ourgroup will take traces gathered on the Smith College campus and display them statically and dynamically to create an artistic representation of data. Using the web application developed with the class, users will be able to select the type of data they would like to view, allowing the users to become an artistic participant.The types of data are the categories that the first time users specify at registration, such as major, class year/affiliation, phone type, interests, etc. Our aspiration is to display multiple animated traces in an aesthetically pleasing way.
  • Team members: Aigerim, Elizabeth, Katie, Millie
  • Wiki page: Processing with Animation

Hot Team: Processing with Hot Spots

  • Goal: To use processing to create an image where students' paths overlap and create "hot spots" of where students tend to hang out on campus. Final product could also reflect most-traveled paths, and perhaps be able to distinguish the "hot spots" by major, interest on campus, etc.
  • Team members: RB, Julia P., Amy, Lindsey
  • Wiki page: Processing with Hot Spots

Team Rain: Google Maps

  • Goal: We will utilize the Google Maps API to display KML track data. The tracks can be displayed on a web page using a Google Maps applet. JQuery and AJAX commands allow for a user to view tracks based on demographic data such as the major and year of the student creating the track. A checklist can be used to display multiple tracks at the same time.
  • Team members: Julia B., Kristjan
  • Wiki page: Google Maps

Betsy and Alex Team: Path Intersections and Synthetic Traces

  • Goal: Given two paths, figure out where the paths intersect between points, and generate synthetic traces with these intersection points.
  • Team members: Betsy, Alex
  • Wiki page: Path Intersections and Synthetic Traces



Subject to change.

  • Wednesday, November 17: Work in groups in class.
  • Friday, November 19: Homework 8 (basic data processing) due.
  • Monday, November 22: Have data-generating (via email) able to go live.
  • Wednesday, November 24: Thanksgiving Break.
  • Monday, November 29: C++ crash course.
  • Wednesday, December 1: Group work in class.
  • Monday, December 6: C++ crash course.
  • Wednesday, December 8: Group work in class.
  • Monday, December 13: Last class -- Present project!


Presentation Page
Presentation Outline

Overall Project Organization



Typical User Experience

  1. User goes to registration page and registers an account. Registration form takes all information entered and enters it into the database.
  2. User uploads one or more KML files to the database. KML upload form takes all information entered and enters it into the database.
  3. User goes to display page to see display of graphs and has a choice of different types of graphs to see:
    • Map displaying specific track: animation, static
    • Map displaying specific category: animation, static
    • Google Maps/Earth rendition
    • Map displaying synthetic traces/intersections for two paths


  • Registration Form: This form should take in user information, and store it in a database. Once the user "registers" on this form, they will be able to upload KML files to the database, and we will be able to use the information provided to display specific map characteristics on the final visualization. Details here.
  • KML File Upload Form: This form should take in the user's email address and KML data, and store it in a database. Once the user uploads this data, the final visualization should be able to use the data and display it. Details here.
  • Display Form: This form should take in what the user would like to see on the visualization. Once the user submits this form, the appropriate visualization will be displayed on the next page. Details here.


This project uses MySQL to query databases for data, and PHP programs to get the information from the database. The database is used for registering new users, validating users and returning and feeding KML files and data to the visualization. The details of the tables found in the database are blow.

Webpages Involved

This chart shows how the different forms and visualizations are interconnected. This chart only specifically displays the visualizations from Team Make and the Hot Team. The user starts at the index page. The registration and upload pages are forms for the user to fill out, and the selection page is the gateway to the visualizations of the data. Webpages.jpg

Page maintained by Alex