Quick list of CartoDB weather and climate related maps

CartoDB + D3 Drought Maps

Four side-by-side maps show drought conditions across the United States during alternating months of 2012, using a color scale from yellow to dark orange for drought severity. Each map layers a simplified world border background under drought polygons queried from CartoDB via the cartodb.js SQL API, with data formatted as TopoJSON. The SVG maps are rendered with d3.geo.mercator and d3.geo.path, and all four views share a synchronized zoom behavior through d3.behavior.zoom.

72% match

CartoDB Point Clustering

This example demonstrates point clustering on a map using CartoDB, visualizing tornado data with adaptive hexagon grids. The SQL template computes three levels of hexagonal clusters (bigs, mids, smalls) based on point density, while CartoCSS styles the markers with different sizes and labels according to cluster level. As users zoom in, the marker sizes and cluster classifications update dynamically. Clicking a point reveals the number of tornadoes in that cluster, providing an interactive summary of spatial distribution.

69% match

Raincloud CartoCSS

A raincloud visualization renders one hour of rainfall data as overlapping, semi-transparent ellipses on a map, with marker size and color scaled by precipitation intensity. The CartoCSS styles define six value-based classes, from deep blue for heavier rainfall to pale white for trace amounts, while zoom-dependent width rules amplify marker sizes at higher zoom levels. The visualization uses CartoDB's styling language with marker properties, zoom conditions, and composition operators to layer the raincloud effect.

69% match

CartoDB Point Clustering

This example demonstrates point clustering on a map using CartoDB, showing how thousands of tornado records can be aggregated into hierarchical groups of different sizes. The visualization uses an SQL query with ST_SnapToGrid to cluster points at multiple scales, dynamically adjusting the cluster radius based on zoom level and a slider control. CartoCSS styles differentiate the cluster sizes, and clicking a point reveals the individual records it contains. The map is embedded with Google Maps and uses CartoDB.js, with an interactive side panel for cluster-size adjustments.

Create small multiples through the Static Maps API

This example shows how to create small multiples by generating multiple static map images from a CartoDB visualization, each filtered by a different SQL query. It begins with a basemap and one data layer of drought severity data, then produces a sequence of images that isolate individual drought categories. The code uses the CartoDB Static Maps API, fetching map configurations from a `viz.json` URL, building named maps with `requests`, and printing final static map URLs. CartoDB’s dark basemap template and the `usdm_september_2014` table are the visible data sources.

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.

Important bits for rainy cities visualization

This visualization maps rainfall intensity across populated places, labeling each city with its name and current precipitation value. Text size and opacity scale with rainfall amount, so heavier rain appears larger and more prominent. The map uses CartoDB’s SQL API to join city points with recent rainfall data from the `last_1_hours` table, calculating proximity via `st_distance` and ordering results by precipitation. CartoCSS styles the labels, with zoom-dependent size adjustments to keep readability across map scales.

Easy example | CartoDB.js

This example shows a full-screen interactive map that renders a dataset called "untitled_table_5" with custom CartoCSS styling. The map displays points, lines, and polygons in a red color scheme with white outlines, and includes tooltips triggered by interactivity on the `cartodb_id` field. The code uses the CartoDB.js library version 3, specifically `cartodb.createVis`, which loads the visualization from a JSON configuration object. The base map is provided by OpenStreetMap tiles via Leaflet, while the geographic data is queried from a CartoDB table using SQL and styled with CartoCSS rules for each geometry type.