Skip to content
The USGS Earthquake Hazards Program monitors and reports earthquakes, assesses earthquake impacts and hazards, and researches the causes and effects of earthquakes.This project visualizes the Real Time Earthquakes from USGS using D3 and Leaflet.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Earthquake Data Visualization

This independent project tries to visualize the earthquakes by utilizing the real time APIs provided by the United States Geological Survey. This project is created using Mike Bostock's JavaScript library for producing dynamic, interactive data visualizations in web browsers called D3. The project also makes use of Leaflet.js and Per Liedman's Leaflet Realtime.


United States Geological Survey Real Time API

GTD Logo

The United States Geological Survey is a scientific agency of the United States government. The scientists of the USGS study the landscape of the United States, its natural resources, and the natural hazards that threaten it.Earthquake Hazards Program. shares nformation on earthquake activity, earthquake science, and earthquake hazard reduction with links to news reports, products and services, educational resources for teachers, glossary, and current U.S. earthquake activity map.

Here are the list of real time APIs used for this project :-

1.Past One Hour -
2.Past One Day -
3.Past One Week -
4.Past One Month -

Real Time Animation

This part of the project makes use of several APIs to create an animation of earthquakes.For the maps this makes use of World Atlas TopoJSON ( , which generates TopoJSON files from Natural Earth’s vector data.A TopoJSON topology containing two geometry collections: countries and land, in this project only world.objects.countries is used.Within the callback of the d3.json for the world map,a d3.json call was used to the USGS API for all of the earthquakes in the last 24 hours.The earthquakes are represented using circles which are appended using geometry data and animated using their magnitude.Each quakeis assigned a new property of delay that is a number of seconds from the starting point that the earthquake happened.

This work is inspired from Anthony Skelton's D3.js Earthquake Visualizations (

GTD Logo

Real Time Marker Updates

This part makes use of Per Liedman's Leaflet Realtime ( which reads and displays GeoJSON from a provided source.This means Leaflet Realtime will poll for data, pulling it from the source. Here in this project the Leaflet Realtime is utilized to poll the USGS API every 60 seconds for data updates and updates the Open Street Map display accordingly. GTD Logo

Heat Maps Based on Periodic Data

Heatmaps are an excellent visualization tool. So in this project the Leaflet.js and its corresponding Heatmap Library( were used over Open Street Maps to achieve the desired results.It uses simpleheat under the hood, additionally clustering points into a grid for performance. In this project, based on the user input the heatmaps change. The Heatmaps makes use of the geographical data and magnitude( factored 5 times for impact). GTD Logo

You can’t perform that action at this time.