Homework #4: Accessing USGS Earthquake Data
Due: 10-02
Description
The US Geological Survey (USGS) provides earthquake monitoring data for the world on the web as a variety of web services. In this assignment, we'll be accessing that and providing a simple tabular view of the contained data. In subsequent assignments, we'll attempt to visualize this data on a map.
The data is provided in a variety of formats but we'll focus on using the GeoJSON data services. These services can be found their earthquake site at http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
Since we want to build a web page that uses this data, we'd like to access these services directly. Unfortunately, we can't do that as we'd be crossing origins
(e.g., from ours to the USGS website earthquake.usgs.gov
) and that will raise a security exception. If they had used
CORS, we could access the data directly.
A proxy service has been provided for you at http://io.milowski.com/usgs/
that will proxy to the USGS services and added the CORS-specific headers. This allows you
to access their data directly within the browser without additional server proxies. It also demonstrates how CORS works from a clien perspective.
Assignment
Create a single Web page that, on demand, will do:
- fetch the latest earthquakes in the last hour using the XMLHttpRequest object,
- display the resulting data in a simple HTML table.
You must:
- clear the table each time you fetch new data.
- provide a table column for each property.
You may use any JavaScript library you find useful and that includes jQuery. Otherwise, the UI design is up to you.
Data
All the various USGS pages are proxied for the complete path at
http://io.milowski.com/usgs/
. Thus, since the feed for the last hour is
http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson the
proxied version with CORS is http://io.milowski.com/usgs/earthquakes/feed/v1.0/summary/all_hour.geojson.
GeoJSON is fairly flat and the
features
property will give you a list of the features objects. Each of
these objects represents an earthquake and should be repsented by a row in your
table.
Keep in mind that the data you recieve must be parsed as JSON. You can do this by:
JSON.parse(request.responseText);
Finally, earthquakes happen all the time but if somehow you get an empty feature
collection, you can always switch to a different time period by changing the URI. The
last hour
feed was chosen simply because it contains limited amounts of data.
The data should all have the same properties.
What to Turn In
You must turn in your HTML document and all supporting JavaScript, CSS, and other resources necessary such that it runs for others.