CartoDB Fiesta

Fun with Torque

Torque maps animate Denver traffic accident data using CartoDB’s Torque library, which renders time-series point data as animated markers over a base map. The visualization cycles through 512 frames, with each frame aggregating accident counts per geotemporal bin via SQL aggregation functions like `count(cartodb_id)` or `CDB_Math_Mode(district_i)`. Marker size and opacity vary with frame offset to create motion trails, while categorical coloring uses CSS-like `[value=...]` selectors to distinguish districts. The example demonstrates multiple Torque configurations—category, bubble, discrete continuous, and static “Torque-Zero” modes—all driven by CartoCSS properties such as `-torque-frame-count`, `-torque-resolution`, and `-torque-aggregation-function`.

80% match

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.

71% match

CartoCSS for Animated Bubble Map

CartoCSS drives an animated bubble map of crime incidents, showing how event density changes over time. The visualization uses Torque’s time-based rendering with 72 frames over a 30-second duration, aggregating counts from the `fromdate` attribute. Bubble sizes scale progressively when aggregated values exceed thresholds (2, 8, 16), with an XOR composite operation blending overlapping markers. The map relies on CartoDB’s Torque API and CartoCSS styling, referencing `cartodb_id` for counting, while marker properties like fill color, line width, and ellipse shape are defined in the stylesheet.

71% match

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

70% match

Torque runtime example | CartoDB.js

This example displays a Torque animated map of Twitter data from the table `twitter_wowfakta`, showing cumulative point aggregation over time. It uses CartoDB.js with the Leaflet map API, initializing a map centered on Java with a Stamen toner basemap. The Torque layer is created via `cartodb.createLayer` with a custom CartoCSS template that sets cumulative aggregation, a marker width of 4 pixels, and a red fill color. The animation runs through the Torque runtime, which processes the data client-side to render temporal patterns.

Leaflet example | CartoDB.js

This example combines CartoDB.js with Leaflet to display a choropleth-style map of urban areas, overlaying vector polygons from a CartoDB SQL query. The map uses a Stamen toner tile layer as the base, with a CartoDB visualization layer added via `cartodb.createLayer`. The code enables hover interactions on the sublayer, showing a popup with the `area_sqkm` attribute, and separately renders simplified GeoJSON from the `ne_50m_urban_areas` table using `L.geoJson`. Mouseover events highlight polygons by changing their stroke color to red, while mouseout resets the style.

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.

iSchool GeoVisualization Workshop

This example shows a map of New York City traffic crashes, with each crash represented by a colored circle that indicates the type of severity (injury, fatality, or no injury). The map is built using Mapbox GL JS for the interactive basemap, while D3.js (v3) handles fetching the GeoJSON crash data and styling the circle layer’s color and radius. The circle size scales dynamically with zoom level, and Turf.js is loaded but not used in the visible code. The data comes from the `nyc_crashes.geojson` file hosted on GitHub.

MMartiHearst