Learning D3.js 5 Mapping - Second Edition

Experiment 5 – adding points of interest

So far, everything we have done has involved working directly with the geographic data and map. However, there are many cases where you will need to layer additional data on top of the map. We will begin slowly by first adding a few cities of interest to the map of Mexico.

This experiment will, again, require us to start with example-3.html. The complete experiment can be viewed at: http://localhost:8080/chapter-4/example-6.html.

In this experiment, we will add a text element to the page to identify the city. To make the text more visually appealing, we will first add some simple styling in the <style> section:

text{ 
  font-family: Helvetica; 
  font-weight: 300; 
  font-size: 12px; 
} 

Next, we need some data ...