Gist 177f6c8fe1ef0050c1d0d9e490f6f6d5

100%

Gist 177f6c8fe1ef0050c1d0d9e490f6f6d5

✓ Published0🌍 Public

Last edited Mar 6, 2017

Created on Mar 6, 2017

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 516c27edc013850e5fa703af9f9c0f03

This interactive visualization maps French EPCI administrative units using a force-directed layout, showing clusters of communes grouped by their intercommunality category. It uses d3.forceSimulation to position nodes representing each EPCI, with the underlying geoJSON data from the epci2020 file providing the administrative codes and names. The rendering translates the simulated node positions into geographic coordinates, allowing users to see the spatial distribution of these administrative groupings across France.

TThomasG77

80% match

Loading thumbnail…

Gist 1f575522ca61946b31d92bbd146a9dce

This visualization compares French legislative electoral districts between 2012 and 2017, showing how commune boundaries and canton assignments shifted across the two years. It displays two side-by-side maps, likely using Three.js with WebGL rendering to animate or morph between the two configurations. The data comes from CSV files containing commune-to-canton and commune-to-district correspondences for both years. The visualization relies on the Vue framework to manage the interface and handle state transitions, with the geographic comparisons rendered through WebGL for smooth interactive exploration.

TThomasG77

78% match

Loading thumbnail…

Gist 32329a8557135f11cb5656e3bfd4d35c

A WebGL map visualizes the locations of French tobacco shops, using points to show their distribution. The code geocodes addresses from an official customs dataset via the data.gouv.fr API, then processes the CSV with the `requests` library. It uses a Vue.js front-end to render the points in a 3D space, allowing users to explore the spatial patterns of the shops.

TThomasG77

74% match

Loading thumbnail…

Gist 73e5cb2c456084a9c356f9c3f89f8803

An interactive particle field visualizes the gravitational attraction between a cursor and thousands of moving points. The code uses D3's quadtree for spatial indexing and d3.forceSimulation with custom force functions to compute particle velocities and positions, while a Vue component manages the animation loop and canvas rendering. The display updates in real time, with particles flowing toward and around the pointer position based on distance-based force calculations, creating a dynamic, organic swarm effect on a dark background.

MMAKIO135

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

71% match

Loading thumbnail…

regions 2017

This example visualizes France’s administrative regions in 2017 as a grid of labeled cells, showing how each region groups its constituent departments. It displays region names, IDs, and department codes from a CSV source. The visualization uses D3’s `d3.forceSimulation` to arrange the cells into a packed layout, while `d3.geoPath` and Canvas `getImageData` likely handle any geographic or pixel-based operations. The rendering relies on a custom force-directed placement, with each region’s departments listed in the data file, and no external mapping library beyond D3’s core modules.

PPhilippe Rivière

71% match

Loading thumbnail…

Gist 8f728d205de3c03b7c142233a826e3ab

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.

RRCura

71% match

Loading thumbnail…

Gist 1046e6003c6e5198ef4647da9b64c3b7

This example displays a static map of French regions, rendered using a conic conformal projection centered on France. The visualization uses D3 v4’s `d3.geoConicConformal`, `d3.geoPath`, and `d3.json` to load and draw geographic data from an external regions JSON file. The SVG canvas is 700 by 580 pixels, with all region boundaries shown as simple paths. No interactivity or additional styling is applied; the map is presented in its raw, unadorned form.

MMilowB

71% match