World Map with Cities

100%

World Map with Cities

✓ Published1🌍 Public

Last edited Jun 6, 2021

Created on Jun 5, 2021

A world map displays country boundaries and city locations as semi-transparent dots, projected using an equirectangular projection. The visualization renders landmasses in light blue, overlays graticules, and highlights interior borders. It uses `d3.geoPath` with `geoEquirectangular` and `geoGraticule` to draw the map, while city data from a CSV file is plotted via SVG circles. The code loads World Atlas TopoJSON and processes it with `feature` and `mesh` from TopoJSON.

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…

World Map with cities

A world map visualization displays cities as semi-transparent circles, with circle area proportional to each city’s population. The map uses the Natural Earth projection via D3’s `geoNaturalEarth1` and `geoPath`, rendering graticules, land masses, and interiors from TopoJSON data. City coordinates and populations come from a CSV file, and the D3 `scaleSqrt` function maps population values to a maximum radius of 20 pixels.

CCarlos Caballero

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

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

90% match

Loading thumbnail…

Cities on the World Map

This visualization displays cities as semi-transparent circles on a natural Earth projection, with circle size encoding population using a square-root scale. It renders world land masses, graticules, and country interiors via `geoPath` and `geoNaturalEarth1`, while city positions are projected from latitude and longitude coordinates. Data comes from a CSV of world cities loaded with `d3.csv`, and the world atlas TopoJSON is parsed using `feature` and `mesh` from topojson. React manages the component state, with D3 version 7 providing all geographic and scaling utilities.

KKolezhannochka

89% match

Loading thumbnail…

World Map

This visualization displays a world map with city locations overlaid as semi-transparent dots. The map uses the Natural Earth projection via `d3.geoNaturalEarth1`, with graticules, land polygons, and country boundaries rendered through `d3.geoPath` and TopoJSON data from the world-atlas package. City coordinates from a CSV file are projected and drawn as SVG circles. The React component manages data loading with custom hooks, while D3 v5 handles geo and CSV parsing.

BBhavanaGIrni

89% match

Loading thumbnail…

World Map with Cities Size

This example presents a world map with circles sized proportionally to city populations, using an equirectangular projection. The visualization layers country landmasses, interior boundaries, and graticules from World Atlas TopoJSON data, with city positions plotted from latitude and longitude coordinates. The code uses d3.geoPath for map rendering, d3.scaleSqrt for circle sizing, and React hooks to load CSV city data and TopoJSON topology. All marks render as SVG elements within a React component structure, with styling applied through CSS classes.

Ssmile2git

89% match

Loading thumbnail…

World Map

A world map displays country and land-mass boundaries on an equirectangular projection, filled with a pale blue and accented by graticule lines and interior borders. Built with React and D3 v5, it loads World Atlas TopoJSON data via `d3.json`, processes it with `topojson.feature` and `topojson.mesh`, and renders SVG paths using `d3.geoPath` and `geoEquirectangular`. The visualization also draws a sphere outline and graticules for a polished, cartographic look.

Ssmile2git

89% match

Loading thumbnail…

World Map with Cities

A world map displays the Earth's landmasses in green with a blue ocean, overlaid with circles representing cities from a CSV file, sized by population using a square-root scale. The visualization uses React and D3's `geoNaturalEarth1` and `geoPath` APIs to render the map, graticule, and city markers as SVG circles. City data is loaded via `d3.csv` from a remote URL.

AAmir

88% match