Skip to main content
SimilarExport ZIP
100%

City density filtering by population and proximity

✓ Published2🌍 Public
AAlan McConchie
Last edited Jun 12, 2024
Created on Jul 27, 2021

This interactive map visualizes global city density by filtering prominent urban centers from smaller neighbors. Gray dots represent all cities with populations over 50,000 from OpenStreetMap data, while blue and white highlighted cities emerge through an iterative algorithm that suppresses less populous cities within proximity-based buffers. The visualization uses D3.js with `geoNaturalEarth1` projections, `geoPath` for rendering country boundaries from World Atlas TopoJSON, and Turf.js functions like `buffer`, `booleanPointInPolygon`, and `distance` to calculate exclusion zones. Circle sizes reflect population through a square-root scale, while buffer radii decrease for larger cities.

AI-generated description

A world map showing cities with population greater than 50,000. City data from OpenStreetMap, querying all features with place=city.

Gray dots are all the cities in the input data. (Cities in India are missing from this dataset)

Blue and white dots show biggest cities with all their smaller neighbors (within a given radius) filtered out.

Country boundaries from World Atlas TopoJSON, polished for visual style. (That part forked from Sized Points on a Map)

ISC Licensed

Similar vizzes

Loading thumbnail…

Fork of City density filtering by population and proximity

A world map displays cities with populations over 50,000 sourced from OpenStreetMap, rendered as gray dots alongside highlighted prominent cities. The visualization iteratively filters smaller cities within a distance buffer of larger ones, with blue and white circles indicating surviving cities and their ranks. Using d3.geoPath with a Natural Earth projection, it sizes circles via d3.scaleSqrt and employs @turf/turf functions like buffer and booleanPointInPolygon to determine proximity suppression. Country outlines come from World Atlas TopoJSON.

AAndre J Denais
91% match
Loading thumbnail…

City density filtering by population and proximity, Mercator

This visualization filters city labels by population and proximity on a Mercator projection. Gray dots represent all cities from an OpenStreetMap dataset (tagged `place=city`), while highlighted dots show larger cities with smaller neighbors filtered out within a variable buffer radius. The example uses `d3.geoMercator` and `d3.geoPath` for mapping, `d3.scaleSqrt` for circle sizing, and `d3.scaleLinear` for buffer scaling. Country boundaries come from World Atlas TopoJSON, processed with the TopoJSON library. The algorithm applies a proximity-based filtering approach with variable buffer distances, demonstrating a method for decluttering dense point data.

AAlan McConchie
90% match
Loading thumbnail…

City density filtering by population and proximity

This example displays a world map with cities filtered by population, showing only those with over 2 million residents as semi-transparent circles scaled by population size via `d3.scaleSqrt`. Geographic context comes from World Atlas TopoJSON, rendered using `d3.geoNaturalEarth1` and `d3.geoPath`. React manages the component state, fetching city data from an OpenStreetMap CSV through a custom `useCities` hook, while the `Marks` component renders the projected spheres, landmasses, and boundaries.

AAlan McConchie
84% match
Loading thumbnail…

Points On A Map III

This visualization displays over 4 million cities and towns worldwide as semi-transparent blue circles on a natural Earth projection. Circle radius encodes each city’s population using a square-root scale, with larger dots representing more populous urban centers. The map renders geographic features via d3.geoPath, including landmasses, graticules, and country interiors from the world-atlas TopoJSON dataset. City coordinates and population data come from a Simplemaps CSV file, while the visualization is built with React, D3 v5, and SVG, offering a comprehensive view of global population distribution.

Aadewole-top
79% match
Loading thumbnail…

Points on a Map

This interactive map displays global city populations as semi-transparent circles on a natural Earth projection, with country boundaries and graticules. The visualization uses d3.geoPath to render the sphere, graticules, and landmasses from the World Atlas TopoJSON. City coordinates are projected using d3.geoNaturalEarth1, with circle radii scaled by d3.scaleSqrt based on population data from a CSV file. The map is built as a React application using SVG for rendering.

Ttharuta
78% match
Loading thumbnail…

Cities on World Map

This example displays a world map with city populations overlaid as semi-transparent circles. Country boundaries appear as gray landmasses with interior borders, alongside graticules and a sphere outline. The visualization uses D3’s geoNaturalEarth1 projection and geoPath to render the map, with a sqrt scale mapping city population to circle radius. Data comes from a CSV of world cities and TopoJSON land geometry, rendered as SVG within a React framework.

CCatalina Vajiac
78% match
Loading thumbnail…

World city population

This visualization displays a world map with dots representing cities, sized by population. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with landmasses, graticules, and country borders rendered as SVG paths from TopoJSON data. City coordinates are projected using the same projection function, and each city is drawn as a small semi-transparent circle. The data comes from a CSV file loaded with `d3.csv` in React, and the visualization is built with React components, D3 v5, and SVG, styled with a clean, minimalist aesthetic.

Jjabowen2020@gmail.com
77% match
Loading thumbnail…

City sizes on a Map

This visualization displays global city populations using circles plotted on a world map, with dot radius scaled by the square root of population via d3.scaleSqrt. It uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and country interiors. React manages component state, while d3.csv and d3.json load city data from a gist and world-atlas TopoJSON. Circle opacity and fill are styled via CSS, showing cities over 50,000 inhabitants.

LLove Wessman
77% match