Skip to main content
SimilarExport ZIP
100%

Points on a map

✓ Published0🌍 Public
AAmnaRizvi-S
Last edited Jul 21, 2022
Created on Jul 21, 2022
Forked from Polished World Map

This visualization displays a world map with city points scaled by population. Country outlines and graticules are rendered using d3.geoPath and the geoNaturalEarth1 projection, with city populations mapped to point radii via a d3.scaleSqrt. Data comes from a CSV of world cities and TopoJSON world atlas features, rendered as SVG within a React application.

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…

Points on a map

This visualization displays world cities as points on a natural Earth projection, with point size mapped to population via a square-root scale. The map renders landmasses, graticules, and country interiors using `d3.geoPath` from the `d3` library. City data is loaded as a CSV, while world topology comes from the `world-atlas` package, with React managing the application state and SVG rendering. Hovering over a city reveals a tooltip with its name, country, and population.

MmohitPassan
95% match
Loading thumbnail…

Points on a map

This example displays a world map with city points scaled by population using a square-root scale. The map is rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, showing land masses, interiors, graticule, and sphere outlines. City circles are positioned via the projection and styled with opacity, while the component structure uses React with custom hooks to load TopoJSON world data and CSV city data. The visualization clearly communicates population distribution across the globe.

Ccynichole
94% 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
94% match
Loading thumbnail…

Points on world map

This visualization displays world cities as scaled circles on a natural Earth projection, with marker size encoding population using a square-root scale. The map renders land masses, graticules, and country borders in muted grays, while semi-transparent teal points overlay major urban centers. Built with React and D3 v7, it uses `geoNaturalEarth1` with `geoPath` for geographic projection, TopoJSON for world atlas data, and `scaleSqrt` to map population values to circle radii. City coordinates and populations come from a CSV dataset loaded via D3’s `csv` function.

AAlex Stulov
94% match
Loading thumbnail…

Points on a Map

This example displays a world map with city points sized by population. The visualization uses the `geoNaturalEarth1` projection and `geoPath` from D3 to render landmasses, graticules, and interiors from TopoJSON data. City coordinates are projected onto the map, and their radii are scaled with `scaleSqrt`. The entire visualization is built with React and uses D3’s `csv` loader to bring in city data from a remote CSV file.

Ddumbdataguy@gmail.com
94% match
Loading thumbnail…

Points on a Map

This visualization layers city population data onto a world map using a natural Earth projection. Semi-transparent green circles, sized with a square-root scale, represent each city’s population, with larger circles indicating more populous urban centers. The map includes geographic graticules, land masses, and country interiors rendered via `d3.geoNaturalEarth1` and `d3.geoPath`. The React app loads TopoJSON world-atlas data and CSV city coordinates through custom hooks, with map features styled distinctly in light grays.

Ww.fukuyama@gmail.com
94% match
Loading thumbnail…

Points on a Map

This map visualization displays the global distribution of cities, with points sized according to population using a square root scale to encode area proportionally. The geographic context is rendered using D3’s `geoNaturalEarth1` projection, with landmasses, graticules, and country interiors drawn via `geoPath`. City data, loaded from a CSV via `d3.csv`, is plotted as semi-transparent circles, and population values are scaled using `d3.scaleSqrt` to ensure visual accuracy. The visualization is built with React, leveraging the `useWorldAtlas` and `useCities` hooks to asynchronously fetch and process TopoJSON and CSV data.

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