View Full Project Write-Up

Earthquake Visualization Over Time

Select Time Period: Past Hour Past Day Past Week Past Month

Project Write-Up: Earthquake Visualization

This project combines real-time data visualization and web mapping to explore global seismic activity using data provided by the USGS Earthquake Hazards Program API. The final product is a browser-based interactive dashboard that displays recent earthquakes alongside dynamic charts, allowing users to visualize magnitude, frequency, and depth trends based on a selected time frame.

Tools & Technologies Used

• Leaflet.js – For rendering the interactive map and displaying earthquake locations using circle markers.
• Chart.js – For generating three charts: a line chart of magnitude over time, a bar chart of magnitude frequency, and a scatter plot showing depth vs. magnitude.
• GitHub Pages – For static site hosting and version control.
• USGS Earthquake API – For retrieving real-time GeoJSON data on earthquake events globally.
• Jekyll (Minima Theme) – For site generation and layout styling.

Process & Implementation Steps

1. Set up the GitHub Pages repository using a Jekyll-based theme with a dark visual design and orange accents.
2. Created a responsive layout with an HTML structure for map display and data charts, styled with embedded CSS.
3. Integrated Leaflet.js to initialize a zoomable world map and populated it with real-time earthquake markers based on magnitude and depth.
4. Added Chart.js visualizations above the map to track temporal and spatial trends in earthquake characteristics.
5. Implemented a shared drop-down menu that triggers both map updates and chart updates depending on the selected time window (past hour, day, week, or month).
6. Used `fetch()` to call the USGS GeoJSON feed, parsed the results, and dynamically updated the charts and map markers using JavaScript.

Code Snippet Examples

Fetching Earthquake Data:

fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson')
  .then(response => response.json())
  .then(data => {
    // parse and visualize data
  });

Adding a Leaflet Marker for Each Earthquake:

var marker = L.circleMarker([lat, lon], {
  radius: magnitude * 3,
  fillColor: "#ff7800",
  color: "#000",
  weight: 1,
  fillOpacity: 0.8
}).bindPopup(`Magnitude: ${magnitude}<br>Location: ${place}`);

Creating a Chart.js Line Chart:

new Chart(ctx, {
  type: 'line',
  data: {
    labels: times,
    datasets: [{
      label: 'Magnitude Over Time',
      data: magnitudes,
      borderColor: 'orange',
      backgroundColor: 'grey',
      fill: false
    }]
  }
});

Outcome

The final product delivers a user-friendly interface for exploring earthquake activity across different time windows. It offers real-time insights, improves data accessibility, and visually communicates seismic trends with clarity. The combined use of web mapping and interactive charts makes this project both informative and engaging.