Skip to main content
100%

Gist 10926650

✓ Published0🌍 Public
Aandrewxhill
Last edited Apr 16, 2014
Created on Apr 16, 2014

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 10926745

This visualization maps weather anomaly outliers from the Enigma dataset, distinguishing weak cold events (blue) from other anomaly types (orange). The query assigns a numeric type value via a CASE statement, which likely drives a force-directed or spatial layout. The rendering uses D3’s `d3.forceSimulation` to position nodes and `d3.geoPath` to project geographic coordinates, with points colored by the derived type number. The code focuses on spatial distribution and categorical separation of extreme weather records from 1964, highlighting regional clustering of anomaly types.

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

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

MMbrownshoes
73% 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
72% 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…

Gist ae4b814c65267e5d9299fbb279a83176

This visualization combines a geographical forecast with spatial clustering and outlier detection, showing how raw location data is grouped and analyzed on a map. It uses a custom D3 force simulation to arrange clusters, while the geographic backdrop is rendered through `d3.geoPath` with map projections. The clustering logic relies on KMeans and spatial clustering algorithms from an external library, and outlier detection flags anomalous points via canvas `getImageData` pixel analysis. The code integrates Three.js for enhanced 3D terrain rendering, with transitions driven by `transition.attrTween` to animate cluster movements over time. The data source appears to be simulated forecast points, processed through the clustering pipeline.

HHugoberry
71% 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
70% match
Loading thumbnail…

Gist ddc6d50c313ebe6edb45519f43358c6c

The visualization displays monthly and seasonal global temperature anomalies from 1880 onward, using data from the `temperatures.csv` file. It builds a compact heatmap-style or sparkline-based grid, with each row representing a year and each cell showing the temperature deviation. The implementation uses D3.js to parse the CSV data and render the graphic, leveraging SVG or canvas primitives to represent the numeric values across the various time columns. The code processes the tabular data directly, mapping the values to visual elements through D3’s data-binding and layout functions.

Mmbostock
70% match