Skip to main content
100%

CartoDB Point Clustering

✓ Published0🌍 Public
Aandrewxhill
Last edited May 16, 2015
Created on May 16, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

Aandrewxhill
82% match
Loading thumbnail…

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.

Aandrewxhill
80% match
Loading thumbnail…

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.

Aandrewxhill
80% match
Loading thumbnail…

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.

Aandrewxhill
79% match
Loading thumbnail…

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.

Aandrewxhill
76% match
Loading thumbnail…

Clustering stylings for CartoDB

This CartoDB map visualizes clustered point data by varying marker width and opacity based on count attributes and zoom levels. It uses CartoCSS styling to define rules that scale marker size with cluster counts, while zoom-dependent conditions control which hierarchy levels appear. The code applies opacity and line styling only when the map reaches specific zoom thresholds, hiding higher-level clusters at closer views. The example demonstrates how CartoDB’s styling language can create interactive, zoom-aware cluster representations without JavaScript libraries.

Aandrewxhill
75% match
Loading thumbnail…

CartoDB Point Clustering

This example displays a choropleth map of U.S. ZIP code tabulation areas, colored by the ratio of mortgage disclosures to brokers, with polygon opacity scaled by broker count. It uses CartoDB.js with Leaflet to render the map, an SQL query joining broker data to census geographies, and CartoCSS for the graduated color and opacity styling. The map applies an aggregation stack blur filter to smooth the rendered polygons.

Aandrewxhill
75% match
Loading thumbnail…

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.

Aandrewxhill
74% match