Skip to main content
100%

Torque runtime example | CartoDB.js

✓ Published0🌍 Public
Aandrewxhill
Last edited Sep 29, 2014
Created on Sep 29, 2014

This example shows animated air quality data for Beijing, with circles varying in size and color according to hourly nitrogen dioxide (NO₂) values. The map uses a Torque layer from CartoDB.js to render time-series points over a Stamen Toner basemap, with cumulative aggregation over a single frame. The CartoCSS template defines the visual scaling and color thresholds, while the Leaflet map API centers the view and handles tile loading.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

Aandrewxhill
85% match
Loading thumbnail…

Torque runtime example | CartoDB.js

This example shows the movement of Twitter messages across a map of Java, Indonesia, using a Torque animation over a Stamen toner tile layer. The visualization renders an arrow marker for each data point, with color intensity varying by the cumulative count of messages at each location. The code builds the map with Leaflet and CartoDB.js, applying a custom CartoCSS template that defines the torque frame count, aggregation function, and marker styling. Data comes from the "twitter_wowfakta" table hosted on the "andrew" CartoDB user account.

Aandrewxhill
82% match
Loading thumbnail…

Torque runtime example | CartoDB.js

A Torque map from CartoDB.js animates the movement of a monkey across a world map over 19 time frames. The code creates a Leaflet map centered on the equator, adds a Stamen toner tile layer, and loads a torque layer from the `monkey_jump` table on the `andrew` user account. The torque visualization uses custom CartoCSS to aggregate points by `count(cartodb_id)` with a linear data aggregation, rendering the path as red markers on a lighter blend over two seconds.

Aandrewxhill
79% match
Loading thumbnail…

Gist d7a736227751a4a49072

This example demonstrates Torque, a CartoCSS compiler that renders animated point data directly on HTML canvas in the browser, bypassing server-side Mapnik processing for responsive visualizations. The code shows how CartoCSS rules are translated into canvas drawing instructions, with markers rendered efficiently using Sprites generated at runtime. It includes static torque maps, animated bubble maps that change size over time, and a non-map visualization, all leveraging the Torque library’s shader and cartocss_reference.js APIs. The approach keeps data client-side, enabling fast, interactive rendering of temporal geospatial data.

Aandrewxhill
78% match
Loading thumbnail…

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

Aandrewxhill
77% match
Loading thumbnail…

Gist a81c267615bde4d028ee

This visualization shows the geographic distribution of alternative fuel stations as of April 4, 2012, using a temporal heat map. The CartoDB Torque library animates the points over ten seconds, aggregating station counts per cell with a linear data aggregation function. The code applies a `colorize-alpha` image filter to markers, transitioning from red through blue based on density, while frame offsets increase marker width and reduce opacity to create a motion trail effect. The map uses static marker images from an Amazon S3 asset and relies on Torque’s time-based rendering to reveal spatial clustering over time.

Aandrewxhill
73% match
Loading thumbnail…

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.

Aandrewxhill
72% match
Loading thumbnail…

Gist 10926650

This map animation shows weather anomaly outliers from 1964, with markers transitioning between white and red based on average temperature type values over 1024 time frames. The Torque visualization library (carto.css) animates the data chronologically using the date_str attribute, while marker size and opacity trail behind each frame through frame-offset styling. Data aggregation applies linear interpolation to smooth the temporal transitions across the 120-second animation duration.

Aandrewxhill
72% match