Mapping Earthquakes

This project focused on the application of web designing and visualization software, such as HTML-CSS-JavaScript, Leaflet, and Mapbox, and how we leveraged their useful functions for performing in-depth data analytics and visualizations.

Table of Contents

• Overview of Project
  • Resources
  • Challenge Overview
• Web Designing, Customization, and Analysis Results
  • Deliverable 1: Add Tectonic Plate Data
  • Deliverable 2: Add Major Earthquake Data
  • Deliverable 3: Add an Additional Map
• Summary
• Future Work
  • 2023 Southern Turkey Earthquake
  • 2023 Western Morocco Earthquake
• References

Overview of Project

This project and Module 14 assignment focused on cultivating knowledge and skills of web designing and data analysis through some rigorous exercises for further understanding the concepts of integrating HyperText Markup Language (HTML), Cascading Style Sheet (CSS), JavaScript (JS), Leaflet (open source JS library for mobile-friendly interactive maps), and Mapbox (open source mapping libraries and applications) programs for building a dynamic and interactive webpage with optimized content, functionality, usability, and user experience. We then applied our knowledge and core skills to our webpage, perform in-depth analysis for mapping earthquakes in relation to the Earth's tectonic plates, adding multiple overlay objects, and adding other map elements. We have also learned how to implement the GitHub flow that allows us to collaborate on projects.

Resources

• Source code: challenge_logic.js, style.css, index.html.
• Source data: USGS Past 7 Days All Earthquakes, USGS Past 7 Days M4.5+ Earthquakes, GeoJSON/PB2002_boundaries.json.
• Image file: jpg/png files
• Software: HTML: HyperText Markup Language, CSS: Cascading Style Sheet, JavaScript reference, Leaflet, Mapbox Styles API, Chrome DevTools, Data-Driven Documents (D3), GitHub.

Challenge Overview

Outline of our deliverables and a written report for presenting our results and analysis summary:

• ☑️ Deliverable 1: Add Tectonic Plate Data.
• ☑️ Deliverable 2: Add Major Earthquake Data.
• ☑️ Deliverable 3: Add an Additional Map.
• ☑️ A Summary on how to create the earthquake map with multiple layers and maps (this "README.md").

Web Designing, Customization, and Analysis Results

By using several web designing tools, such as HTML, CSS, JavaScript, Leaflet, Mapbox Maps, and Chrome DevTools, we were able to design and integrate maps for visualizing earthquakes that lets users explore the earthquake databases from U.S. Geological Survey (USGS)). We have incorporated some best practices when designing a website, which include enhanced user-friendly overlay selections, various map backgrounds, and map legend, good usability, and user experience.

Customization and Optimization

The refactored JS code and screenshots of our webpage can be referred in challenge_logic.js and Fig. 1–4. Some optimized settings, simplified variable definitions, and efficient functions that I used for mapping earthquakes efficiently are summarized below.

• common color settings and ternary operators for both legend and marker based on magnitude were used instead of setting them manually, which saved at least 10 lines of coding while maintaining our high quality deliverables, for instance:

  // Set common color settings for both legend and marker based on magnitude
  const colors = [
    '#98ee00',
    '#d4ee00',
    '#eecc00',
    '#ee9c00',
    '#ea822c',
    '#ea2c2c'
  ];
  

    // This function determines the color of the marker based on the magnitude of the M4.5+ earthquakes
    function getColor(magnitude) {
      idx = magnitude > 6 ? 5 : (Math.ceil(magnitude) - 2);
      return colors[idx];
    }
  

• retrieving USGS Past 30 Days All Earthquakes and USGS Past 30 Days M4.5+ Earthquakes would let better understanding of where most earthquakes occur. The data let us observe a clear relationship between the locations of earthquakes, especially those M4.5+ earthquakes, and the Earth's tectonic plates.

• all background maps were selectable in addition to Streets, Satellite Streets, or Dark.

Fig. 1 outlines the design and layout of our webpage, which includes selectable layers, overlays, and a static legend with color scales representing the magnitude scales.

Fig. 1 Mapping Earthquake webpage.

Deliverable 1: Add Tectonic Plate Data

Several map layers and two overlays (Tectonic Plates and Earthquakes) were added to the streets background map as illustrated in Fig. 2.

Fig. 2 Mapping all earthquakes with selectable layers and overlays on the Streets background.

Deliverable 2: Add Major Earthquake Data

Several map layers and two overlays (Tectonic Plates, Earthquakes, and Major Earthquakes) were added to the streets background map as illustrated in Fig. 3.

Fig. 3 Mapping major earthquakes with selectable layers and overlays on the Streets background.

Deliverable 3: Add an Additional Map

Several map layers and two overlays (Tectonic Plates, Earthquakes, and Major Earthquakes) were added to the dark background map as illustrated in Fig. 4.

Fig. 4 Mapping all earthquakes with selectable layers and overlays on the Dark background.

Summary

All deliverables have been designed and developed according to the assignment requirements, including well optimized functionality, better usability, validation of some additional features, and effective code refactoring. Using USGS Past 30 Days M4.5+ Earthquakes would let us better understand where most earthquakes occur. The overlay map in Fig. 3 reconfirms that most major earthquakes, especially those M4.5+ earthquakes, occur along the tectonic plates or the fault lines where tectonic plates meet, which had been scientifically reported in other studies (e.g. USGS FAQs).

Future Work

All earthquakes and all major M4.5+ earthquakes occurring in the past 7-days can also be added in addition to Tectonic Plates, Earthquakes, and Major Earthquakes overlays. Earthquakes Past 7-Days and M4.5+ Past 7-Days overlays are currently disabled by default unless users enable them after loading the webpage.

2023 Southern Turkey Earthquake

On February 6, 2023 (UTC) a major earthquake was recorded around the southern part of Turkey. The epicenter of the quake was about 26 km east of Nurdağı, Turkey, and the powerful and shallow quake severely devastated the southern areas of Turkey. More detailed information about the M7.8 earthquake that struck the southern areas of Turkey in early February 2023 can also be found in USGS.gov featured story about Turkey earthquake.

• Magnitude at the epicenter: M7.8
• Location: about 26 km east of Nurdağı, Turkey
• Depth of the epicenter: about 17.925 km
• Date/Time: February 6, 2023, around 01:17:35 UTC

Fig. 5 Mapping major earthquakes that were recorded in the past 7 days and displayed on the Streets background.

Fig. 6 Mapping major aftershocks that were recorded in the past 7 days and displayed on the Satellite-Streets background.

Fig. 5–6 illustrate when both Tectonic Plates and M4.5+ Past 7-Days overlays were selected and displayed on a specified background map.

• Fig. 5 shows the heartbreaking and devastating earthquake of M7.8 that struck Turkey on February 6, 2023 at around 01:17:35 UTC.
• Fig. 6 shows the devastating aftershock of M6.3 that subsequently struck the southern Turkey areas on February 20, 2023 at 17:04:29 UTC.

2023 Western Morocco Earthquake

On September 8, 2023 (UTC) another devastating earthquake was recorded around the western part of Morocco. The epicenter of the quake was about 18 km west/southwest of Oukaïmedene, Morocco. Although the magnitude scale of this M6.8 quake was not as bad as that of the southern Turkey earthquake, the strong and shallow quake again caused severe damage and death toll throughout the southwest region of Morocco. More detailed information about the M6.8 earthquake that hit the western/southwestern region of Morocco in early September 2023 can also be found in USGS.gov featured story about Morocco earthquake.

• Magnitude at the epicenter: M6.8
• Location: about 54 km west/southwest of Oukaïmedene, Morocco (southwest of Marrakesh/Marrakech)
• Depth of the epicenter: about 18 km
• Date/Time: September 8, 2023, around 22:11:01 UTC

Fig. 7 Mapping major earthquakes that were recorded in the past 7 days and displayed on the Streets background.

---

Fig. 8 From left to right: (a) Epicenter of the major M6.8 earthquake that struck the western part of Morocco, (b–c) Mapping major aftershocks of magnitude scale > M4.5 that were recorded in the past 7 days and displayed on the Satellite-Streets background.

---

Fig. 7–8 illustrate when both Tectonic Plates, Major Earthquakes, M4.5+ Past 7-Days and Earthquakes Past 7-Days overlays were selected and displayed on a specified background map.

• Fig. 7 shows the shallow and devastating earthquake of M6.8 that struck Morocco on September 8, 2023 at around 22:11:01 UTC.
• Fig. 8 shows several aftershocks of magnitude scale > M4.5 that subsequently rocked western/southwestern Morocco on Feb 8, 2023 at 22:30:42 UTC and Feb 14, 2023 at 05:53:16 UTC.

References

HTML: HyperText Markup Language
CSS: Cascading Style Sheet
JavaScript reference
Leaflet
Mapbox Styles API
Chrome DevTools
Data-Driven Documents (D3)
HTML HEX Colors
GitHub Docs - GitHub flow
USGS FAQs
USGS.gov featured story about Turkey earthquake
USGS.gov featured story about Morocco earthquake