Points on a Map

100%

Points on a Map

✓ Published4🌍 Public

Last edited Feb 14, 2022

Created on Oct 3, 2021

This map displays world cities as glowing gold points, with point size proportional to population using a square-root scale. Landmasses appear in muted brown, interior borders in blue-gray, and a graticule overlays the sphere. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath` for shapes, and `geoGraticule` for the grid. City coordinates and populations load from a CSV via D3’s `csv` parser, while world topology comes from a TopoJSON file processed with `topojson`’s `feature` and `mesh` functions.

AI-generated description

A ScatterPlot of Week's Temperature

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Points on a Map

A world map displays cities as semi-transparent, radius-scaled circles proportional to population, using a Natural Earth projection. The visualization, built with React and D3 (v5), renders SVG paths for land, graticules, and sphere outlines via `geoPath`, while circles are projected using `geoNaturalEarth1`. City data comes from a CSV of world cities, and the map’s geographic basemap is provided by the `world-atlas` TopoJSON, processed through `topojson.feature` and `topojson.mesh`.

RRajat Dangat

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

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

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

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

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

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

92% match