Skip to main content
100%

Easy earthquakes

✓ Published0🌍 Public
Aandrewxhill
Last edited Feb 6, 2013
Created on Feb 6, 2013

A user’s geolocation triggers a real-time map animation of earthquakes, shown as expanding colored circles on a dark Mercator projection of world borders. The visualization pulls geographic data from CartoDB via SQL queries, using `cartodb.SQL` to fetch user locations and map features, while D3.js renders SVG paths and animated circles. Circle color encodes earthquake category through a logarithmic scale, and each pulse expands and fades over two seconds before repeating, with zoom and pan supported via `d3.behavior.zoom`.

AI-generated description

Similar vizzes

Loading thumbnail…

Easy earthquakes

The visualization animates a chronological sequence of earthquakes on a world map, with each quake appearing as a red circle that expands and fades based on its magnitude. It shows earthquake locations and relative strengths over time, looping through the dataset repeatedly. The map uses a d3.geo.mercator projection with d3.geo.path to render world borders from CartoDB’s SQL API, while earthquake data is fetched via `cartodb.SQL` and drawn as SVG circles with d3 transitions. Zooming and panning are enabled through `d3.behavior.zoom`.

Aandrewxhill
93% match
Loading thumbnail…

Easy earthquakes

A sequence of earthquakes is animated as expanding red circles on a world map, with each circle's final size proportional to its magnitude. The visualization first renders country borders from CartoDB's `d3_world_borders` table using `d3.geo.mercator` and `d3.geo.path`, then queries earthquake data via `cartodb.SQL` and plays them in chronological order. Each quake circle grows over two seconds via D3 transitions, fading out before the next appears, while `d3.behavior.zoom` allows pan and zoom on the SVG.

Aandrewxhill
91% match
Loading thumbnail…

draft earthquake data

This visualization uses earthquake data from a USGS dataset to map seismic events by location and magnitude on a world map. Each earthquake is represented as a circle, with its size scaled by magnitude and its position determined by latitude/longitude coordinates. The depth of the quakes is encoded through color, creating a gradient from shallow to deep events. The map is rendered with SVG paths for continents, and a custom tooltip provides details on click or hover. Circles are drawn with D3's data-join and scaled using a linear magnitude scale, while the map projection and graticule are set up with D3's geo utilities. The visualization highlights the global distribution and intensity of recent seismic activity, with Nepal, Japan, and the South Pacific clearly standing out.

BBenHeubl
80% match
Loading thumbnail…

Gist c91b7cdf3a65a705ef48

This example visualizes earthquake activity using a force-directed particle layout. Each circle is an earthquake, positioned by its longitude and latitude and scaled by magnitude; the particles are animated with a gentle jitter to reveal clustered events. The visualization is rendered with D3 v3 using SVG, mapping the `data.csv` fields—such as depth, magnitude, and location—to visual variables. A shared timeline and smooth transitions help the user explore the relationship between location, time, and earthquake strength across the dataset.

BBenHeubl
79% match
Loading thumbnail…

Earthquake Map

This map visualizes global earthquakes using D3.js, plotting each event as a colored circle on a dark equirectangular projection. Circle size and color encode earthquake magnitude, with the data sourced from a CSV file of USGS earthquake records. The map employs an SVG rendering and includes a polar fisheye distortion effect, initially centered on Japan, that magnifies the map around the cursor's position. The fisheye implementation uses D3’s projection and custom fisheye.js, with event handling throttled for performance.

PPhilippe Rivière
79% match
Loading thumbnail…

Untitled

This example visualizes earthquake locations using a global map rendered with D3’s `d3.geoPath` and `d3.geoOrthographic` projections. It plots seismic events as circles whose size and color encode magnitude, with a color scale from `d3.scaleSequential`. The visualization updates over time by cycling through timestamped data, using `d3.transition` to animate circle radius changes. It relies on the TopoJSON world atlas for geographic boundaries and fetches earthquake data from a local CSV file.

Ddevansh1407
78% match
Loading thumbnail…

Gist a61b3f54da810f6e9490

This example demonstrates how to map and animate earthquake data from the USGS CSV feed using CartoDB’s mapping tools. It shows temporal earthquake occurrences through an interactive map, with points updating over time. The code relies on CartoDB’s SQL API and JavaScript library for layer management, alongside D3.js for data-driven visualizations. It also integrates Chart.js for supplementary graphs and uses dynamic styling via CartoDB’s tile rendering. The visualization highlights both spatial distribution and time-based animation of seismic events.

Aandrewxhill
78% match
Loading thumbnail…

Ver3 Earthquakes (past 30 days)

This visualization displays global earthquake activity from the past 30 days on an interactive world map. Circles are positioned using a D3 geoEquirectangular projection, with circle size encoding earthquake magnitude. Color encodes depth, with red for shallow (<70km), green for intermediate (70-300km), and blue for deep (≥300km) earthquakes. The map also shows country boundaries, graticules, and tectonic plate boundaries. Users can click any earthquake circle to open its USGS details page in a new tab, or pan and zoom using the d3.zoom() interaction. Additional brush-based zooming is implemented to allow for more intuitive exploration of the data.

Llingjizhu@gmail.com
78% match