edited csv to align with geojson and fixed map proportions

version2/map.js

@@ -10,7 +10,7 @@ function getData(countryName, csvData, selectedOption) {
 function getColor(d, csvData, selectedOption, colorScale) {
     const dataValue = getData(d.properties.ADMIN, csvData, selectedOption);
     if (dataValue === null) {
-        return 'black'; // Color for countries with no data
+        return 'grey'; // Color for countries with no data
     }
     return colorScale(dataValue); // Use a color scale for data values
 }
@@ -41,12 +41,12 @@ function loadMap() {
             // Create the SVG element for the map with a white background
             const svg = d3.select("#map-container").append("svg")
                 .attr("width", 960)
-                .attr("height", 600)
-                .style("background-color", "white"); // Set background color to white
+                .attr("height", 610)
+                .style("background-color", "#E9c46a"); // Set background color to white
 
             // Define a projection and path generator
             const projection = d3.geoNaturalEarth1()
-                .scale(153)
+                .scale(170)
                 .translate([480, 300]);
             const path = d3.geoPath().projection(projection);
 
@@ -121,11 +121,11 @@ function loadMap() {
 // Function to add a legend to the map
 function addLegend(svg, colorScale) {
     // Define dimensions and position for the legend
-    const legendWidth = 900;
-    const legendHeight = 20;
+    const legendWidth = 800;
+    const legendHeight = 15;
     const legendMargin = { top: 30, right: 30, bottom: 30, left: 30 };
     const legendX = (960 - legendWidth) / 2; // Center the legend horizontally
-    const legendY = 570 - legendHeight - legendMargin.bottom; // Position legend at the bottom
+    const legendY = 590 - legendHeight - legendMargin.bottom; // Position legend at the bottom
 
     // Create a group element for the legend
     const legend = svg.append("g")
@@ -167,8 +167,8 @@ function addLegend(svg, colorScale) {
 
     legend.append("text")
       .attr("x", 0)
-      .attr("y", legendHeight + 40)
-      .text("Note: Countries with black-fill do not have data available on the selected indicator")
+      .attr("y", legendHeight + 30)
+      .text("Note: Countries with grey-fill do not have data available on the selected indicator")
       .style("fill", "black");
 }
 

version2/whoiswinning.csv

@@ -11,7 +11,7 @@ Aruba,11.1,21.42,40012.08,,,,,,,,,,,,,420,
 Australia,1.2,35.13,53113.79,31753.72,1828000,3700000,2200000,"1,058",8263951308,8.93,7.095,84.5,12.7,"49,238",0.073,134005100,33.22
 Austria,0.33,49.08,56729.96,3825.33,15091000,766000,0,209,323088171,11.51,7.097,81.6,12.3,"53,619",0.053,3899150,77.32
 Azerbaijan,30.46,35.56,14963.43,2703.18,796000,,,10,102961,24.64,,69.4,10.5,"14,257",0.294,1131770,6.34
-Bahamas,-14.18,21.23,34743.2,,,,,,,5.2,,71.6,12.6,"30,486",0.329,509860,
+The Bahamas,-14.18,21.23,34743.2,,,,,,,5.2,,71.6,12.6,"30,486",0.329,509860,
 Bahrain,9.06,23.47,49191.62,1381.38,1909000,,,1,19130,51.82,6.173,78.8,11,"39,497",0.181,700,
 Bangladesh,-4.06,8.74,6733.53,4882.6,,,,15,475338,45.99,4.282,72.4,7.4,"5,472",0.53,1883400,1.91
 Barbados,-10.79,29.06,14701.55,,,,,1,1105,9.79,,77.6,9.9,"12,306",0.268,6300,
@@ -62,14 +62,13 @@ France,-1.71,53.62,47788.45,56647,117109000,7600000,14900000,"4,253",21089734238
 Gabon,1.19,17.43,15389.55,311.45,,,,1,23866,26.29,5.035,65.8,9.4,"13,367",0.541,23530600,
 Gambia,-15.02,16.84,2230.43,14.71,,,,,,39.1,4.279,62.1,4.6,"2,172",0.611,242670,
 Georgia,-3.13,26.87,17144.66,302.14,1513000,,,33,4368627,19.06,5.109,71.7,12.8,"14,664",0.28,2822400,76.19
-Germany,4.2,47.08,54046.73,56017.03,12449000,10600000,15200000,"2,053",11035157672,10.73,6.892,80.6,14.1,"54,534",0.073,11419000,43.48
 Germany,4.2,47.08,54046.73,56017.03,12449000,10600000,15200000,15,29573980,10.73,6.892,80.6,14.1,"54,534",0.073,11419000,43.48
 Ghana,-2.25,15.63,5741.53,298.35,,,,11,406799,46.04,4.605,63.8,8.3,"5,745",0.529,7985710,
 Greece,-9.68,51.53,31258.86,8079.94,7406000,657000,608000,101,84287917,14.62,5.931,80.1,11.4,"29,002",0.119,3901800,43.17
 Grenada,-17.74,33.78,15885.85,,217000,,,,,10.08,,74.9,9,"13,484",  ,17700,
 Guatemala,1.84,12.84,8489.05,341.78,594000,,,9,1069363,20.75,6.15,69.2,5.7,"8,723",0.481,3527800,
 Guinea,-6.21,13.1,2548.89,244.56,,,,,,37.57,5.072,58.9,2.2,"2,481",0.621,6189000,
-Guinea-Bissau,-5.85,16.04,2449,26.34,,,,1,0,34.85,,59.7,3.6,"1,908",0.627,,
+Guinea Bissau,-5.85,16.04,2449,26.34,,,,1,0,34.85,,59.7,3.6,"1,908",0.627,,
 Guyana,27.27,15.37,36162.44,70.7,86400,,,,,11.11,,65.7,8.6,"22,465",0.454,18415340,
 Haiti,-2.34,8.01,2677.36,20.91,,,,7,41873,9.69,,63.2,5.6,"2,848",0.635,347300,
 Honduras,-3.43,25.11,5786.05,438.11,669000,,,1,0,18.93,6.023,70.1,7.1,"5,298",0.431,6359260,
@@ -154,7 +153,7 @@ San Marino,4.35,22.02,63803,,,,,,,9.85,,80.9,10.8,"52,654",  ,,
 Sao Tome and Principe,-13.78,31.88,3983.57,,,,,,,33.75,,67.6,6.2,"4,021",0.494,,
 Saudi Arabia,13.79,30.57,52345.98,55564.27,,,,22,18043536,57.16,6.463,76.9,11.3,"46,112",0.247,,
 Senegal,-16,20.74,3494.56,473.97,,,,20,6642683,38.21,4.855,67.1,2.9,"3,344",0.53,8068160,
-Serbia,-6.86,43.38,20258.03,1270.78,446000,,,61,18883910,21.74,6.144,74.2,11.4,"19,123",0.131,2722650,27.91
+Republic of Serbia,-6.86,43.38,20258.03,1270.78,446000,,,61,18883910,21.74,6.144,74.2,11.4,"19,123",0.131,2722650,27.91
 Seychelles,-7.26,31.88,31411.05,22.82,124500,,,,,16.96,,71.3,10.3,"25,831",  ,33700,
 Sierra Leone,-10.26,19.32,1681.63,27.27,,,,1,0,39.42,3.138,60.1,4.6,"1,622",0.633,,
 Singapore,19.33,15.85,108036.11,11115.32,2742000,,,39,43494364,13.33,6.587,82.8,11.9,"90,919",0.04,15570,2.41
@@ -174,7 +173,7 @@ Switzerland,9.84,33.82,71700.8,5738.4,,554000,1793000,287,700177642,8.97,7.24,84
 Syria,,,,,,,,13,212604,25.14,,72.1,5.1,"4,192",0.477,522080,
 Taiwan ,13.36,15.58,58565,,,,,,,,,,,,,,
 Tajikistan,6.22,27.52,4185.98,81.71,,,,5,1776779,53.65,5.33,71.6,11.3,"4,548",0.285,423800,
-Tanzania,-4.57,14.97,2874.31,742.34,,,,9,27694,15.36,3.694,,,,,45745000,
+United Republic of Tanzania,-4.57,14.97,2874.31,742.34,,,,9,27694,15.36,3.694,,,,,45745000,
 Thailand,-3.26,20.06,17914.65,6604.53,,,,146,231340275,24.64,5.843,78.7,8.7,"17,030",0.333,19873000,15.47
 Timor-Leste,-4.7,26.4,4639.85,39.22,,,,,,20.47,,67.7,5.4,"4,461",0.378,,
 Togo,-2.84,17.82,2182.33,113.95,482000,,,,,35.66,4.137,61.6,5,"2,167",0.58,1209270,
@@ -188,7 +187,7 @@ Uganda,-8.11,14.93,2563.2,1066.56,473000,,,7,61510,31.31,4.432,62.7,5.7,"2,181",
 Ukraine,5.68,53.24,10722.11,5942.78,3382000,4984000,7630000,85,106302954,13.51,5.071,71.6,11.1,"13,256",0.2,9690000,15.83
 United Arab Emirates,11.75,35.4,70909.85,,8084000,,,50,539368692,41.75,6.571,78.7,12.7,"62,574",0.049,,
 United Kingdom,-5.55,38.88,46406.96,68366.44,11101000,13000000,12000000,"4,455",55920874223,9.52,6.796,80.7,13.4,"45,225",0.098,,
-United States,-3.63,32.99,64660.93,800672.2,45037000,69929000,74059000,"24,328",631243223863,7.18,6.894,77.2,13.7,"64,765",0.179,,
+United States of America,-3.63,32.99,64660.93,800672.2,45037000,69929000,74059000,"24,328",6.31E+11,7.18,6.894,77.2,13.7,"64,765",0.179,,
 Uruguay,-2.46,26.92,23058.63,1257.92,,,,55,169200779,8.48,6.494,75.4,9,"21,269",0.235,2031000,85.81
 Uzbekistan,1.44,29.44,8159.45,,,,,4,270968,40.98,6.014,70.9,11.9,"7,917",0.227,3689660,7.74
 Vanuatu,-2.18,38.06,2447.51,,82400,,,2,574050,8.42,,70.4,7.1,"3,085",  ,442300,
@@ -197,4 +196,5 @@ Vietnam,-0.88,18.27,11250.46,,3837000,,,,,20.89,5.763,73.6,8.4,"7,867",0.296,146
 West Bank and Gaza,-12.45,27.57,5393.48,,,,,,,,4.908,73.5,9.9,"6,583",  ,,
 Yemen,-9.63,10.94,1711.91,,,,,5,2466867,41.61,,63.8,3.2,"1,314",0.82,549000,
 Zambia,2.36,20.83,3257.1,282.58,502000,,,1,0,16.9,3.982,61.2,7.2,"3,218",0.54,44814030,
-Zimbabwe,0.81,15.96,2136.73,65.8,639000,,,1,25038,13.08,3.204,59.3,8.7,"3,810",0.532,17444580,
+Zimbabwe,0.81,15.96,2136.73,65.8,639000,,,1,25038,13.08,3.204,59.3,8.7,"3,810",0.532,17444580,
+Greenland,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0