Search⌘ K

Displaying Points on a Map

Explore how to display city points on a world map using D3.js by loading CSV data with latitude and longitude. Understand how to manage loading order to ensure map and points appear correctly, and learn to make the points zoom and pan with the map for interactive visualization.

We'll cover the following...

Displaying maps and exploring them is pretty entertaining. But as any modern cartographer can tell you, there’s a whole new level of cool to be attained by adding to a map.

With that in mind, our next task is to add some simple detail in the form of points that show the location of cities.

To do this, we will load in a CSV file with data that identifies our cities and includes latitude and longitude details. Our file is called cities.csv and looks like this:

code,city,country,lat,lon
ZNZ,ZANZIBAR,TANZANIA,-6.13,39.31
TYO,TOKYO,JAPAN,35.68,139.76
AKL,AUCKLAND,NEW ZEALAND,-36.85,174.78
BKK,BANGKOK,THAILAND,13.75,100.48
DEL,DELHI,INDIA,29.01,77.38
SIN,SINGAPORE,SINGAPOR,1.36,103.75
BSB,
...