Amulya

100%

✓ Published0🌍 Public

Last edited Jul 7, 2022

Created on Jul 7, 2022

A world map displays global population distribution with semi-transparent teal circles sized by city population using a square-root scale. The visualization renders a Natural Earth projection with graticules, land masses, and country borders via D3's geoNaturalEarth1 and geoPath, while React manages component state. City coordinates are projected from latitude and longitude, with population data loaded from a CSV using d3.csv and world topology from TopoJSON.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu

83% match

Loading thumbnail…

World map

This world map visualizes global city populations, with semi-transparent circles sized by population using a square-root scale. A Natural Earth projection draws the landmasses, graticule, and country borders via D3's `geoNaturalEarth1` and `geoPath`, while city coordinates are projected and rendered as SVG circles. The map loads geographic data from World Atlas TopoJSON and population data from a CSV, using `topojson.feature` and `topojson.mesh` to construct the land and interior boundaries.

TTakuya Kitazawa

81% match

Loading thumbnail…

World Map

A world map visualization displays global cities as semi-transparent circles sized by population, overlaid on a natural Earth projection. The map renders landmasses, country interiors, and graticules using `d3.geoNaturalEarth1` and `d3.geoPath`. City coordinates and population data load via `d3.csv` from a world cities dataset, while geographic boundaries come from TopoJSON world-atlas data. React manages the asynchronous data loading and SVG rendering, with a square-root scale mapping population values to circle radii.

Uuplusv

81% match

Loading thumbnail…

Map Data

A world map rendered with a natural Earth projection displays global city populations as scaled golden circles, with landmasses in dark tones and graticules overlaid. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1` and `d3.geoPath` to draw the map from TopoJSON world-atlas data, while city coordinates and population sizes come from a CSV loaded via `d3.csv` and mapped through `scaleSqrt`. The SVG output layers spheres, land, country borders, graticules, and city circles, with opacity creating a subtle glow effect.

SSubodh Singh

81% match

Loading thumbnail…

World Map

This visualization displays a natural Earth projection world map with cities represented as semi-transparent circles sized by population. The map renders land masses in light gray with graticules and country borders overlaid. Built with React and D3 v6, it uses `geoNaturalEarth1` and `geoPath` for geographic projections, while `scaleSqrt` maps population data to circle radii. City coordinates and populations come from a CSV of world cities, and country boundaries derive from TopoJSON world-atlas data.

Ssophievanderhorst

80% match

Loading thumbnail…

React world map + population points

This example visualizes global population distribution by overlaying cities as scaled points on a world map. The map is rendered using SVG paths from TopoJSON land and country border data, with a graticule for geographic context. City population values are mapped to point radii using a square-root scale from d3, with each city positioned via the geoNaturalEarth1 projection. The visualization is built with React, fetching data from world-atlas and a curated World Cities CSV, and populating the map once both datasets load.

SSuperShreejit

80% match

Loading thumbnail…

World Map

This example visualizes global population distribution by rendering a world map with cities represented as scaled circles. The map displays land masses, graticules, and country borders, while city markers use a square-root scale to encode population size. The visualization is built with React and D3 v5, using `geoNaturalEarth1` projection via `d3.geoPath` and topojson data from the world-atlas package. Population data comes from a CSV of world cities, with React hooks managing asynchronous data loading.

MMatias Conde

80% match

Loading thumbnail…

Points on World Map

This visualization displays a Natural Earth projection world map with semi-transparent circles sized by city population. The map renders landmasses, country borders, and graticules using d3.geoPath and d3.geoNaturalEarth1, with data from World Atlas TopoJSON. City locations and populations come from a CSV file, with circle radii scaled by d3.scaleSqrt. The React component structure uses hooks to load both datasets asynchronously, and all marks are drawn as SVG elements.

Ssuserocc

80% match