Firefly Cartography

100%

Firefly Cartography

✓ Published4🌍 Public

Last edited Oct 9, 2025

Created on Mar 6, 2020

This example shows a dark, starry map of cities with populations over 50,000, using glowing points that mimic fireflies. It loads city data from a CSV and renders the points over an inverted Stamen toner basemap with OpenLayers. The glowing effect is created with a custom Canvas sprite, a radial gradient, and a Gaussian curve in `generateSprite.js`, while React manages the map lifecycle and D3 loads the data.

AI-generated description

Firefly Cartography with OpenLayers and React.

Each point is a city with population greater than 50,000. City data from Simplemaps: World Cities Database. Data loading logic drawn from Sized Points on a Map.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Firefly Cartography

This example visualizes cities with populations over 50,000 as glowing firefly-like sprites on a dark, inverted Stamen toner-lite basemap. Each point is rendered using OpenLayers vector layers with a custom canvas-generated circle sprite. The map is built with React and OpenLayers, while city data is loaded via d3.csv from a Simplemaps World Cities Database. The visualization uses a WebGL-capable canvas context for sprite generation, creating a striking contrast against the dark gradient background.

CChase Hall

93% match

Loading thumbnail…

Fork of Firefly Cartography

This visualization renders a global map of cities with populations over 50,000 as glowing, firefly-like points on an inverted Stamen toner-lite basemap. The map is built with React and OpenLayers, using a VectorLayer with point features projected to EPSG:3857. Each point’s sprite is generated on a canvas via a radial gradient computed with d3’s cubehelix color space, creating a soft gaussian glow. City data comes from a Simplemaps World Cities Database loaded through d3.csv.

TTony Brown

90% match

Loading thumbnail…

Firefly Earthquakes

A world map rendered with a light basemap displays earthquakes as glowing teal points that flicker with a firefly-like intensity. Each point is positioned by its latitude and longitude, with the glow generated by a radial gradient sprite whose opacity follows a Gaussian distribution. The visualization uses OpenLayers for map navigation and layer management, React for the interface, and D3’s `csv` loader to fetch earthquake data from a GitHub-hosted CSV file.

CCurran Kelleher

80% match

Loading thumbnail…

Firefly Earthquakes

Firefly Earthquakes plots global earthquake epicenters as glowing, firefly-like halos on a dark, inverted OpenLayers basemap. Each point is a sprite generated with canvas radial gradients and a cubehelix color scheme, rendered via an OpenLayers vector layer with icon styles. The map view and layers are managed through React hooks, while earthquake coordinates load from a CSV via d3.csv.

JJerfaas

79% match

Loading thumbnail…

Firefly Map of Coronavirus Case Locations

A dark, inverted basemap serves as the backdrop for a firefly-style visualization of confirmed coronavirus case locations. Each location with at least one case is rendered as a glowing, semi-transparent circular sprite on an OpenLayers map, with size and intensity kept constant regardless of case count. The map is built with React and uses d3.csv to load Johns Hopkins COVID-19 time-series data, while custom canvas-generated sprites with radial gradients create the glow effect. OpenLayers layers and vector sources manage the points, with a Stamen toner-lite tile layer inverted via CSS for the dark aesthetic.

Ddanrhymes

78% match

Loading thumbnail…

Coronavirus Firefly

A dark map rendered with the OpenLayers library and React shows the global spread of confirmed COVID-19 cases as of March 5, 2020. Each case location appears as a glowing, firefly-like sprite generated with Canvas and a radial gradient, styled with d3’s cubehelix color space. The basemap is inverted and dimmed to emphasize the points. Data is loaded from a Johns Hopkins CSSE CSV via d3.csv, and each point is rendered at uniform size and intensity regardless of case count.

ZZoe Ferencova

77% match

Loading thumbnail…

Firefly Map of Coronavirus Case Locations

A dark, inverted basemap displays locations with confirmed coronavirus cases as of early March 2020, each rendered as a small glowing firefly-like sprite. The visualization uses OpenLayers with a React component, drawing points from Johns Hopkins CSSE time-series data. Sprite generation employs a radial gradient with D3’s `cubehelix` color space to create the glow effect, while vector features are styled with OpenLayers `Icon` and `Style` objects on a Canvas/WebGL renderer.

Mmpenalver

77% match

Loading thumbnail…

Firefly Map of Coronavirus Case Locations

A dark map shows each location with confirmed coronavirus cases as of March 5, 2020, using a glow effect reminiscent of fireflies. The visualization plots all case locations, regardless of case count, using a shared sprite style. Built with React and OpenLayers, it loads a Stamen toner-lite basemap and creates a radial-gradient canvas sprite for each point via `generateSprite`. Data comes from the Johns Hopkins CSSE COVID-19 time-series repository, filtered to include only locations with positive counts.

Tthanhtrant219

75% match