Create a heatmap layer

100%

Create a heatmap layer

✓ Published0🌍 Public

Last edited Dec 12, 2019

Created on Dec 12, 2019

This example creates an interactive heatmap layer on top of a Mapbox dark basemap, using Mapbox GL JS. It visualizes point data from a GeoJSON source, showing earthquake or seismic intensities across the U.S. The heatmap uses color gradients and zoom-dependent intensity, radius, and opacity, transitioning to a circle layer at higher zoom levels. The circles also encode magnitude via a color scale, with a white stroke. The code loads the GeoJSON data from a remote gist URL and applies heatmap and circle layers with interpolation functions.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Heatmap

This heatmap blends a base map with three point locations that are transformed into radial gradients, showing how they are highlighted on a map. The visualization combines a CloudMade tile layer and OpenStreetMap data, with the points loaded as GeoJSON features. The map uses the Polymaps library, and its `load` callback dynamically adjusts each point’s radius based on the current zoom level while assigning a green gradient fill with fading opacity.

Mmbostock

75% match

Loading thumbnail…

Google Map + D3 Generated Layers

This example demonstrates a Google Map with multiple D3-generated layers overlaid, including choropleth countries, GeoHash grid cells, a heat map, a graph, and a graticule. The GMapLayered widget composites these layers, with countries colored by weight using a palette and GeoHash data shown as colored tiles. The visualization also renders a heat map and a graph of weighted points, all anchored to geographic coordinates. The code uses the hpcc-systems Visualization library’s map components to manage layer rendering and interaction.

GGordonSmith

72% match

Loading thumbnail…

Mapbox Legend

This example shows a choropleth map of US population density by state, with a hover tooltip displaying the density value. It uses the Mapbox GL JS library to render the interactive map and a custom HTML legend that maps population ranges to a sequential color scale. The legend is dynamically generated by iterating over hardcoded layer names and corresponding hex colors, and the map relies on a Mapbox Studio style for the underlying geographic data. The overlay panel and legend are styled with CSS, and no external data loading is shown beyond the style's built-in state boundaries.

WWill Carter

70% match

Loading thumbnail…

04: Custom Map Controls

This example demonstrates a map with two toggleable layers—hexbins and crash points—overlaid on a Mapbox GL base map. The hexbins are generated from a GeoJSON dataset of NYC crashes using Turf.js to create a hex grid and count incidents per cell, colored with a Jenks natural breaks classification. Custom UI buttons let users toggle each layer on and off, with active states highlighted. The code also shows how to filter invalid geometries and style layers dynamically.

55un

69% match

Loading thumbnail…

D3 ConicEqualArea Projection + D3 Generated Layers

This example demonstrates a multi-layered D3 map visualization using a conic equal-area projection, combining graticules, country choropleths, US county choropleths, geohash cells, heat points, and a graph network overlaid on the same geographic canvas. It uses the HPCC Systems visualization library, with layers such as ChoroplethCountries, GeoHash, ChoroplethUSCounties, Heat, and Graph, all rendered via D3’s geographic path machinery. The data includes country weights, geohash counts, county values, heat coordinates, and graph nodes, each styled with distinct palettes and opacities to reveal spatial patterns. The map is interactive, centered at the equator with a zoom level of two.

GGordonSmith

68% match

Loading thumbnail…

Leaflet - heatmap

A grid of manually collected coordinates animates into a Leaflet heatmap, gradually revealing clusters of activity around a metro station. The example demonstrates the `addLatLng` method of the Leaflet.heat plugin, which adds points one by one every 200 milliseconds. A styled gradient from blue to red encodes intensity, while the map uses OpenStreetMap tiles. The static dataset, defined as a JavaScript array, is fed incrementally into the plugin’s heat layer, showcasing its redraw behavior without explicit calls.

11Cr18Ni9

68% match

Loading thumbnail…

heatmap2

This heatmap demonstrates global population distribution using a textured choropleth map. Each country is filled with a circle pattern whose density increases with population size, using six threshold-based visual levels. The visualization employs D3.js v4 with the `d3.geoMercator` projection and `d3.geoPath` to render world GeoJSON boundaries, while the `textures` library generates varying circle sizes for the fills. Population data comes from a CSV file matched to country codes, with color thresholds defined by `d3.scaleThreshold` and ranges from sparse to dense circle patterns.

Zzoniyac

68% match

Loading thumbnail…

GeoJSON Experiments

This example displays geographic data on an interactive Mapbox map, using the Mapbox.js library and a full-screen map div. It fetches GeoJSON data from a CouchDB view via a jQuery `$.getJSON` call, then loads the returned feature collection into the map’s `featureLayer` with `setGeoJSON`. The map is initialized with `L.mapbox.map` and centered on coordinates (10.1, 125.6) at zoom level 5, showing how dynamic GeoJSON can be rendered on a tiled basemap.

CCliffordAnderson

67% match