Fork of World maping with cities

100%

Fork of World maping with cities

✓ Published1🌍 Public

Last edited Jun 15, 2021

Created on Jun 15, 2021

This interactive map displays world cities with circle sizes proportional to population, overlaid on a geographic projection of Earth. It renders country landmasses, graticules, and interior borders using `d3.geoPath` with `geoNaturalEarth1` projection, while city positions are projected from latitude/longitude coordinates. Population values drive a square-root scale to determine circle radii. The visualization uses React hooks to load TopoJSON world atlas data and CSV city data, with d3.v5 handling geographic calculations and SVG rendering.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Fork of WorldMap (mit Cities)

This is a world map visualization that displays global cities as circles, with their size scaled by population using a square root scale. The map is rendered using SVG paths and circles, with D3.js handling the geographic projections and data processing. The visualization uses `geoNaturalEarth1` for the map projection, `geoPath` for drawing countries and graticules, and `scaleSqrt` for city sizing. City and country data are loaded from external JSON and CSV sources, with React managing the user interface and rendering.

EEd Hutchinson

92% match

Loading thumbnail…

Fork of Polished World Map

This fork of a polished world map visualizes global city populations using a natural Earth projection. The visualization displays landmasses, country interiors, graticules, and a sphere outline, with city markers sized proportionally to population using a square root scale. It loads TopoJSON country boundaries from the world-atlas package and city data from a CSV file, processing them with d3's geoNaturalEarth1, geoPath, and geoGraticule utilities. The React rendering uses SVG paths and circles, styled with custom CSS classes for a clean, refined aesthetic.

Jjchen6912

92% match

Loading thumbnail…

Fork of world map w/ cities & countries pop!

A global map visualizes cities and countries by population using a natural Earth projection. City markers sized with a square-root scale encode population, while country fill opacity encodes population data, with a distinct class for missing values. The visualization uses `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.geoGraticule` for map rendering, with data loading via `d3.csv` and `d3.json`, and React for the interface.

GGalineeharika

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

91% match

Loading thumbnail…

Fork of world map w/ cities & countries pop!

A world map visualization displays global city populations and country population data, with city circles sized by population and country polygons colored by opacity according to population. The visualization uses a Natural Earth projection from d3-geo-projection, rendered with React and SVG paths via d3.geoPath. City data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON. Hovering over cities or countries reveals population tooltips, with graticules and geographic reference lines overlaid for context.

Ssrividyap03

91% match

Loading thumbnail…

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities over 50,000 population, using circles scaled by population size and country polygons colored by opacity to reflect national population. The map uses `d3.geoNaturalEarth1` projection with `d3.geoPath` to render land, graticules, and geographic lines, while React manages the component state. City data comes from Simplemaps, country boundaries from World Atlas TopoJSON, and population figures from UN 2019 estimates. Tooltips show city populations and country names, with missing country data marked as “no data.”

Aabiipanhwar

90% match

Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The map includes land masses, country borders, graticules, and a sphere outline, rendered with `geoNaturalEarth1` projection and `geoPath` from d3. City data comes from the Simplemaps World Cities Database, filtered to populations above 50,000. The React app loads TopoJSON world atlas data and CSV city data, then renders SVG circles with transparency over the geographic features.

KKunkgg

90% match