Project 4: D3

Map of desired travel locations in the Americas

This lab involved using geoJSON and D3 to create a wishlist of places I would like to visit in the North and South America. I used QGIS to convert country and time zone data from vector form into geoJSON. I then used geoJSON to create a list of points in North and South America that I would like to visit and downloaded these points in geoJSON format. I used D3 script to create a map of the countries and create labels for the points of intereste using the cities' names. I then added in the time zones by setting their fill color to "none" and making the stroke somewhat transparent so that they didn't detract from the purpose of the map, which was to represent places in North and South America I would like to visit.

(Q1): The city located at coordinates ( -73.66, 45.50) is Montreal. (Q2): The internal css line "var svg=d3.select ( "#contents" )" directed d3 to place this map into the correct position on the webpage. This command refers back to the div class I created within the body that has the attribute value set to "contents". This enables the div class in the body to be styled with the javascript data we need to display the map. (Q3). In order to center the display of the map on North and South America, I chose a rotation of [80,0] because the area of interest for this map is about 80 degrees west of the Prime Meridian, which is where the base map was centered. (Q4): In order to add underline to the labels of my locations, I would alter the CSS within the head of my html document. Under the style element for selector ".place-label", I would add the following property and value "text-decoration: underline."


Map of African Development Bank Activities (2009-2010)

I used the same country geoJSON file that I used in the previous map as a base for this map, but I rotated it to center on Africa rather than North and South America. I downloaded a geolocated data set of various African Development Bank projects that invested in different parts of Africa. I used geoJSON.io to convert the CSV into a geoJSON file, and then used d3 to represent these individual points on a map. I color coded the points based on the project type: yellow represents "agriculture projects", green represents "environmental projects", pink represents "social projects", purple represents "multisector projects", dark blue represents "water projects", red represents "power projects", and aqua represents "finance projects." The points are all somewhat transparent, so the opacity of points is an indication of the number of projects occurring in a particular place. The points outside of the continent reflect data points that were verified by aiddata.org, but I cannot speak to the veracity of the locations and the investment projects that might have occurred there.

The Countries.geoJSON file is linked here. The my_places.geoJSON file is linked here.

I downloaded the African Development Bank aid data I used to create my second map from Aiddata.org.