QGIS was used in this lab to transform the ESRI shapefile into GeoJSON file. We also added the place with marker in geojson.io, using the longitude and latitude for the specific place we would like to visit, in my case, St Pierre et Miquelon, Yellowknife and Napa, CA. The new location in Q1 being added is Montréal, Quebec, which I have visited for a few times.
The code for D3 to fit the generated image to the right spot on the page is shown in line 14 in the assignment, "var sc = Math.min(width,height) * 0.5;". We also pick value [90, 0] for rotation, as this value centers the map at 90°W longitude. Also, as one of my location, Yellowknife, Canada is located at a very high latitude, I rotated the map and made it centered at 90°W, 30°N so that this location will be shown on the map without obstruction.
Just like what we did with leaflet, I made another HTML document for D3 itself and embedded it into my Project 4 page with a line of iframe code. In the document for D3, I added a line of code "text-decoration: underline;" under the class selector of ".place-label", making the place label on the map underlined.