From CS 294-10 Visualization Sp10

Jump to: navigation, search


Data Domain

With recent earthquakes in Haiti and Chile, I thought it would be interesting to visualize significant earthquakes that have occurred over the past 100 years. The primary source of data I found was the Centennial Earthquakes Catalog compiled by the USGS (http://earthquake.usgs.gov/research/data/centennial.php), which lists all earthquakes above 7.0 in magnitude, along with their year and location. I will also attempt to find more information on major earthquakes, such as death toll, but there doesn't appear to be too much information for older earthquakes.


The primary visual will be an interactive map, which can be panned and zoomed. Overlaid on the map will be a graphic representation of where an earthquake occurred. There is a lot of data because many earthquakes have occurred in close locations, so I think a good representation would be a circle whose radius reflects the magnitude of the quake. The map can also be filtered by a range of years and a range of magnitudes. The following mockup shows what the application might look like when zoomed in on a region:



I will most likely try using Processing for this, but may choose something more high-level like Protovis depending on which toolkit provides easier support for maps.

I went with Protovis

The application can be found here File:Earthquake.zip. Run earthquake.html. (This is a lot of javascript, so it might be a little slow depending on your computer)

Final Writeup

    • A brief description of your final interactive visualization application.

I created a straightforward webapp using Protovis, jQuery UI, and Google Maps. The initial display is a map of the world with earthquakes from 1970-2002 displayed on the map. Earthquakes are depicted as equal-sized, transparent-red dots, which maps area of high tectonic activity more apparent. When the users mouses over a dot, it enlarges and displays the year and magnitude. Users can also pan and zoom into the maps into areas of interest. There are two sliders at the bottom which let the users limit the ranges of years and magnitudes for earthquakes.

    • An explanation of changes between the storyboard and the final implementation.

There were not many changes in functionality, only in aesthetics. Here is a screenshot of the application:


    • Finally, please include a commentary on the development process, including answers to the following questions: Roughly how much time did you spend developing your application? What aspects took the most time?

This application turned out to be very simple using Protovis. The whole application took around 7 hours, most of the time was spent playing with Protovis. Initially, I had to get the data from Excel into a format usable by Protovis. I exported the XLS file to a CSV and then wrote a simple python script to convert the CSV into a javascript array which could be read in by Protovis. Then I had to do quite a bit of work figuring how to get Protovis to display the data as I wanted and make the dots interactive. Finally, I added the sliders which was simple as they are simple javascript.

[add comment]
Personal tools