Project 4

Project description

For this project, we created a map of cities in the Americas that we would like to visit. The first step for this project was to create simplified geometries using QGIS for our countries shape file and then save the file as a geojson. Using, we created our own data for the cities we would like to visit. Next, we added the proper coding in our html document to link to the d3 library. We also added some CSS style coding in our head element to included the "countries" class for later editing. In order to prepare where we wanted our map to show up, we cleared the contents of our div id="contents". From here, we started working on our D3 coding which included selecting our "contents" div id and loading our countries.geojson file and giving it a class so that it's style could be edited. We also changed some of the code to make sure our map was centered on the Americas by picking a value around 90. After the map was properly centered, we added the corresponding CSS style coding for our city point and labels within the style tag of our head element. The final piece of D3 coding involved loading the geojson date we created for our city points and labels, and giving each its own class so that it could be edited using the CSS style.

For extra credit, I also added an additional overlay displaying timezones to the map. This was done similarly to the rest of the project and involved converting a timezone shapefile to geojson and then adding the D3 coding to load the data and specify it's style class for CSS style editing.

The following are links to download the geojson data I used for the project: Countries , My Places, Timezones

Question 1: the city with the coordinates -73.66333007812499, 45.4986468234261 is Montreal.

Question 2: D3 knows to put the generated image into the right spot on the page because the D3 lines var svg ="#contents") is selecting the div id="contents" coding line we previously created to hold our image. This div id allows D3 to properly place the image.

Question 3: We picked a value of around 90 (for my map I used a value of 72) in the D3 script in order to make sure our map was centered to allow all of our points and labels to be visible. The rotate function in D3 allows us to specify the angles we want for the projection's three-axis rotation. In our case, a value of around 90 allows our map projection to focus on North and South America.

Question 4: in order to underline our place labels, we would need to add the CSS coding line text-decoration-line: "underline"; underneath the coding for .place-labels which is found in the style tag within our head element.

The data used for this project can be found at For Question 3, I used the following file on GitHub for reference. And for the extra credit option of adding the timezones overlay, I used the following webpage as a reference Timezones