Top 20 Women’s Soccer Players
Create a choropleth map that shows the number of top women’s players in each country using the FIFA data and the countries.geo.json file. Use a sequential color scale to indicate the number of players from each country.
Remember that you will need to choose a projection for the map. D3 includes a number of standard projections in the default bundle, but you may also use those from d3-geo-projection. Note that d3-geo-projection requires an extra JavaScript library to be loaded. You may choose the projection, but it must show the entire world. The countries.geo.json file contains a three-character id attribute for each feature (which in this file is a country’s boundary). It also provides a longer name attribute in the properties object of the feature. Given a feature d, we can access the country’s name via d.properties.name.
You will need to generate the counts of Top 20 players for each country. The fifa-17-women.json file has an object for each player with three properties: Name, Rating, and Country. You may use an object or a d3.map to generate these counts. The Country attribute will match a feature’s name property (as described above) in the countries.geo.json file.
For the map, you will want to use each country as a separate feature. Thus, instead of mapping all of the data using the .datum(mapData) as we did in class, you should use mapData.features with the normal selection plus data binding. Each feature will have an id attribute that can be used with the counts to derive the fill color.
Finally, to load multiple external data files using D3, use the queue library by Mike Bostock. This is part of the default D3 v4 bundle so you do not need to add another JavaScript libraries (as you did with D3 v3) Then, to load the three JSON files file1.json, file2.json, and file3.json:
function processData(errors, file1data, file2data, file3data) { // code } d3.queue() .defer(d3.json, “http://example.com/path/to/file1.json”) .defer(d3.json, “http://example.com/path/to/file2.json”) .defer(d3.json, “http://example.com/path/to/file3.json”) .await(processData);
Example Solution for Part 1
Hints
Each country is a feature so if mapData is the variable loaded by d3.json, mapData.features is a list of all of the states (and territories).
Remember that d3.geoPath can have an associated projection and can be used to translate GeoJSON features into paths on screen.
d3.scaleSequential can help with colormapping. Remember to check the type of the values you are displaying to determine a correct colormap.
Create a second choropleth map that shows the number of top men’s players in each country using The Guardian’s data in guardian-16-men.json and the same countries.geo.json file. The men’s data has the fields: Name, Age, Club, League, Nationality, Position, and Rank. Important: To map to a country, use the Nationality field (different from the women’s data).
Most of this visualization will overlap with the logic for Part 1. Create a function that will draw a map and has parameters for the data, divId, etc., that can be called for both Part 1 and Part 2. You will lose 6 points if you do not have such a reusable function.
Data:
Top 20 Women’s Players: http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a3/fifa-17-women.json
Top 100 Men’s Players: http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a3/guardian-16-men.json
World Map: https://cdn.rawgit.com/johan/world.geo.json/master/countries.geo.json
