https://github.com/fbarffmann/leaflet-challenge
Mapped 1,000+ real-time earthquakes with Leaflet.js using USGS API. Visualized depth and magnitude using size and color-coded markers.
https://github.com/fbarffmann/leaflet-challenge
api d3 data-visualization earthquakes geojson geospatial-mapping javascript leaflet usgs
Last synced: 10 days ago
JSON representation
Mapped 1,000+ real-time earthquakes with Leaflet.js using USGS API. Visualized depth and magnitude using size and color-coded markers.
- Host: GitHub
- URL: https://github.com/fbarffmann/leaflet-challenge
- Owner: fbarffmann
- Created: 2024-08-07T16:06:31.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-04-13T16:17:07.000Z (11 days ago)
- Last Synced: 2025-04-14T13:17:16.988Z (10 days ago)
- Topics: api, d3, data-visualization, earthquakes, geojson, geospatial-mapping, javascript, leaflet, usgs
- Language: JavaScript
- Homepage:
- Size: 4.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Leaflet Earthquake Visualization
Built an interactive map using Leaflet.js to visualize all earthquakes worldwide from the past 7 days, using real-time data from the USGS Earthquake GeoJSON Feed. Mapped over 1,000 earthquakes with marker size representing magnitude and color indicating depth.
## Tools & Technologies Used
- JavaScript
- Leaflet.js
- d3.js
- GeoJSON API (USGS)
- HTML/CSS
## File Structure
```text
Leaflet-Part-1/
├── index.html # Base HTML for map
├── static/
│ ├── js/logic.js # Core mapping logic with marker styling
│ └── css/style.css # Custom map styling
Images/
├── [PNG, GIF] project screenshots and visual references
```
## Skills Demonstrated
- Mapping geospatial data using Leaflet.js and GeoJSON
- Dynamic visual encoding of multiple data attributes
- Consuming and visualizing API data in JavaScript
- Building a live-updating, user-friendly dashboard
## Key Findings
- Visualized over 1,000 earthquakes recorded globally in one week.
- Earthquake magnitudes ranged from 0.5 to 7.6+ and were dynamically sized on the map.
- Depths were categorized and color-coded into 6 bands ranging from less than 10 km to over 90 km deep.
- Implemented a legend to improve interpretability of visual encodings.