Sized Points on a map

Sized Points on a Map

This example visualizes global population distribution by rendering sized circles for cities with populations exceeding 50,000. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw countries, graticules, and interiors from World Atlas TopoJSON data. City positions are projected from latitude and longitude coordinates, with circle radii scaled by population using `d3.scaleSqrt`. The React component fetches city data from a Simplemaps World Cities CSV.

CClement Yan

Sized Points on a Map

This visualization displays a world map with circles sized proportionally to city populations, using data from Simplemaps and country boundaries from World Atlas TopoJSON. The map is rendered with SVG and React, employing d3.geoNaturalEarth1 and d3.geoPath for geographic projections, while a d3.scaleSqrt maps population values to circle radii. The visualization includes graticules and land/interior boundaries, with semi-transparent teal circles marking cities with populations over 50,000.

Ggilbertlmw

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal points, sized proportionally to population using a square-root scale. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses, graticules, and sphere geometry from World Atlas TopoJSON, while city coordinates are projected from a Simplemaps CSV. React components manage the asynchronous data loading via d3.csv and d3.json, with SVG circles positioned by the projection and radii mapped from the scale.

支支良

Sized Points on a Map

This visualization presents a world map with semi-transparent circles representing cities, where point size encodes each city’s area value. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, interior borders, and graticules. City positions are projected from latitude/longitude coordinates, with circle radii scaled using `d3.scaleSqrt`. The React component fetches world atlas TopoJSON and city data from a CSV URL, rendering SVG elements within a `Marks` component.

JJane Wang

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, using sized points to encode population via a d3.scaleSqrt square-root scale. The visualization renders a Natural Earth projection using d3.geoNaturalEarth1 and d3.geoPath, with graticules and country boundaries from World Atlas TopoJSON. City data from Simplemaps is plotted as semi-transparent circles. The React-based code loads TopoJSON and CSV data asynchronously, then applies d3.geoPath to project coordinates and d3.scaleSqrt to determine circle radii.

Aakp21

Sized Points on map

This example displays a world map with cities represented as sized points, where the radius of each circle corresponds to the city's population. The visualization uses a natural Earth projection, rendered via SVG in a React application, with the `d3.geoNaturalEarth1` projection and `d3.geoPath` for geographic boundaries. Graticules and land interiors are styled with subtle gray strokes, while city circles are drawn using `projection([d.lng, d.lat])` and scaled with `d3.scaleSqrt`. Data comes from a CSV of world cities and the World Atlas TopoJSON.

SShantanu

Sized Points on a Map

This visualization displays a world map with points sized by city population, using data from the Simplemaps World Cities Database for cities with over 50,000 residents. D3’s `geoNaturalEarth1` projection and `geoPath` render the sphere, graticules, and land boundaries from the World Atlas TopoJSON. A `scaleSqrt` maps population values to circle radii up to 15 pixels, while React composes the SVG elements. The semi-transparent teal circles overlay a light gray landmass, with country borders and graticules providing geographic context.

Aankita1mit

Kknut_ivar_osvoll@hotmail.com

Sized Points on a Map

This visualization displays world cities with populations exceeding 50,000 as sized points on a natural Earth projection. Circle radii encode population using a square root scale, with data sourced from the Simplemaps World Cities Database. The map renders via React and SVG, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to draw country boundaries and graticules, while TopoJSON provides land and interior mesh geometry.