CartoDB Point Clustering

100%

CartoDB Point Clustering

✓ Published0🌍 Public

Last edited Jan 11, 2014

Created on Jan 10, 2014

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.

AI-generated description

Similar vizzes

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

94% match

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

93% 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

81% match

Loading thumbnail…

Leaflet multilayer example | CartoDB.js

A Leaflet map displays tornado data aggregated into hexagon bins at three distinct scales, with each bin labeled by its point count. The visualization uses CartoDB.js to run a SQL query that computes three nested hexagon grids, filtering points into large, medium, and small clusters based on density thresholds. A CartoDB sublayer applies CartoCSS to scale text sizes by cluster tier, overlaying the raw points with red labels on a Stamen toner base layer.

Aandrewxhill

80% match

Loading thumbnail…

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.

Aandrewxhill

79% 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

77% match

Loading thumbnail…

Fun SQL statements for CartoDB

This example shows how to explore and analyze tornado and county data in CartoDB using SQL statements. It demonstrates basic queries for filtering, sorting, and aggregating records, followed by spatial functions that inspect geometry types, compute areas, distances, and intersections. The code uses PostGIS functions such as `ST_Area`, `ST_Distance`, `ST_Intersects`, and `ST_DWithin`, alongside CartoDB-specific helpers like `CDB_LatLng`. It also includes updates to add tornado counts and density per county, highlighting how SQL can drive interactive map visualizations.

Aandrewxhill

75% match

Loading thumbnail…

Client side hexgrid | CartoDB.js

This example visualizes point data from a table named `za` as a hexbin density grid over a Leaflet map, using the CartoDB.js library. It initially renders hexagonal cells colored by point density, then recomputes the grid at a finer resolution and updates the map’s SQL and CartoCSS style to reflect the new bin size. The client-side SQL queries use PostGIS functions like `CDB_HexagonGrid` and `ST_Expand`, while `cartodb.SQL` and sublayer methods handle dynamic style and data updates. The base map uses Stamen toner tiles.

Aandrewxhill

74% match