Viewing a saved revision (read-only)
81681d86d106412c8171b5678e7d6f05
Label Filtering Algorithm Prototype
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 descriptionA world map showing estimated population density contours. Computed from Simplemaps: World Cities Database, weighted using city populations. Contours and density estimation computed by d3-contour. Has zooming too!
The colors are computed by interpolating between the CubeHelix and Reds color scales. The interpolation is based on the estimated population density where the CubeHelix color scale is used at the first level of density, and as the density increases the colors loop around the red spectrum, using the Reds color scale. This technique is used to visually represent varying levels of density on the map.
Challenges
- Create a color legend
- Make this work with globe-based panning and zooming