Skip to main content
SimilarExport ZIP
100%

Sized Points on a Map

✓ Published0🌍 Public
CChris Briggs
Last edited Nov 18, 2021
Created on Nov 18, 2021
Forked from Points on a Map

This example displays a natural Earth projection world map with cities rendered as semi-transparent points, where point size encodes population using a square root scale. The visualization layers graticules, land masses, and country borders using `geoPath` and `geoGraticule` from D3 v5, while React manages the component state and SVG rendering. City data is loaded from a CSV file with population values, and the map uses geographic coordinates projected through `geoNaturalEarth1`. The visualization demonstrates how to combine D3’s geographic and scaling utilities within a React-based SVG scene.

AI-generated description

A line chart using time San Francisco Temperatures

MIT Licensed

Similar vizzes

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

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
93% match
Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, sized proportionally using a square-root scale. The visualization layers Natural Earth landmasses, graticules, and a sphere outline, rendered via `d3.geoPath` with a `geoNaturalEarth1` projection. City coordinates and population data come from a CSV fetched using `d3.csv`, while country boundaries use TopoJSON converted with the `feature` API. React manages component state, with the SVG marks generated through the `Marks` component, combining `d3.scaleSqrt` for radius scaling and `d3.max` for domain calculation.

BBizmundo
93% match