Points on a map

100%

Points on a map

✓ Published1🌍 Public

Last edited May 7, 2021

Created on May 6, 2021

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.

AI-generated description

Scatter plot of temperature dataset using d3 and keeps track using react

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a 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.

AAmnaRizvi-S

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

93% match

Loading thumbnail…

Points on a Map

This example displays world cities as scaled circles on a natural Earth projection, with each circle’s radius proportional to its population. The map renders landmasses, graticules, and interiors using `d3.geoPath` and `d3.geoNaturalEarth1`, while the city points are drawn as SVG circles with a square-root scale for size encoding. The visualization loads geographic topology from `world-atlas` and city CSV data via `d3.csv`, using React hooks (`useState`, `useEffect`) to manage the asynchronous data fetching and triggering re-renders.

NNikita Toropov

93% match

Loading thumbnail…

Points on a Map

This visualization displays world cities as semi-transparent circles overlaid on a natural Earth projection map, with circle size encoding population via a square root scale. The map includes land masses, country borders, graticules, and a sphere outline. React manages the component structure, while D3 v7 handles geo projection and path generation through `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded with `d3.csv`, and world geography uses TopoJSON from the world-atlas package, rendered as SVG.

KK3zter

93% match

Loading thumbnail…

Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent points. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to render landmasses, country interiors, and graticules from TopoJSON data. City coordinates are projected and drawn as SVG circles, with data loaded from a CSV via `d3.csv` in React hooks. The map prioritizes geographic context over point density, using a light gray palette for boundaries and teal circles for city locations.

FFonda Irena Santoso

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

93% match

Loading thumbnail…

Points on a Map

This visualization displays world cities as semi-transparent points on an equal-Earth projection map, with circle size encoding each city’s population using d3.scaleSqrt. It renders the landmasses, graticules, and interiors from the World Atlas TopoJSON via d3.geoPath and topojson.mesh. City coordinates and populations come from a CSV loaded with d3.csv. Data loading is managed through React hooks (useState, useEffect), and the SVG scene is composed with React components, using d3.geoNaturalEarth1 for projection and d3.geoGraticule for grid lines.

PPedro Henrique Vanali

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

93% match