Client side hexgrid | CartoDB.js

100%

Client side hexgrid | CartoDB.js

✓ Published0🌍 Public

Last edited Feb 14, 2014

Created on Feb 14, 2014

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.

AI-generated description

Similar vizzes

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

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

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

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

74% match

Loading thumbnail…

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.

Aandrewxhill

73% match

Loading thumbnail…

Broken pieces | CartoDB.js

The visualization shows a map of abstract geometric shapes in vivid colors, with overlapping polygons and dashed lines that shift between purple, red, and teal based on a numerical color attribute. It uses CartoDB.js and Leaflet to render two sublayers, each applying a different CartoCSS style to the same SQL-generated data. The SQL query computes random spatial extents and generates lines from sinusoidal and tangent functions, while a JavaScript timer toggles layer visibility every 1.5 seconds to create a flashing effect. The map slowly pans across the view using Leaflet's `panTo` method.

Aandrewxhill

70% match

Loading thumbnail…

Gist 6114786

This example implements a private torque-style time-series visualization for geospatial data using PostgreSQL and PostGIS. It defines custom SQL functions that aggregate point features into web-Mercator grid cells, grouping counts by time steps and returning arrays of values and dates for rendering. The code uses `ST_SnapToGrid`, `CDB_XYZ_Resolution`, and `CDB_XYZ_Extent` to tile data at a given zoom level, with two variants: a standard response for instantaneous counts and a cumulative response that includes expiration dates for each cell. A metadata function returns the spatial bounds and time range from the source table, supporting both timestamped and numeric columns.

Aandrewxhill

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

70% match