Firefly Earthquakes

100%

Firefly Earthquakes

✓ Published4🌍 Public

Last edited Oct 9, 2025

Created on Mar 6, 2020

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.

AI-generated description

Firefly Cartography with OpenLayers and React.

Each point is an earthquake. Data from Pablo Navarro's Earthquake Map.

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Firefly Cartography

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.

CCurran Kelleher

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

78% match

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

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

75% match

Loading thumbnail…

Firefly Map of Coronavirus Case Locations

A dark world map, styled with an inverted, semi-transparent basemap, displays glowing teal points marking the locations of confirmed Coronavirus cases as of March 5, 2020. Each location is represented by a single firefly-like sprite, with equal size and intensity regardless of case count, a noted shortcoming. The visualization uses React to manage the component lifecycle, an OpenLayers map with a Stamen toner-lite base layer, and custom canvas-generated radial gradients to create the glow effect. Data is sourced from the Johns Hopkins COVID-19 time series CSV, parsed with d3.csv.

CCurran Kelleher

75% match

Loading thumbnail…

Earthquakes since 1965

This world map displays significant earthquakes since 1965, using circles sized by magnitude, with tooltips showing country and magnitude. The visualization renders on an SVG canvas using React and D3 v5, employing `geoNaturalEarth1` projection with `geoPath`, `geoGraticule`, and world atlas TopoJSON for land boundaries. Earthquake data comes from a cleaned CSV of the Kaggle USGS dataset. Semi-transparent red circles encode magnitude through a square-root scale, overlaid on light blue oceans and green landmasses.

VVarun Eranki

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

74% match