CartoDB Point Clustering

CartoDB Point Clustering

This example uses CartoDB to render U.S. state polygons with clustered point data. Clicking a state triggers an SQL query that applies ST_Dump and ST_SimplifyPreserveTopology to generate line segments radiating from the state centroid to its boundary points, producing a stylized "POW!" label effect. The visualization combines CartoDB’s tile layer API with custom CartoCSS styling, including pattern fills and text labels, to show how dynamic SQL can reshape geographic features interactively.

75% 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.

74% match

Something crazy

This example displays a choropleth map of U.S. postal codes, where a randomly selected threshold dynamically recolors polygons based on their population totals. The visualization uses the CartoDB.js library to load a Leaflet map layer, then modifies its CartoCSS styling on each page load. A JavaScript function converts the current timestamp into an RGB color, which is applied to polygons exceeding a random population value, while all other areas retain a fixed pink fill. The underlying data comes from a CartoDB-hosted dataset of postal code boundaries.

74% match

CartoDB Point Clustering

This example demonstrates point clustering on a map using CartoDB.js, Google Maps, and a custom SQL template. It visualizes tornado data, grouping nearby points into hexagonal clusters of varying sizes based on a user-adjustable "cluster size" slider. The clustering algorithm runs through a SQL query that creates three levels of hexagon grids (large, medium, small) to aggregate points, with each cluster's size and opacity reflecting the number of points it contains. Clicking a cluster reveals details about the original points it represents. The side panel includes a range input to dynamically adjust the cluster radius, which updates the visualization via CartoDB's SQL and CartoCSS templating.

74% match

CartoDB Point Clustering

This example displays point clustering on an interactive map centered on New Orleans, using CartoDB and Leaflet. It shows a sublayer of Twain dataset points filtered by city name, rendered as large blue markers. Clicking a marker queries overlapping points via CartoDB’s SQL API, revealing their count and source values in a side panel. The map uses Stamen toner tiles, while hover interactions change the cursor through CartoDB’s `featureOver` and `featureOut` events.

Map Connections | CartoDB.js

Clicking a ZIP code polygon on a U.S. map triggers a dynamic query that draws purple curved lines from that selected area to nearby ski resorts within a 1,000-unit distance. The example uses CartoDB.js with Leaflet to render the base map and vector layers, while a CartoDB SQL API call executes `ST_MakeLine`, `ST_Segmentize`, and `ST_Transform` to generate geodesic connection paths in GeoJSON format. Interactivity includes cursor changes on feature hover and line removal/replacement on each new click, with styling controlled through CartoCSS.

Map Connections | CartoDB.js

Clicking a ZIP code on a gray choropleth map of the lower 48 states triggers a purple line to be drawn from that location to each nearby ski area within 1,000 units. The example uses CartoDB.js to render the base layer and SQL queries to compute line geometries via `ST_MakeLine` and `ST_Centroid`. It also employs Leaflet’s `L.Map` for panning and zooming, with `featureClick` and `featureOver` events managing cursor feedback.

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.