Skip to main content
SimilarExport ZIP
100%

Firefly Earthquakes

✓ Published0🌍 Public
JJerfaas
Last edited Apr 2, 2020
Created on Apr 2, 2020

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.

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

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
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
79% 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
77% 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, 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
74% 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
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
73% match