Skip to main content
SimilarExport ZIP
100%

Points on a Map

✓ Published0🌍 Public
Ttharuta
Last edited Aug 7, 2021
Created on Aug 7, 2021
Forked from Polished World 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.

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

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

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

Points on a Map

This example displays world cities as semi-transparent circles on a natural Earth projection, with circle size encoding each city's population. The map renders landmasses and country borders from the world-atlas TopoJSON dataset, with graticules and a sphere outline providing geographic context. Using React hooks to load data asynchronously, the visualization applies d3.geoNaturalEarth1 and d3.geoPath for projection, d3.scaleSqrt for radius scaling, and maps city coordinates through the projection to position SVG circles.

Jjbruzzo
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 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 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

Global city populations are visualized as semi-transparent points on a natural Earth projection, with point size encoding population via a square-root scale and a maximum radius of 15 pixels. The map includes graticules, country borders, and landmasses rendered using `d3.geoPath` and world-atlas TopoJSON data. City coordinates and populations come from a CSV loaded with `d3.csv`, while the React application uses hooks to fetch and render the visualization with SVG.

KKazushige Okuma
93% match