Adding names to places

100%

Adding names to places

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Nov 8, 2014

This example shows a world map with red dots marking cities and their names placed just above each point. It uses D3.js version 3.5.17 with a Mercator projection and TopoJSON to render country outlines from a world-110m2.json file. City coordinates are loaded from a CSV file and plotted using `d3.geo.path`. The city labels are SVG text elements anchored above each circle, and each dot links to a Google search for that city. The map supports zoom and pan through `d3.behavior.zoom`.

AI-generated description

This small example was made to answer a quesition on the d3noob.org blog about how to add the names of the cities beside the dots.

mit Licensed

Similar vizzes

Loading thumbnail…

World map with zoom / pan and cities

This example presents a world map rendered with SVG, featuring zoom and pan controls. It overlays red circular markers on select global cities, which are loaded from a CSV file and positioned using the Mercator projection via `d3.geo.mercator()`. Each city marker is hyperlinked to a Google search for its name. The map’s geography is drawn from a TopoJSON file, with paths generated through `d3.geo.path()`, while zooming and panning are handled by `d3.behavior.zoom()`.

Dd3noob

83% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v6

This D3.js (version 6) example displays a world map centered on the Pacific Ocean using a Mercator projection, with red circles marking cities from a CSV data file and city names as text labels. Each city is hyperlinked to a Google search for its name. The visualization supports pan and zoom interactions through the `d3.zoom` API, applying the zoom transform to the map paths, city circles, and text elements. The map geometry comes from a TopoJSON file processed with the `topojson` library, and all rendering uses SVG.

Dd3noob

82% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v7

This example shows a world map centered on the Pacific with red city markers and text labels for each city, all of which can be panned and zoomed together. The map is rendered using D3 v7 with a Mercator projection and a topojson world dataset. City positions are projected from latitude and longitude coordinates loaded from a CSV file. D3’s zoom behavior applies a transform to the map paths, circles, and text, and each city label links to a Google search for its name.

Dd3noob

82% match

Loading thumbnail…

Map Pan / Zoom with Cities and Text v5

This example displays an interactive map of the world centered on the Pacific, overlaid with red circular markers for eleven cities and their labels. Pan and zoom controls are implemented using the `d3.zoom` API, which applies SVG `transform` attributes to all map paths, circles, and text. The map geometry and city positions are projected using `d3.geoMercator` and `d3.geoPath`, with country outlines loaded from a TopoJSON file. City coordinates come from a CSV loaded via `d3.csv`, and text labels are placed above each marker, each linking to a web search.

Dd3noob

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

81% match

Loading thumbnail…

Map Pan / Zoom with Cities v6

This example shows a Mercator map of the world centered on the Pacific Ocean, with red circles marking eleven cities from a CSV file. Users can pan and zoom the entire map and city markers using the d3.zoom behavior, with a scale extent of 1 to 8. The map is rendered as SVG paths from a TopoJSON file via d3.geoPath, while city positions are projected using d3.geoMercator. Each city circle is wrapped in a link that opens a Google search for that city.

Dd3noob

81% match

Loading thumbnail…

Start WorldMap

A world map rendered with `d3.geoMercator` displays country boundaries from a TopoJSON file. Red circular markers and city name labels are projected onto the map from a `cities.csv` dataset, with each marker linking to a Google search for its city. The map supports interactive pan and zoom through `d3.zoom`, applying the zoom transform to all paths, circles, and text elements. The SVG visualization uses `d3.json`, `d3.csv`, `d3.geoPath`, and the TopoJSON `feature` method to convert the topology into geographic features.

BBart van Pelt

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

79% match