Skip to main content
100%

CartoCSS for Animated Bubble Map

✓ Published0🌍 Public
Aandrewxhill
Last edited Dec 9, 2014
Created on Dec 9, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

CartoDB + D3 Bubble Map

A bubble map renders world borders and populated places on a blue SVG canvas, with city markers animating from random positions to their geographic coordinates. The visualization combines CartoDB’s SQL API (fetching GeoJSON from `d3_world_borders` and `d3_populated_places`) with D3’s `d3.geo.mercator` projection and `d3.geo.path` for borders. City circles scale by population, and clicking a marker displays its name via SVG text. A `d3.behavior.zoom` handler enables panning and zooming through SVG transforms.

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
77% 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
74% match
Loading thumbnail…

Torque runtime example | CartoDB.js

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.

Aandrewxhill
72% match
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
72% 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
71% match
Loading thumbnail…

Airship, CARTO.js and HighCharts Example

This example combines CARTO.js, Leaflet, Airship, and Highcharts to create an interactive crime-map dashboard. The map displays crime locations over a Voyager basemap, while a sidebar shows the total number of crimes and a bar chart of crime types. Clicking a bar in the Highcharts chart filters the mapped data by that crime type, and a “Clear” link resets the query. The code uses the `carto.Client` API for data layers, Leaflet’s `L.map` and tile layers, and Highcharts’ `Highcharts.chart` with bar series.

Aandrewbt
71% match
Loading thumbnail…

CartoDB Fiesta

This example shows a live map of Denver traffic accidents from 2013, colored and animated over time with CartoDB’s Torque rendering, alongside a census-neighborhood choropleth layer for normalization. The visualization is built through the CartoDB editor and its JavaScript API, using SQL queries to filter and delete pre-2013 records, compute distances with `CDB_LatLng` and the `<->` operator, and join accident points to districts via `ST_Intersects`. The embedded map is served from a CartoDB-hosted URL.

Aandrewxhill
71% match