Heatmap

100%

✓ Published0🌍 Public

Last edited Feb 8, 2016

Created on Oct 3, 2010

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Create a heatmap layer

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.

WWill Carter

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

73% match

Loading thumbnail…

Polymaps + D3

This example combines Polymaps and D3 to render an interactive map with a custom data layer. The map displays image tiles from CloudMade as a base layer, and overlays circles representing weather station locations from a local `stations.json` file. Each station is positioned using geographic coordinates projected through a `locationPoint` function within the Polymaps layer, with circle and text elements added via D3's selection API. The map includes interactive pan and zoom controls and a compass overlay.

Mmbostock

72% match

Loading thumbnail…

Heatmap

This heatmap visualizes topographic elevation data from the `volcano.json` dataset, rendered directly onto a Canvas element. The code reads the JSON file using `d3.json` and maps values between 90 and 190 to a custom terrain-like color scale built with `d3.scaleSequential` and `d3.interpolateHsvLong`. Elevation values are converted to RGB colors via `d3.rgb` and written into `ImageData` with `putImageData`.

Mmbostock

70% match

Loading thumbnail…

HeatMap

A heat map of temperature data for ten cities across the months of 2016, rendered as an interactive grid of colored squares using the p5.js `loadTable` API to fetch a CSV from a GitHub Gist. Each cell encodes average temperature through color saturation—cooler temperatures appear darker—while hovering over a cell displays its exact value. The visualization includes manual axis labels, a temperature color scale legend, and city names positioned along the left edge.

AAllen Ho

70% match

Loading thumbnail…

Image Markers

This example uses Polymaps to display an interactive map centered on Oakland, California, with CloudMade tile imagery. It loads GeoJSON crime data from the Oakland CrimeSpotting API and replaces each geographic point with a small Twitter favicon image marker. The map supports pan and zoom via `po.interact()`, and the markers are positioned using fixed scaling at zoom level 12.

Mmbostock

68% match

Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock

68% match

Loading thumbnail…

Hover Markers

This example uses Polymaps and the CrimeSpotting API to display a map of Oakland, California, with 100 crime data points as fixed-size circles. The map is created with `po.map()` and `po.geoJson()`, loading GeoJSON features that are styled with CSS classes for hover effects. When hovering, the datapoint markers change color from lightsteelblue to lightcoral, highlighting individual incidents. The map includes a CloudMade tile layer and supports zooming between levels 10 and 16, with crime data filtered for a single day in April 2010.

Mmbostock

68% match