My map

100%

✓ Published0🌍 Public

Last edited Mar 22, 2021

Created on Mar 27, 2020

Forked from My map

A map of European and North African cities displays population data as small circles over a geographic projection of country boundaries. The visualization uses D3 v6 in a React framework, rendering as SVG with d3.geoMercator and d3.geoPath to draw the map. City coordinates from a CSV file are projected and plotted as circles, with labels showing each city’s name, all styled via a linked CSS file.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

My map

This map shows European and North African cities with their populations, plotted as points over country boundaries. Using D3 v5 within a React framework, the visualization loads GeoJSON country polygons and CSV city data via `Promise.all`, then renders them with `d3.geoPath` and a Mercator projection. City labels appear beside each point, with styling controlled by the map.css file.

DDrJoNoble

94% match

Loading thumbnail…

My map

This map displays European and North African cities as dark dots on a light landmass, with each city labeled by name. The visualization uses D3.js v5 to load geographic data from a GeoJSON file and city coordinates from a CSV file. It renders the map by applying the Mercator projection through `d3.geoMercator` and drawing paths with `d3.geoPath`, while circles and text elements are positioned using the same projection function.

Hhlkyt

89% match

Loading thumbnail…

My map

This example displays a map of Europe and North Africa with city locations marked by circles and labeled with their names. It uses a Mercator projection via `d3.geoMercator` and renders the country boundaries as SVG paths through `d3.geoPath`. City data from `cities.csv` is plotted as circles and text labels, with the map styled using custom CSS classes. The visualization loads both the GeoJSON country boundaries and the CSV data concurrently using `Promise.all`.

LLeo

87% match

Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu

85% match

Loading thumbnail…

NEW MAP

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.

MMatias Conde

81% match

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

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

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

80% match