Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Label Filtering Algorithm Prototype

Public visualization

Viewing a saved revision (read-only)

34d8b548ac66444d9bfaa16d88814c1c

Label Filtering Algorithm Prototype

0 stars3🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Jul 11, 2024

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