Skip to main content
SimilarExport ZIP
100%

Points on World Map

✓ Published0🌍 Public
SSamuel Oseh
Last edited Jul 11, 2022
Created on Jul 11, 2022
Forked from World Map

This example displays global city populations as semi-transparent circles overlaid on a world map. The map uses a natural Earth projection rendered with D3’s `geoNaturalEarth1` and `geoPath`, with graticule and land/interior outlines. The `topojson` library processes world-atlas boundaries. City coordinates and populations come from a CSV, scaled by a square-root scale to a maximum radius of 10 pixels. The visualization is built in React, using hooks to asynchronously fetch data and render the SVG scene.

AI-generated description

Loads data using React and D3 utilities, Bare minimum for projects

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map

This interactive map displays global city populations as semi-transparent circles on a natural Earth projection, with country boundaries and graticules. The visualization uses d3.geoPath to render the sphere, graticules, and landmasses from the World Atlas TopoJSON. City coordinates are projected using d3.geoNaturalEarth1, with circle radii scaled by d3.scaleSqrt based on population data from a CSV file. The map is built as a React application using SVG for rendering.

Ttharuta
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 World Map

This visualization displays a Natural Earth projection world map with semi-transparent circles sized by city population. The map renders landmasses, country borders, and graticules using d3.geoPath and d3.geoNaturalEarth1, with data from World Atlas TopoJSON. City locations and populations come from a CSV file, with circle radii scaled by d3.scaleSqrt. The React component structure uses hooks to load both datasets asynchronously, and all marks are drawn as SVG elements.

Ssuserocc
93% match
Loading thumbnail…

Points on a Map

A world map populated with semi-transparent circles representing the populations of cities from a cleaned World Cities dataset. The visualization uses a Natural Earth projection rendered with `d3.geoPath`, layering graticules, land masses, and country borders beneath the points. Circle radii are scaled with `d3.scaleSqrt` based on population, capped at a maximum radius of 15 pixels. The React component fetches TopoJSON world atlas data and CSV city data, then renders the SVG marks with D3 v5.

Wwindwaver
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

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

Points on a World Map

This example displays global population distribution by plotting cities as semi-transparent circles on a natural Earth projection, with circle size scaled by population using a square-root scale. The visualization uses React for component structure, D3 v7’s `geoNaturalEarth1` and `geoPath` for map rendering, and TopoJSON to load world country boundaries. City coordinates and populations come from a CSV dataset, projected onto the map with `projection([lng, lat])`.

Ppranav-vis
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