Fork of Points on a Map

100%

Fork of Points on a Map

✓ Published0🌍 Public

Last edited May 3, 2023

Created on May 3, 2023

This visualization displays a world map with city points scaled by population using a square-root scale, rendered using D3.js geo projections and React. The map shows land masses, graticules, and a sphere outline created with the `geoNaturalEarth1` projection and `geoPath` from D3. City data is loaded from a CSV via `d3.csv`, while world atlas topology is fetched and processed with `topojson`’s `feature` and `mesh` functions. The visualization uses SVG circles with a gold fill at reduced opacity to represent city populations, all set against a dark radial-gradient background.

AI-generated description

A ScatterPlot of Week's Temperature

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of Points on a Map

This D3.js visualization displays a world map with cities of population greater than 50,000, using city data from Simplemaps. The map is rendered as an SVG, employing the d3.geoNaturalEarth1 projection with geoPath to draw land, graticules, and country interiors. The React implementation uses useWorldAtlas and useCities hooks to load TopoJSON and CSV data, respectively. City points are plotted as semi-transparent teal circles, styled with CSS.

Ssultanmirzapydev

93% match

Loading thumbnail…

Fork of Points on a Map

This visualization shows a world map with cities whose populations exceed 50,000, plotted as semi-transparent teal dots. The map includes country boundaries, graticules, and a sphere outline, rendered using d3.geoPath with a geoNaturalEarth1 projection. City positions come from a CSV loaded via d3.csv, while country shapes are derived from World Atlas TopoJSON using topojson.feature and topojson.mesh. The React component structure uses hooks to fetch data asynchronously, and the SVG marks are drawn with React elements.

YYanyu Long

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

93% match

Loading thumbnail…

Fork of Points on a Map

This example shows a world map of cities with populations above 50,000, plotted as small teal circles over light gray landmasses and graticules. The visualization uses React to render SVG elements, with D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map projections and boundary lines. City coordinates come from a Simplemaps CSV, while country outlines derive from TopoJSON world atlas data, with interiors drawn as mesh strokes.

Vvigneswaran009

93% match

Loading thumbnail…

Fork of Points on a Map

This visualization shows a world map depicting cities with populations over 50,000, drawn as semi-transparent teal dots. The country boundaries and graticules are rendered using D3’s `geoNaturalEarth1` projection with `geoPath`, while the city positions are projected from latitude and longitude coordinates. The map uses a React front-end with `useWorldAtlas` and `useCities` hooks to load TopoJSON land data and CSV city data from Simplemaps, displaying everything as SVG elements.

YYedrup

93% match

Loading thumbnail…

Fork of Points on a Map

This visualization displays over 4,000 cities with populations exceeding 50,000 as semi-transparent points on a natural Earth projection. The map includes geographic context through landmasses, graticules, and country borders. Using React with d3.geoNaturalEarth1 and d3.geoPath, it renders the World Atlas TopoJSON shapes as SVG paths, while city coordinates from the Simplemaps World Cities Database are projected to circles. The code demonstrates asynchronous data loading with d3.json and d3.csv hooks, filtering the initial dataset to only larger urban centers.

Aasdfcvd70@gmail.com

93% match

Loading thumbnail…

Fork of Points on a Map

This visualization displays a world map populated with circles representing cities with populations over 50,000. The map uses a Natural Earth projection with visible graticules, country boundaries, and landmasses rendered in muted grays. City coordinates are projected from longitude and latitude data using D3’s `geoNaturalEarth1` and `geoPath`, with circles drawn as SVG elements. The example is built with React, relies on D3 v5 for data loading and projection, and sources city data from Simplemaps and country boundaries from the World Atlas TopoJSON.

SSam

93% match