Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
Yyyaaa1
Last edited Oct 20, 2019
Created on Oct 20, 2019

A world map displays cities with populations over 50,000 as semi-transparent circles, with point size proportional to the number of crimes. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, rendering spheres, graticules, and land boundaries from World Atlas TopoJSON data. Circle radii are scaled using d3.scaleSqrt, with city coordinates and crime statistics loaded from a CSV file. The React component architecture leverages hooks to fetch and process data asynchronously.

AI-generated description

A world map showing cities with population greater than 50,000. City data from Simplemaps: World Cities Database.

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 circles sized by city violent crime rates, using a square-root scale to encode the data. The map includes landmasses, graticules, and country borders rendered via `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 v5. City coordinates are projected from longitude and latitude to SVG circle positions. The visualization is built with React, loads data via `useWorldAtlas` and `useCities` hooks, and uses TopoJSON for country boundaries and CSV crime data.

Yyyaaa1
93% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semitransparent circles, sized proportionally to their population using a square-root scale. The visualization uses React for the user interface and D3 v5’s `geoNaturalEarth1` projection with `geoPath` to render country boundaries, graticules, and a sphere backdrop. City data comes from Simplemaps, while country shapes come from World Atlas TopoJSON. Circles are positioned via the projection and sized using `scaleSqrt` from D3, with opacity set through CSS.

Ssarabaghery76
92% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000, using scaled circle radius to encode population size. The visualization combines a Natural Earth projection rendered through d3.geoPath with graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps’ World Cities Database, loaded via d3.csv and projected onto the map. Circle sizes use d3.scaleSqrt for area encoding, with React managing the SVG rendering and d3.v5 providing the geographic and data utilities.

Nnnminh199914
92% match
Loading thumbnail…

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.

支支良
92% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, using circle size to encode population magnitude. The visualization renders geographic context via d3.geoNaturalEarth1 projection and d3.geoPath for landmasses, graticules, and country boundaries. City positions are projected from latitude and longitude coordinates, with circle radii scaled by a d3.scaleSqrt function representing population values. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON, while React components manage the SVG rendering.

Nnkohdatavis
92% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations exceeding 50,000, using circle size to encode population magnitude. The visualization renders geographic context via d3.geoNaturalEarth1 projection and d3.geoPath for landmasses, graticules, and country boundaries. City positions are projected from latitude and longitude coordinates, with circle radii scaled by a d3.scaleSqrt function representing population values. Data comes from the Simplemaps World Cities Database and World Atlas TopoJSON, while React components manage the SVG rendering.

Nnkohdatavis
92% match
Loading thumbnail…

Sized Points on a Map

A geographic visualization displays US cities as circles, with area proportional to total crimes reported. City data originates from a CSV file, while state boundaries and graticules are drawn from the us-atlas TopoJSON. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering map features, and d3.scaleSqrt to map crime counts to circle radii. React and D3 v5 manage the SVG output, with semitransparent teal points layered over a muted landmass.

Yyyaaa1
92% match
Loading thumbnail…

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