NEW MAP

100%

✓ Published0🌍 Public

Last edited Oct 12, 2023

Created on Oct 12, 2023

This map visualizes the distribution of world cities by population, using circle size to represent each city's population value. The visualization employs D3's geoNaturalEarth1 projection and geoPath to render landmasses, a graticule, and the sphere, with geoGraticule generating the grid lines. Cities are positioned using the projection, and their radii are scaled using d3.scaleSqrt, ranging up to 15 pixels. The React-based application loads geographic data from the world-atlas package and city data from a CSV file containing population figures.

AI-generated description

A program that loads in some data CSS Named Colors using D3 utilities and uses React state to Keep track of the data.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Cities of the World

Cities of the World uses a natural Earth projection to display global population data as proportional circles. D3’s geoNaturalEarth1 and geoPath render landmasses, graticules, and sphere outlines, while a sqrt scale maps city populations to circle radii. The visualization loads world atlas topology from world-atlas and city CSV data, overlaying semi-transparent dots atop a muted map. React manages the SVG rendering, with d3.v5 providing the underlying geospatial and scaling utilities.

Sstevensmithj

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

88% match

Loading thumbnail…

World Map

This visualization displays a world map with the population of major cities represented by proportional circles. Circles are sized using a square root scale based on each city’s population, overlaid on a gray landmass with graticules and interior borders. Built with React and D3 v5, it uses `geoEqualEarth`, `geoPath`, and `geoGraticule` for the map projection, while city data comes from a CSV file and world geography from TopoJSON.

33ssalunke

88% match

Loading thumbnail…

City sizes on a Map

This visualization displays global city populations using circles plotted on a world map, with dot radius scaled by the square root of population via d3.scaleSqrt. It uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and country interiors. React manages component state, while d3.csv and d3.json load city data from a gist and world-atlas TopoJSON. Circle opacity and fill are styled via CSS, showing cities over 50,000 inhabitants.

LLove Wessman

87% match

Loading thumbnail…

world map w/ cities

This visualization displays a world map with cities whose populations exceed 50,000, using a natural Earth projection that spins to reveal different hemispheres. The map incorporates country boundaries, interior borders, graticules, and geographic lines, with land areas filled by an animated pattern. City markers are sized by population using a square-root scale, while country boundaries include tooltips on hover. The project uses React with D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, sourcing city data from Simplemaps and country shapes from World Atlas TopoJSON, all rendered as SVG elements.

Zzach b.

87% match

Loading thumbnail…

World Map with Cities

This visualization displays a world map with cities, where each city is represented by a circle scaled proportionally to its population. Using D3’s geoNaturalEarth1 projection and geoPath, the map renders landmasses, graticules, and country interiors from TopoJSON data, while city locations are projected from latitude and longitude coordinates. The React component employs the useWorldAtlas and useCities custom hooks to load data via d3.json and d3.csv, with d3.scaleSqrt mapping population to circle radius sizes.

JJohn Huang

87% match

Loading thumbnail…

World Map v3

A world map visualization displays the Earth's landmasses and 2020 UN population data for cities, with each city represented as a circle whose radius is proportional to its population. The map uses D3.js v7's geoNaturalEarth1 projection, geoPath, and geoGraticule for the geographic features, while the data is rendered as SVG circles with square-root scaled radii. Population data comes from a CSV file of world cities, and the map is built using React's state management to load and display the atlas and population datasets.

JJohn Lewis

87% match