Skip to main content
SimilarExport ZIP
100%

Locator Map

✓ Published0🌍 Public
CCurran Kelleher
Last edited Mar 7, 2025
Created on Mar 6, 2025
Forked from Spinning Globe

This locator map displays London, UK, as the central point, surrounded by major cities with population data plotted on a Mercator projection. It uses D3.js's `geoPath` and `geoMercator` for geographic projection, `geoGraticule` for the reference grid, and RBush for collision detection to intelligently label cities without overlap. The map includes a scale bar and city labels, with data sourced from TopoJSON world geography and a CSV of world cities.

AI-generated description

London Locator Map

This visualization shows a locator map for London, UK, displaying its geographical context and major surrounding cities.

The map uses D3's geographic projections to create a focused view of London, with:

  • London highlighted as the central point
  • Surrounding major cities labeled
  • Country borders
  • A graticule for geographic reference
  • A scale bar for distance reference

Data sources:

  • World geography from TopoJSON
  • Cities from a CSV dataset that includes population data

Built with D3.js for geographic projections and data visualization.

MIT Licensed

Similar vizzes

Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu
71% match
Loading thumbnail…

Untitled

This example presents a world map with red circles marking a curated list of cities, including Tokyo, London, and Easter Island. The map is built using D3.js version 3 with a Mercator projection and TopoJSON data for country boundaries. Users can pan and zoom the map via the d3.behavior.zoom API, while a tooltip-like styled div is defined but not activated. City coordinates are projected onto the SVG canvas using d3.geo.path.

NNaveed945
70% match
Loading thumbnail…

My map

This map displays European and North African cities as dark dots on a light landmass, with each city labeled by name. The visualization uses D3.js v5 to load geographic data from a GeoJSON file and city coordinates from a CSV file. It renders the map by applying the Mercator projection through `d3.geoMercator` and drawing paths with `d3.geoPath`, while circles and text elements are positioned using the same projection function.

Hhlkyt
70% match
Loading thumbnail…

United Kingdom MAP

This map of the United Kingdom displays geographic boundaries and town locations. It renders NUTS regions from a TopoJSON source using `d3.geoPath` with an equirectangular projection. Town data is fetched from a remote API and plotted as circles, with `title` tooltips showing county, population, town name, and coordinates. The visualization uses D3 v7 for SVG drawing and the `topojson` library for feature extraction.

22549239
69% match
Loading thumbnail…

My map

This example displays a map of Europe and North Africa with city locations marked by circles and labeled with their names. It uses a Mercator projection via `d3.geoMercator` and renders the country boundaries as SVG paths through `d3.geoPath`. City data from `cities.csv` is plotted as circles and text labels, with the map styled using custom CSS classes. The visualization loads both the GeoJSON country boundaries and the CSV data concurrently using `Promise.all`.

LLeo
69% match
Loading thumbnail…

Simple Leaflet Map

A simple interactive map centered on London demonstrates core Leaflet capabilities. The map displays OpenStreetMap tiles and includes a marker with a popup, a red circle, and a polygon, each bound to popups. Clicking anywhere on the map generates a popup showing the clicked latitude and longitude. The example uses the Leaflet JavaScript library and its `L.map`, `L.tileLayer`, `L.marker`, `L.circle`, `L.polygon`, and `L.popup` APIs to build the visualization.

Dd3noob
69% match
Loading thumbnail…

Cities on a Globe

This interactive globe visualizes cities with populations over 100,000 using circles sized by population. Users can pan and zoom the orthographic projection. The visualization renders country borders from world-atlas TopoJSON data and city coordinates from a Geonames CSV file. It leverages d3.geoOrthographic, d3.geoPath, d3.scaleSqrt, and d3-tip for tooltips, with d3.drag and d3.zoom handling interaction.

CCurran Kelleher
69% match
Loading thumbnail…

Map Pan / Zoom with Cities v5

This map example displays world country boundaries and major global cities, with interactive pan and zoom functionality centered on the Pacific Ocean. The visualization uses d3.geoMercator for projection and d3.geoPath to render geographic features from a TopoJSON world file. City locations from a CSV dataset are plotted as red circles, each hyperlinked to a Google search. Users can apply d3.zoom with a scale extent of 1 to 8, transforming both paths and circles accordingly. The map is rendered as SVG elements within a d3 selection.

Dd3noob
68% match