Home - rochiecuevas/USGS-earthquakes GitHub Wiki
Introduction
The United States Geological Survey (USGS) Earthquake Hazards Programme provides real-time data about earthquakes. Today's Earthquakes maps the earthquake data collected by the USGS for the past 24 hours (updated every five minutes), and provides their magnitudes, significance, and depths.
This wiki details how Today's Earthquakes was built. But first, some pre-requisites to get the earth shaking.
Getting Started
Data on earthquakes from the past 24 hours is publicly available in JSON format through the USGS. This data contains coordinates for each earthquake, as well as information about its depth, magnitude, significance, time of occurrence, and location description (Fig 1).
Fig 1. Screenshot of the JSON-formatted data updated by USGS every five minutes
When visualising the earthquake data, ensure that the python server is running. To do so, follow the steps in Table 1.
Table 1. Steps in running the python server
| Step No. | Description | Code |
|---|---|---|
| 1 | Open index.html in Terminal | USGS-earthquakes rochiecuevas$ |
| 2 | Activate the virtual environment in Terminal | USGS-earthquakes rochiecuevas$ source activate PythonData |
| 3 | Activate the Python server | USGS-earthquakes rochiecuevas$ python -m http.server |
| 4 | Copy the http port activated by the Python server (http://0.0.0.0:8000/) to the address box of the Firefox internet browser |  |
Files
Four files are required to map the earthquakes and to add information about them in tooltips (Table 2). The image used in the hero section of the HTML was downloaded from the Loop T&T news article, though there were no details for attribution.
Table 2. File names and their descriptions
| File | Description |
|---|---|
| index.html | landing page containing two sections: (1) hero and (2) earthquake map |
| Resources/logic.js | Leaflet.js and D3.js used to get information from the JSON-formatted USGS data |
| Resources/config.js | not found in the repository (stored locally); contains the API key for Mapbox |
| Resources/style.css | formatting information for the HTML file |