Gist 8f728d205de3c03b7c142233a826e3ab

100%

Gist 8f728d205de3c03b7c142233a826e3ab

✓ Published0🌍 Public

Last edited Jan 3, 2017

Created on Jan 3, 2017

This example displays a WebGL heatmap of a large simulated point cloud centered on Paris, using 100,000 generated longitude and latitude coordinates. It shows density distribution through a glowing overlay on a dark CartoDB.DarkMatter tile map. The visualization is rendered with the `leaflet` and `leaflet.extras` R packages, specifically `addWebGLHeatmap`, which leverages WebGL for efficient GPU-accelerated rendering. The data is produced via `rnorm` and `sample_n` from `dplyr`, highlighting performance with large spatial datasets.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 03036b5ca710d61f0c01100a46ef7c7f

This WebGL heatmap displays the spatial density of 500,000 randomly generated geographical points centered on Paris, using a dark CartoDB basemap. The visualization shows how point density concentrates toward the city center, with the heatmap intensity representing the Gaussian-distributed sample data. The example demonstrates the `addWebGLHeatmap` function from the `leaflet.extras` package, which relies on the Leaflet mapping library and WebGL rendering for GPU-accelerated heatmap visualization, with size and unit parameters controlling the point radius in pixels.

RRCura

92% match

Loading thumbnail…

Gist 8bd1d36a9319f79fcf719eda3682b1d1

This example visualizes 500,000 randomly generated geographic points centered on Paris as a density heatmap. The code uses the `leaflet` package with the `addHeatmap` function to render the distribution, displaying points over a CartoDB DarkMatter tile layer. Data is synthesized using `rnorm` and sampled into smaller sets with `dplyr`’s `sample_n`. The visualization shows how a large point cloud condenses into a bright core with fading edges, demonstrating leaflet’s heatmap capabilities for large datasets.

RRCura

91% match

Loading thumbnail…

Gist cf5cdef5ed7f63fb3d441e306d7febe3

A heatmap of 500,000 simulated points clusters in Paris, displayed as a WebGL layer over a dark CartoDB map. The visualization samples 10,000 points, using leaflet and leaflet.extras to render the heatmap with pixel-based sizes. The data is randomly generated from a normal distribution around Paris's geographic center, and the rendering leverages WebGL for performance. The basemap and heatmap are combined using the `addProviderTiles` and `addWebGLHeatmap` functions.

RRCura

90% match

Loading thumbnail…

Gist 200bd2c1c57a4ce6cd078df504f0f65b

This example demonstrates a heatmap overlay on a dark CartoDB basemap, showing the density of simulated point data concentrated around a central Paris location. The visualization is created with R, using the `leaflet` and `leaflet.extras` packages, specifically the `addHeatmap` function with a fixed radius and intensity. The code generates three normally distributed random samples (500k, 100k, and 10k points) with `rnorm`, but displays only the small sample. The rendering relies on Leaflet’s tile-based map and heatmap smoothing, with point aggregation creating a glowing density surface over the geographic area.

RRCura

90% match

Loading thumbnail…

Gist a45ccfaa221afabc16fb47a80eaca35e

This visualization displays a heatmap of simulated GPS point density across Paris, generated from a normally distributed sample of 500,000 coordinates. The map uses the `leaflet` R package’s `addHeatmap` function, which renders point intensity using a radius of 10 and full opacity, over a CartoDB DarkMatter tile layer. The data is drawn from a subset of 100,000 points, plotted via the Leaflet JavaScript library’s heatmap extension. The visualization reveals the spatial clustering of the synthetic data around the city center, with density fading toward the outskirts.

RRCura

86% match

Loading thumbnail…

Gist 177f6c8fe1ef0050c1d0d9e490f6f6d5

This example visualizes the centroids of French communes as a particle system, with each point positioned by latitude and longitude from a CSV dataset. Using WebGL rendering within a Vue framework, the visualization employs a force simulation to spatialize the points, while geographic context is provided through a canvas-based path drawing approach. The underlying data includes commune names, INSEE codes, population, and coordinates, allowing the particles to reflect real administrative geography. The rendering leverages d3.forceSimulation for dynamic positioning and canvas getImageData for analyzing pixel density, creating a dense, interactive map-like scatter of population centers.

PPhilippe Rivière

71% match

Loading thumbnail…

Gist 9bd5ca69fc039cff50383b3a3459858b

This example shows how to render a spatial distribution of data points on a map using D3.js. It uses `d3.geoPath` to draw geographic boundaries and `d3.forceSimulation` to position overlapping points, while Canvas `getImageData` is used to read pixel data for collision detection. The visualization reads from a PGP-encrypted text file, suggesting the underlying dataset is not directly accessible. The code relies on D3’s selection and transition APIs to animate point movements, and it appears to use a projection to convert latitude and longitude coordinates into screen positions. The result is an interactive scatterplot overlaid on a map, with points dynamically adjusting to avoid overlap.

CCliffordAnderson

71% match

Loading thumbnail…

Benchmarking leaflet.extras::addHeatmap vs leaflet.extras::addWebGLHeatmap

This example benchmarks the performance of two Leaflet heatmap rendering methods, `addHeatmap` and `addWebGLHeatmap`, across point datasets of increasing size from 10,000 to 2 million points. Using R’s `microbenchmark` package, it compares the time to load pages containing these visualizations in the browser, with results showing the standard heatmap consistently outperforms the WebGL version for all tested dataset sizes. The rendered output uses Leaflet and the `leaflet.extras` package, with the analysis displayed via R markdown and `ggplot2`.

RRCura

71% match