Points on A Map 2

100%

Points on A Map 2

✓ Published0🌍 Public

Last edited Apr 23, 2021

Created on Apr 23, 2021

A world map displays the distribution of cities across the globe, with each city represented by a circle sized according to its population. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses and graticules from World Atlas TopoJSON data. City locations are projected via the same projection, with circle radii scaled using d3.scaleSqrt and d3.max. The SVG rendering includes a subtle sphere outline, semi-transparent land fills, and yellow country borders, while population data comes from a CSV file of world cities.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

A world map displays the geographic distribution of cities, with circles sized by population. The visualization uses a natural Earth projection with graticules, land masses, and country borders. Built with React and D3 v6, it employs `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render the SVG. City data comes from a CSV of world cities, while country boundaries derive from World Atlas TopoJSON. Circle radii are scaled using `scaleSqrt` based on population values.

Ee-ines

93% match

Loading thumbnail…

Points on a Map (cities)

A world map displays cities as semi-transparent circles sized by population, with landmasses, graticules, and interior borders rendered via d3.geoPath and geoNaturalEarth1. The projection maps latitude and longitude to SVG coordinates, while a d3.scaleSqrt converts population values to circle radii. Data comes from a CSV of world cities, and the map uses React hooks to load TopoJSON world-atlas geometry.

AAnthony Ynami

92% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

92% match

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent, radius-scaled circles proportional to population, using a Natural Earth projection. The visualization, built with React and D3 (v5), renders SVG paths for land, graticules, and sphere outlines via `geoPath`, while circles are projected using `geoNaturalEarth1`. City data comes from a CSV of world cities, and the map’s geographic basemap is provided by the `world-atlas` TopoJSON, processed through `topojson.feature` and `topojson.mesh`.

RRajat Dangat

92% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent dots. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and renders geographic features with d3.geoPath, including land masses and graticules. City coordinates are projected from latitude and longitude into SVG circle positions. The map loads country boundaries from World Atlas TopoJSON and city data from a Simplemaps CSV, with React managing the data-fetching hooks and rendering the SVG marks.

GGeniXiong

92% match

Loading thumbnail…

Points on a Map

A world map displays country boundaries and graticules over a light gray sphere, with semi-transparent teal circles sized by city population. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render land, interiors, and sphere outlines from TopoJSON data. City coordinates are projected and drawn as SVG circles, with radii scaled using d3.scaleSqrt applied to population values from a CSV dataset. The React component structure manages state for both world atlas and city data.

Jj-PGi

91% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles positioned at the coordinates of cities. The size of each circle is proportional to the city's population, using a square root scale to visually encode the data. Built with React and D3 version 5, the map uses the `geoNaturalEarth1` projection and `geoPath` to render land, graticules, and country interiors from World Atlas TopoJSON. City data is loaded from a CSV file, and the visualization is rendered as SVG.

EEFezerKW

91% match

Loading thumbnail…

Points on a Map

A world map displays cities scaled by population using semi-transparent teal circles. The visualization renders geographic landmasses, graticules, and interior borders via d3.geoPath with a Natural Earth projection, while a d3.scaleSqrt maps population values to circle radii. City locations are projected from latitude and longitude coordinates, and data is loaded from a CSV using d3.csv. The React application overlays these marks on an SVG canvas.

SSerind Joshua McCue

91% match