Clustering stylings for CartoDB

100%

Clustering stylings for CartoDB

✓ Published0🌍 Public

Last edited Dec 13, 2011

Created on Dec 9, 2011

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.

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

80% 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…

kmean cartocss style

This example uses CartoCSS to style a map of points that have been classified by a k-means clustering algorithm. It assigns a distinct marker fill color to each cluster based on an `id` property, with default orange for unclassified points. The rendering approach applies marker properties like width, opacity, and line styling through the CartoCSS styling language, which is used by mapping libraries such as CartoDB. The code demonstrates how conditional rules can visually separate spatial clusters.

Aandrewxhill

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

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

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

74% match

Loading thumbnail…

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.

Aandrewxhill

73% match

Loading thumbnail…

Gist 11071111

This visualization maps global earthquake intensity using CartoDB’s CartoCSS styling. It shows point markers scaled by the `mmio` attribute (Modified Mercalli Intensity), with larger circles for stronger quakes and zoom-dependent width increases. The code applies marker properties like `marker-type: ellipse`, `marker-fill`, and `marker-comp-op: multiply` to blend overlapping points, while labels display intensity values at higher zoom levels via `text-name`. The example uses CartoDB’s tile rendering and CSS-like rules to style geographic data without JavaScript libraries.

Aandrewxhill

73% match