Skip to main content
SimilarExport ZIP
100%

Point size

✓ Published1🌍 Public
Ssurikmeetr
Last edited Mar 16, 2021
Created on Mar 16, 2021
Forked from Points on a map

A world map displays city populations as circles sized by a square-root scale. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for geographic features, with `scaleSqrt` mapping population values to circle radii. City coordinates come from a CSV, while land and country boundaries load from World Atlas TopoJSON. React handles component rendering, and D3’s `csv` and `json` fetch the data.

AI-generated description

World map loading geometry from World Atlas and city coordinates from csv, with point size based on city population.

MIT Licensed

Similar vizzes

Loading thumbnail…

Points on a Map with Size

A world map displays city populations as semi-transparent circles, with point size encoding each city’s population value via a square-root scale. The visualization uses the Natural Earth projection via d3.geoNaturalEarth1 and renders graticules, land masses, and country interiors with d3.geoPath. City coordinates are projected from longitude and latitude, while the map geometry comes from World Atlas TopoJSON processed with topojson.feature and topojson.mesh. React components manage the SVG rendering, and the data is loaded asynchronously from a CSV of world cities using d3.csv.

FFloorNummer
93% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using a square root scale to encode population values. The visualization renders geographic landmasses, graticules, and interiors via D3’s `geoNaturalEarth1` projection and `geoPath`, while city points are positioned with the same projection. Data comes from a Simplemaps CSV of cities with populations over 50,000, and country boundaries from TopoJSON’s world-atlas. React manages the component state, and SVG circles use a max radius of 15 pixels with a teal fill.

RRochelle
92% match
Loading thumbnail…

Points on a Map with Size

A world map displays cities as semi-transparent circles, with circle size encoding each city’s population using a square-root scale. The map renders geographic landmasses, graticules, and country borders from the World Atlas TopoJSON, projected with `d3.geoNaturalEarth1`. City data loads from a CSV via `d3.csv`, while React components manage state and render the SVG, using `d3.geoPath` to draw map features and `d3.scaleSqrt` for sizing.

CChris Knight
92% match
Loading thumbnail…

Sized Points on a Map

This example shows a world map with cities represented as sized points, where circle radius encodes each city’s population using a square-root scale. It uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and interiors from World Atlas TopoJSON, while city data comes from a Simplemaps CSV loaded via d3.csv. The React component passes a d3.scaleSqrt to SVG circles, with rendering handled in React and styling via CSS.

Bbootshine2
92% match
Loading thumbnail…

Sized Points on a Map

This example shows a world map with cities represented as sized points, where circle radius encodes each city’s population using a square-root scale. It uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and interiors from World Atlas TopoJSON, while city data comes from a Simplemaps CSV loaded via d3.csv. The React component passes a d3.scaleSqrt to SVG circles, with rendering handled in React and styling via CSS.

Bbootshine2
92% match
Loading thumbnail…

Points on a Map Using Size

A world map displays cities as semi-transparent teal circles, with each circle’s radius scaled by the square root of the city’s population. The basemap is rendered using `d3.geoNaturalEarth1` and `d3.geoPath` from the D3 v7 library, with graticules and land interiors styled via CSS. City coordinates from a CSV file are projected and drawn as SVG circles, sized using D3’s scaleSqrt. The code integrates React for UI management and fetches topology data from the World Atlas TopoJSON.

OOleg Zhernovoy
91% match
Loading thumbnail…

Points of a Map with Size

A world map renders populated cities as translucent circles, with point size encoding each city’s population through a square-root scale. Using D3’s `geoNaturalEarth1` projection and `geoPath`, the map displays landmasses, graticules, and country borders, while React components load data via the `useWorldAtlas` and `useCities` hooks. City coordinates are projected and drawn as SVG circles, with population data sourced from a CSV file and geographic boundaries from TopoJSON.

Ffjvoris
91% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, using circles sized by a square-root scale to represent population magnitude. The visualization employs a Natural Earth projection with graticules and country boundaries, rendered as SVG paths. City data comes from the Simplemaps World Cities Database, loaded via `d3.csv`, while country boundaries use TopoJSON from the World Atlas. The React app uses `d3.geoPath` for map geometry and `scaleSqrt` for circle radii, with semi-transparent teal circles overlaid on a light gray landmass.

EEric Ho
91% match