Skip to main content
SimilarExport ZIP
100%

Fork of City density filtering by population and proximity

✓ Published0🌍 Public
AAndre J Denais
Last edited Aug 25, 2021
Created on Aug 25, 2021

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.

AI-generated description

Special Thanks to Alan McConchie for all the interesting things I've been forking for learning purposes.

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…

City density filtering by population and proximity

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.

AAlan McConchie
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
86% 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…

Fork of world map w/ cities & countries pop!

A world map visualization displays cities with populations over 50,000 as scaled circles, while country polygons are shaded by population density with hover tooltips. Using React with the d3-geo-projection library, it applies a natural Earth projection and renders graticules, geographic lines, and country boundaries via `geoPath`. City radii use a square-root scale based on population data from Simplemaps, while country opacity maps to UN population data from a CSV file.

GGogineni44
82% match
Loading thumbnail…

Fork of Cities on a Globe

This interactive visualization shows a globe displaying circles for cities with populations over 100,000, using data from Geonames. Users can pan and zoom the orthographic projection, with low-resolution world boundaries shown during movement and higher-resolution boundaries when settled. The globe is rendered using d3.geoPath with a d3.geoOrthographic projection, while city positions are computed and projected onto the SVG. d3.drag handles rotation, and d3.zoom manages scaling. Hovering over a city reveals a tooltip, implemented with d3-tip, showing the city name and formatted population. Data includes country outlines from the world-atlas TOPOJSON files and city coordinates from a preprocessed CSV.

PPiotr Paszek
82% match
Loading thumbnail…

Fork of Sized Points on a Map

This visualization displays global cities with populations over 50,000 as semi-transparent circles on a natural Earth projection map. Circle size encodes population using a square root scale, with the largest cities reaching 15 pixels in radius. The map renders country boundaries and graticules using d3.geoPath with TopoJSON data from the World Atlas, while city coordinates come from a Simplemaps CSV. Built with React and d3.v5, the SVG map overlays scaled circles onto the projected geographic features, filtered from the complete world cities dataset.

Bblueyjuice
82% match
Loading thumbnail…

Fork of Cities on a Globe

This visualization displays a three-dimensional globe with colored circles marking cities with populations over 100,000, drawn from preprocessed Geonames data. Users can drag to rotate the Earth and scroll to zoom, with smooth transitions between low- and high-resolution country boundaries from the TopoJSON World Atlas. The code uses d3.geoOrthographic for projection, d3.geoPath to render geographic features, and d3.drag with d3.zoom for interaction. Circle sizes scale with population using d3.scaleSqrt, and hovering reveals a city’s name and population via d3-tip tooltips.

CCristina Macaraig
82% match
Loading thumbnail…

Fork of world map w/ cities & countries pop!

A world map visualization displays global city populations and country population data, with city circles sized by population and country polygons colored by opacity according to population. The visualization uses a Natural Earth projection from d3-geo-projection, rendered with React and SVG paths via d3.geoPath. City data comes from the Simplemaps World Cities Database, while country boundaries use World Atlas TopoJSON. Hovering over cities or countries reveals population tooltips, with graticules and geographic reference lines overlaid for context.

Ssrividyap03
82% match