Points on Map Size

100%

Points on Map Size

✓ Published1🌍 Public

Last edited Aug 11, 2021

Created on Aug 11, 2021

This example visualizes the world's largest cities as proportional circles on a natural Earth projection, using a square-root size scale to encode population. The map is built with React and D3 v5, employing `geoNaturalEarth1` and `geoPath` to render land masses, graticules, and a sphere, while `geoGraticule` adds reference lines. City data originates from a CSV of world cities, loaded via D3's `csv` function, and the World Atlas TopoJSON supplies country boundaries. The SVG circles, styled with a teal fill and opacity, are positioned using the projection and sized based on population.

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

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

93% match

Loading thumbnail…

Points on a Map

This visualization displays a world map with circles positioned at the coordinates of cities. The size of each circle is proportional to the city's population, using a square root scale to visually encode the data. Built with React and D3 version 5, the map uses the `geoNaturalEarth1` projection and `geoPath` to render land, graticules, and country interiors from World Atlas TopoJSON. City data is loaded from a CSV file, and the visualization is rendered as SVG.

EEFezerKW

93% match

Loading thumbnail…

using size with points on a map

This example visualizes the world's most populous cities as circles overlaid on a natural Earth projection map, using square-root-scaled radii to encode population size. The map includes land masses, graticule lines, and country interiors. The visualization is built with React, uses d3.geoNaturalEarth1 and d3.geoPath for geographic projections, d3.scaleSqrt for sizing, and fetches city data from a CSV via d3.csv.

BBlake McCarty

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…

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)

This visualization shows world cities as semi-transparent circles on a natural Earth projection map, with circle size encoding each city's population using a square root scale. The map displays land masses, graticules, and country interiors rendered via `d3.geoPath`. City positions are projected from coordinates, while population data loads from a CSV using `d3.csv`. The React component structure uses hooks like `useState` and `useEffect` to fetch and manage both TopoJSON world atlas data and city data.

WWaseem Medhat

92% match

Loading thumbnail…

Points on a Map, Using Size

This visualization shows a world map with circles representing cities whose population exceeds 50,000 people. The size of each circle is proportional to the city's population, using a square root scale to map population values to radii. The map displays land masses in gray, graticules and interiors as thin lines, and the cities as semi-transparent teal dots. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection to render the map, and `d3.scaleSqrt` to create the size encoding. City data comes from a CSV file containing global city populations, while country boundaries are loaded from a world-atlas JSON file.

PPeter Krevenets

92% match