In this classwork example I use Leaflet API to populate a geographical map with GeoJSON earthquake data that originates from a website.
I created an informative and easy to use interactive map to display GeoJSON earthquake data for "Disaster Reporting Network", a nonprofit company that provides data driven storytelling on disasters around the world. Using Javascript and CSS styling, a desktop and mobile friendly website is created. D3.js library is used on a Mapbox map through Leaflet API.
- Earthquakes with higher magnitudes will appear larger and will have darker colors
- You can click each earthquake for more information
- Earthquakes will be mapped across the whole world, wherever there is data available.
- There are 3 clickable layers available to show Earth's: (1) all earthquakes in the last 7 days, (2) tectonic plates, and (3) major earthquakes above a magnitude of 4.
- There is a legend to show the scale of magnitude vs. color
The interactive map is intended to help data reporters, analysts, and individuals visually identify trends in disasters and disaster reporting. The differences in magnitudes of earthquakes all over the world will be mapped for the last seven days.
These screenshots were taken on 12/28/2022 from the earthquake_challenge index.html website:
All earthquakes in the last 7 days map
Major earthquakes in the last 7 days map
All earthquakes in the last 7 days dark version map