Lab 4: D3.js and GEOJson

In this lab, we utilized GEOJson code, as well as D3.js to create a map with specific markers. These markers indicate the cities the map creator wishes to visit. You can see that the places I wish to visit some day include Vancouver, Montego Bay, and Buenos Aires. To download the GEOJson code for the countries used in my map click here Countries , and to access the GEOJson code used to mark the cities I wish to visit click here My_Places.

Lab Questions

1. Coordinates of -73.66333007812499, 45.4986468234261, when added to our GEOJson code, places a marker on the map at Montréal, QC.

2. D3 knew to place our simplified map of the Americas onto the right spot of our webpage because of the #contents ID selector. We see this on line 78 where we use var svg ="#contents") to reference where in the HTML the map should be placed.

3. We used a value of 90 because this allows for a rotation of 90 degrees on the map, which makes North and South America the only visible portion on the map.

4. To underline the city labels, we need to add a property called "text-decortion:" with the value being "underline" to the labels' CSS element.