Fork of Firefly Cartography

100%

Fork of Firefly Cartography

✓ Published0🌍 Public

Last edited Feb 12, 2022

Created on Feb 12, 2022

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.

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

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

90% match

Loading thumbnail…

Fork of world map w/ cities

A world map displays cities with populations exceeding 50,000, sized by population using a square root scale. The map uses a Natural Earth projection with a rotation offset, rendering land, graticules, geographic lines, and country boundaries as SVG paths via `d3.geoPath`. City data comes from Simplemaps, while country boundaries use World Atlas TopoJSON. An animated GIF pattern fills the land, and hovering over countries highlights them. Built with React and D3.

SSnapika

80% match

Loading thumbnail…

Fork of Points on a Map

This visualization shows a world map with cities of population greater than 50,000 plotted as semitransparent points. The map displays landmasses, graticules, and country interior boundaries. Using React for component structure, the code employs d3’s `geoNaturalEarth1` projection and `geoPath` to render geographic features, while city coordinates are projected and drawn as SVG circles. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON.

SSteven Pearce

80% match

Loading thumbnail…

Fork of world map w/ cities & countries pop!

A world map visualization displays cities with populations over 50,000 as scaled circles, while country polygons are shaded by population density with hover tooltips. Using React with the d3-geo-projection library, it applies a natural Earth projection and renders graticules, geographic lines, and country boundaries via `geoPath`. City radii use a square-root scale based on population data from Simplemaps, while country opacity maps to UN population data from a CSV file.

GGogineni44

80% match

Loading thumbnail…

Fork of Fork of Points on a Map

This example displays a world map with cities having populations over 50,000, sourced from the Simplemaps World Cities Database, overlaid on country boundaries from the World Atlas TopoJSON. The visualization uses React for component management and d3.geoNaturalEarth1 projection with d3.geoPath to render the sphere, graticules, land, and interiors. City points are projected and drawn as semi-transparent circles, using d3.csv for data loading and topojson’s feature and mesh functions to prepare the geographic data.

Mmmei-d

80% match

Loading thumbnail…

Fork of Points on a Map

This visualization shows a world map with cities rendered as semi-transparent teal circles, using data from the Simplemaps World Cities Database filtered to cities with populations exceeding 50,000. The map employs d3.geoNaturalEarth1 projection with d3.geoPath to draw land masses, country borders, graticules, and the sphere outline from TopoJSON world-atlas data. React components manage the SVG rendering, with d3.csv loading city coordinates and topojson.feature and topojson.mesh extracting geographic shapes for the base map.

LLam Tran

80% match

Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection map. Circle size encodes population using a square root scale, with the largest cities reaching 15 pixels in radius. The map renders country boundaries and graticules using d3.geoPath with TopoJSON data from the World Atlas, while city coordinates come from a Simplemaps CSV. Built with React and d3.v5, the SVG map overlays scaled circles onto the projected geographic features, filtered from the complete world cities dataset.

Bblueyjuice

79% match