Skip to main content
SimilarExport ZIP
100%

Sized Points on map

✓ Published0🌍 Public
SShantanu
Last edited May 20, 2021
Created on May 20, 2021
Forked from Points on a ma

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.

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…

Sized Points on a Map

This example displays a world map with sized points representing cities, where the circle radius encodes each city's population using a square root scale with a maximum radius of 15 pixels. It renders the Natural Earth projection via d3.geoPath, including graticules and land boundaries from Topojson World Atlas data. City coordinates and population values come from a CSV dataset, and the visualization uses React for component structure alongside D3 v6 for geographic projections and scales, with all marks drawn as SVG elements.

WWolfgang
96% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized proportionally to city populations, using data from the Simplemaps World Cities Database. The map renders geographic features with d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule, while country boundaries load from World Atlas TopoJSON. City points are placed via projection coordinates and scaled with d3.scaleSqrt, all built within a React component using SVG. The visualization includes graticules and styled land, sphere, and interior paths for a polished cartographic look.

GGustavoRiveraM
95% match
Loading thumbnail…

Sized Points on a Map

This visualization shows a world map with cities colored by population, using sized points where larger circles represent more populous cities. The map displays graticules, sphere outlines, and country boundaries with interior borders for clarity. Built with React and D3 v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering the map, while a `scaleSqrt` function maps city populations to circle radii. City data comes from Simplemaps World Cities Database, with country boundaries from World Atlas TopoJSON, all rendered as SVG elements.

Ssophburke
95% 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
94% 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
94% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with city points sized by population. It uses a Natural Earth projection via D3's `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors. The map’s cities, sourced from a Simplemaps database, are drawn as SVG circles with radii scaled by the square root of population using D3’s `scaleSqrt`. The visualization is built with React and D3, with styles for the land, sphere, and graticules defined in CSS, and data loaded asynchronously from external files.

Fftjyangf
94% match
Loading thumbnail…

Sized Points on a Map

This example presents a world map with cities sized proportionally to their population, using a square-root scale to encode the data. The visualization renders geographic features like landmasses, graticules, and country boundaries using `geoNaturalEarth1` and `geoPath`, while city points are drawn as SVG circles positioned via the projection. The map is built with React and D3 v5, pulling city data from a CSV of the Simplemaps World Cities Database and country topology from World Atlas TopoJSON.

CCurran Kelleher
94% match
Loading thumbnail…

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
94% match