Label Filtering Algorithm Prototype

100%

Label Filtering Algorithm Prototype

✓ Published3🌍 Public

Last edited Oct 9, 2025

Created on Jul 11, 2024

Forked from Visualizing Population Centers

This interactive prototype demonstrates a label placement algorithm for maps, rendering a world map with city labels sized by population and color-coded population density contours. The visualization uses D3.js for map projection with `geoNaturalEarth1`, data loading, and zoom interactions, while `rbush` implements spatial indexing to detect overlapping labels. City data comes from a reduced world cities CSV file, and geographical boundaries are drawn from TopoJSON world atlas data. The prototype filters cities by a population threshold and iteratively adjusts label positions to minimize collisions against the computed bounding boxes from SVG text elements.

AI-generated description

A proof of concept for a label placement algorithm that can be used to add labels to maps and scatter plots.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Label Filtering Algorithm Prototype

This visualization demonstrates a label placement algorithm for maps and scatter plots, showing city names positioned without overlapping. It projects world cities using a Natural Earth projection and renders population density as colored contours. The code uses D3 methods like `geoNaturalEarth1`, `contourDensity`, and `scaleSequential` for the map, while collision detection relies on the RBush spatial index. Labels are filtered by population threshold and hidden when their bounding boxes intersect, with data from the visionscarto-world-atlas and worldcitiesReduced datasets.

GGuo Ci

89% match

Loading thumbnail…

Automatic Label Placement

This example demonstrates automatic label placement on a choropleth map of the United Kingdom, building on Mike Bostock’s “Let’s Make a Map” tutorial. It shows how collision detection iteratively separates overlapping city name labels by adjusting their SVG transform translations until no overlaps remain. The map uses D3 v3 with `d3.geo.albers` projection, TopoJSON for geographic features, and SVG paths for subunit boundaries and place markers. Label positions are refined through a loop that compares `getBoundingClientRect` values and moves conflicting texts apart.

RRicCheng

74% match

Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu

73% 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

73% match

Loading thumbnail…

Elliptic / scaled Polylabel with D3

This example demonstrates three different approaches to finding label placement points within countries on a world map: the orange centroid, the white polylabel, and a green elliptic polylabel that accounts for different x and y scales to fit horizontal text. The visualization uses d3.geoRobinson for projection and d3.geoPath to render world map data from the visionscarto-world-atlas TopoJSON. It applies Mapbox’s polylabel algorithm twice on projected polygon coordinates—once normally and once with x-coordinates scaled by a factor of 4—to compute the largest ellipse-fitting point.

PPhilippe Rivière

73% match

Loading thumbnail…

Voronoi Labels

This example demonstrates a technique for labeling points on a map by positioning text labels in the empty spaces between them, using Voronoi diagrams. The visualization computes a Voronoi tessellation of the point locations and then places each label within its corresponding cell, avoiding overlaps. Built with D3.js, it uses `d3.Delaunay` for triangulation, `d3.Voronoi` for the diagram, and a force-directed layout algorithm (`d3.forceSimulation`) to refine label positions. The underlying data comes from a set of U.S. city coordinates, rendered as circles on a projected map.

Mmbostock

73% match

Loading thumbnail…

Fork of Zoomable Globe with Cities Template

This interactive globe visualizes world cities on a rotatable, zoomable orthographic projection with labels sized by population and collision detection. It renders the base map on Canvas using d3.geoOrthographic and d3.geoPath, overlays SVG text labels, and enables drag-to-rotate and scroll-to-zoom via d3.drag and d3.zoom. City and country data load from external JSON and CSV sources, and an RBush spatial index prevents label overlap.

SS Anand

73% 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

72% match