Gist 11071111

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.

78% match

Gist 8240756

This visualization displays geolocated social media events as circular markers on a map, with color and size encoding event type and frequency. The primary map uses a simple white marker with red outlines, while the demo layer applies CSS Carto styling with category-specific colors for palm, logging, hunting, and mining activities. Marker sizes scale with event counts, and text labels overlay the counts directly. The visualization relies on CartoCSS properties like `marker-width`, `marker-line-color`, and `text-name`, with conditional rules adjusting marker dimensions for higher event thresholds.

76% match

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

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.

Gist 8393690

This visualization maps recent earthquake activity by plotting earthquake epicenters as colored markers on a geographic basemap. Each marker encodes magnitude and location, with point size and color reflecting the seismic strength of each event. The map is built using Leaflet.js with GeoJSON data from the USGS earthquake feed, and hovering over a marker reveals detailed metadata such as location name, depth, and time.

Aadkatrit

Gist bb974dcf54acc39a81cb60d79bf0aa5c

This example plots earthquake epicenters as points on a map using GeoJSON features. It renders the geographic coordinates with `d3.geoPath` and a map projection, while each point is positioned via `d3.forceSimulation` to avoid overlapping labels. The visualization shows five recent seismic events, with the primary ID as magnitude and the secondary ID as a location description. The code uses D3’s force-directed layout to spread the point markers, and the map background likely comes from a geographic shapefile or topojson layer, making the data immediately readable by region.

JJn1532

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

74% match

Gist 67fa3790166d6549f4a9

This interactive visualization pairs a large world map with a side panel, using D3’s `d3.forceSimulation` to scatter data points across geographic coordinates rendered via `d3.geoPath` and Canvas `getImageData` for pixel-level placement. The layout adapts responsively, and the code includes CSS themes for light or dark editorial styling, suggesting a map-based storytelling template.