My map

100%

✓ Published2🌍 Public

Last edited Mar 27, 2020

Created on Mar 25, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

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.

DDrJoNoble

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

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

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

87% match

Loading thumbnail…

Points on a Map

This map displays world cities as glowing gold points, with point size proportional to population using a square-root scale. Landmasses appear in muted brown, interior borders in blue-gray, and a graticule overlays the sphere. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath` for shapes, and `geoGraticule` for the grid. City coordinates and populations load from a CSV via D3’s `csv` parser, while world topology comes from a TopoJSON file processed with `topojson`’s `feature` and `mesh` functions.

AAnthony Zornig

80% match

Loading thumbnail…

Points on a Map

This example visualizes cities with populations over 50,000 as semi-transparent circles on a natural Earth projection. The map displays country boundaries, interiors, graticules, and a sphere outline, with circle size scaled by population using `d3.scaleSqrt`. The React-based visualization uses `d3.geoPath` for geographic rendering and `d3.geoNaturalEarth1` for projection, with city data loaded from Simplemaps via CSV and country shapes from World Atlas TopoJSON.

TToonysg

80% match

Loading thumbnail…

Points on a Map

This map visualization plots world city populations using circles projected onto a Natural Earth base. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors, while a sqrt scale maps population values to circle radii. The React-based component loads city data from a CSV and renders SVG marks, using a world atlas TopoJSON for geographic context.

Ttrissentety

80% match

Loading thumbnail…

Points on a Map

This visualization maps global cities as points on a natural Earth projection, with circle size encoding population. It uses React for rendering SVG elements, D3 v5 for geographical projections and scales, and loads world atlas TopoJSON data plus city CSV data from external URLs. The code employs d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule to draw landmasses, graticules, and sphere outlines, while d3.scaleSqrt maps population values to circle radii.

LLawrence Liu

79% match