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

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.

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

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.

Yyyaaa1
93% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
91% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
91% match
Loading thumbnail…

Sized Points on a Map

This example displays a world map with circles sized by city population, using a square-root scale to encode the values. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders landmasses, graticules, and interiors using `geoPath` and `geoGraticule`. City coordinates are projected from latitude and longitude, and the data comes from the Simplemaps World Cities Database. The React application leverages D3’s `csv` and `json` fetch methods, with SVG circles styled with a teal fill and partial opacity for a clean, polished look.

Qqhfzwyx
91% 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
91% 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
91% 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
90% 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
90% match