Skip to main content
SimilarExport ZIP
100%

Points on a map

✓ Published1🌍 Public
Ccynichole
Last edited Mar 7, 2022
Created on Mar 7, 2022
Forked from Map of the World

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.

AI-generated description

The Iris Data set. 'https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/639388c2cbc2120a14dcf466e85730eb8be498bb/iris.csv';

MIT Licensed

Similar vizzes

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

Points on a Map

This example displays a world map with points representing cities, with circle sizes scaled by population using a square-root scale. It shows a natural Earth projection with graticules and country boundaries overlaid. The visualization uses React to manage state and rendering, while D3 v5 provides `geoNaturalEarth1`, `geoPath`, `geoGraticule`, and `scaleSqrt`. City data comes from a CSV file, and world geography is loaded as TopoJSON. Circles are semi-transparent teal, plotted via projected longitude and latitude coordinates.

Aazharahmad0
95% match
Loading thumbnail…

Points on a Map

This example displays a world map with city points scaled by population, using a natural Earth projection. The visualization layers graticules, land masses, and country borders beneath translucent teal circles. React components manage the rendering, while D3 utilities handle geographic projections and data loading. The size of each circle is determined by a square root scale mapping population values to a maximum radius of 15 pixels, with city data sourced from a CSV of world cities and geographic features from a TopoJSON world atlas.

LLaura Johnson
95% match
Loading thumbnail…

Points on a Map

A world map rendered with a natural Earth projection displays cities as semi-transparent teal circles, with circle area scaled by population using a square-root scale. The visualization pairs D3’s geoNaturalEarth1 projection and geoPath with React components to draw landmasses, graticules, and country interiors. City coordinates and population data come from a CSV file, while geographic boundaries load via TopoJSON from the world-atlas package.

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

Points On A Map

This example displays global population data as scaled circles on a world map. Using the D3.js projection API `geoNaturalEarth1` and `geoPath`, it renders landmasses, graticules, and country interiors, while city points are positioned via the projection and sized with a square-root scale tied to population values. The visualization is built with React, uses the World Atlas TopoJSON dataset, and loads city data from a CSV file.

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