Gist a61b3f54da810f6e9490

100%

Gist a61b3f54da810f6e9490

✓ Published0🌍 Public

Last edited Dec 13, 2014

Created on Dec 13, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Easy earthquakes

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`.

Aandrewxhill

78% match

Loading thumbnail…

Gist 11071111

This visualization maps global earthquake intensity using CartoDB’s CartoCSS styling. It shows point markers scaled by the `mmio` attribute (Modified Mercalli Intensity), with larger circles for stronger quakes and zoom-dependent width increases. The code applies marker properties like `marker-type: ellipse`, `marker-fill`, and `marker-comp-op: multiply` to blend overlapping points, while labels display intensity values at higher zoom levels via `text-name`. The example uses CartoDB’s tile rendering and CSS-like rules to style geographic data without JavaScript libraries.

Aandrewxhill

78% match

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

78% match

Loading thumbnail…

Gist 4354110

This visualization displays a map rendered with CartoDB, showing geographic data from a hosted visualization. The page loads a full-screen map using the CartoDB.js library, which initializes the map via `cartodb.createVis` and connects to a remote visualization URL. The map itself is embedded in a fixed-size `<div>` element and relies on CartoDB’s built-in rendering and tile services to draw the geographic layers. The code does not include custom data processing or interaction logic; it simply leverages the CartoDB API to present the pre-configured map.

Aandrewxhill

77% match

Loading thumbnail…

Gist 7c1efd9bdead734010b0

This tutorial demonstrates how to build interactive maps and animated visualizations of a cat’s GPS tracking data using CartoDB’s web interface, SQL, and CartoCSS. It shows point, categorical, and temporal bubble maps, including a Torque animation of Spencer the Cat’s movements over time. The code uses CartoDB’s SQL API with functions like `ST_MakeLine` and `date_part`, along with CartoCSS styling for markers. It also covers importing polygon building datasets from MassGIS and querying them with spatial operations like `ST_Distance` and `CDB_LatLng`.

Aandrewxhill

77% match

Loading thumbnail…

Gist 24e4e0ec42cdeff6633c

This example presents a promotional slideshow for CartoDB, a cloud-based mapping and data visualization platform. The presentation uses D3.js to animate text bullet points and an interactive map visualization, showcasing features like drag-and-drop data importing, real-time dashboards, and GIS analysis through PostGIS. The map rendering employs d3.geoPath to draw geographic boundaries, while the slideshow transitions through sections covering web development integration, team collaboration, and high-performance data processing on scalable infrastructure.

Aandrewxhill

76% match

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to visualize earthquake data from the USGS live GeoJSON feed on an interactive Mapbox-gl map. It plots the past day's magnitude 2.5+ earthquakes as points, with each point positioned according to its geographic coordinates. The map is built using Mapbox-gl and D3, showing how to integrate external GeoJSON data with a web-mapping library. The visualization provides a real-time view of global seismic activity, with earthquakes displayed as markers across the world map.

AAlan McConchie

74% match

Loading thumbnail…

Node.js app to harvest a georss feed into CartoDB

A Node.js app harvests live GeoRSS incident reports from Portland’s 911 feed and inserts new records into a CartoDB table. The animation shows a continuously updating map of emergency locations as fresh entries are parsed from XML using `xml2js`, then posted via CartoDB’s SQL API with `http.request`. Each feed item’s title, timestamps, category label, and point coordinates are extracted and formatted into an SQL `VALUES` insert, skipping duplicates. The process runs repeatedly, appending visible points to the map over time.

Aandrewxhill

74% match