Lab 5: GeoJSON and D3

This lab utilized tools like QGIS, GeoJSON and D3 to create a map displaying four desirable vacation destinations for the map creator. Knowledge of basic HTML and CSS were also needed to complete this lab. Default CSS code was altered to maps countries green and add a glowing effect around borders.

Vacation Destination Map

The below map shows desired vacation destinations for the map creator. Country fill color (green) and outline glow were both added to the D3 default output. Guadalajara will most likely be the next vacation destination, for the summer of 2016.

GeoJSON Files

Lab Questions

  1. In the JSON code, manually add a new point with the coordinates -73.66333007812499, 45.4986468234261. What city is this? Add the city name to the place_name table as shown above.

    The name of the city, as shown on the map, is Montreal

  2. How did d3 know to put the generated image into right spot on the page? Which line in the D3 script above controls this? Explain using HTML terminology.

    D3 knows to put the map into the content section of the HTML, because of the #contents ID selector in line 6 of the displayed code. This line also communicates with the CSS through the #contents ID.

  3. Why did we pick a value of around 90?

    The 90 value is an x axis value which rotates the earth on its axis to show different longitude values in the map extent. The second value refers to latitude extent and will change the view to face closer to either pole. The Americas are located at the 90 x value.

  4. What CSS style would we need to add and where if we wanted to underline the labels?

    Within the style.CSS document, we would need to add another class selector under the #contents ID. It may look something like this:

    .my_places

    Text-decoration: underline