Sized Points on a Map

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 a Map

A world map displays cities with populations greater than 50,000 as sized circles, using a square-root scale to map population values to circle radii up to 15 pixels. The map is rendered in SVG with React, using D3’s geoNaturalEarth1 projection and geoPath to draw landmasses, country boundaries, and graticules. City coordinates and populations come from a Simplemaps dataset, loaded via d3.csv, while country geometries derive from World Atlas TopoJSON.

Aachintyatripathi

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 example displays cities with populations over 50,000 as sized points on a world map, using a square-root scale to encode population by circle radius. The map renders with the `geoNaturalEarth1` projection and `geoPath` in React, showing graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps via CSV, loaded with `d3.csv`. Circles are drawn with SVG, styled with a teal fill and 0.3 opacity.

Eerahma

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

Sized Points on a Map

Bbootshine2

Sized Points on a Map

A world map displays cities with populations over 50,000 as sized points, using a square-root scale to map population to circle radius up to 15 pixels. The visualization is rendered as SVG via React, with geographic features drawn using `d3.geoPath` and a Natural Earth projection from `d3.geoNaturalEarth1`. Country boundaries and graticules come from the World Atlas TopoJSON, while city coordinates and populations load from a Simplemaps CSV. The map uses `d3.scaleSqrt` for point sizing and an opacity of 0.3 for the city circles.

Mmkt-ds

Sized Points on a Map

This example displays a world map with cities sized by population, using a sqrt scale to encode values up to 15 pixels in radius. The map is rendered in SVG with d3.geoPath, d3.geoNaturalEarth1 for projection, and graticules for reference. City data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON. React manages the component state and lifecycle, fetching both datasets via d3.csv and d3.json before rendering.

JJens Grochtdreis