Lab 4: D3.js

This lab utilized QGIS, GeoJSON and D3 to create a map representing the chosen points for any artificial reasons. HTML , CSS and Javascript coding skills are required. A completed work can be refered to the following map.

Ideal Vacation Traveling Destinations

The below map shows 3 cities in the US that I respectively have the most interst to visit. Pllus a North-East city in Canada that I have been looking forward to travel to.

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.

    Answer: 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.

    Answer: Because of the #contents ID selector which cooperates with the CSS file althought I did not find this ID in our CSS code.

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

    Answer: The value we modified is an x value which may change longitude when we scroll along the x axis. The American Continents are located at respectively [90, 0].

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

    Answer: The syle that works with the GeoJSON files and indicate the location, I "quoted" from Martin`s on his page says that the style should look like this:


    Text-decoration: underline

  5. Plus, I did try the bonus part...but it just won`t stay with my first map peacefully. Thus, I made it a VIP room here: Click here.