javascriptjsondictionaryd3.jsdatamaps

D3 datamaps datastructure (multiple years, all countries)


I need help on how to get my datastructure right. I'm trying to use D3 to do make a datamap and a scatterplot (using linked views). The datasets I'm using look like this:

life expectancy (at birth):

[{"country":"Abkhazia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null,"2011":null,"2012":null,"2013":null,"2014":null,"2015":null,"2016":null},
{"country":"Afghanistan","1995":49.4,"1996":49.7,"1997":49.5,"1998":48.6,"1999":50,"2000":50.1,"2001":50.4,"2002":51,"2003":51.4,"2004":51.8,"2005":52,"2006":52.1,"2007":52.4,"2008":52.8,"2009":53.3,"2010":53.6,"2011":54,"2012":54.4,"2013":54.8,"2014":54.9,"2015":53.8,"2016":52.72},
{"country":"Akrotiri and Dhekelia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null,"2011":null,"2012":null,"2013":null,"2014":null,"2015":null,"2016":null},
etc.

country codes:

var countryCodes =[
["af", "AFG", "Afghanistan"],
["ax", "ALA", "Åland Islands"],
["al", "ALB", "Albania"],
["dz", "DZA", "Algeria"],
etc.

Percentage of GDP that goes to healthcare:

[{"country":"Abkhazia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null},
{"country":"Afghanistan","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":5.7,"2003":6.8,"2004":6.4,"2005":6.6,"2006":6.8,"2007":7.3,"2008":7.0,"2009":7.6,"2010":7.6},
{"country":"Akrotiri and Dhekelia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null},
{"country":"Albania","1995":2.6,"1996":4.0,"1997":4.8,"1998":5.3,"1999":5.8,"2000":6.4,"2001":6.0,"2002":6.3,"2003":6.2,"2004":6.9,"2005":6.8,"2006":6.7,"2007":6.9,"2008":6.7,"2009":6.9,"2010":6.5},
etc.

What I tried (1/2) Following the advice of my teacher I eventually wrote the following code:

// If error, show in console
if (error) return console.warn(error);

// Default year and country when first rendering map
var year = 2011;
var country = "Netherlands";

data = {}

// Using colorblind safe colors from colorbrewer2.org 
var colorArray = ["lowest", "low", "middle", "high", "highest"]

    // number of years (= number of objects per country minus 1 for the name of the country)
    number = Object.keys(lifeExpectancy[1]).length - 1


    // getting the minimum and the maximum life expectancy of the entire dataset
    var min = Number.MAX_VALUE,
    max = -Number.MAX_VALUE;

    lifeExpectancy.forEach(function (o) {
        Object.keys(o).forEach(function (k) {                
            if (k !== 'country' && o[k] !== null) {
                min = Math.min(min, o[k]);
                max = Math.max(max, o[k]);
            }
        });
    });

    // calculating the denumerator 
    var denumerator = max /5;


    // // Make the datastructure
    for (var i = 0; i < lifeExpectancy.length; i++){


        for (var j = 0; j < countryCodes.length; j++){


                if(lifeExpectancy[i]["country"] == countryCodes[j][2]){

                    data[countryCodes[j][1]] = {}

                    for(var k = 0; k < number; k++){
                        var year = 1995 + k;
                        data[countryCodes[j][1]][Object.keys(lifeExpectancy[i])[k]] = 
                            {fillKey: (Math.floor((lifeExpectancy[i][year] - min)/denumerator)),
                            country: lifeExpectancy[i]["country"], 
                            lifeExpectancy: lifeExpectancy[i][Object.keys(lifeExpectancy[i])[k]],
                            healthPercGDP: healthPercGDP[i][Object.keys(healthPercGDP[i])[k]]}
                    }
                }


        }
    }

Using this the data structure looks like this:

data = {ABW {1995 { country: "Aruba", fillKey:2, healthPercGDP:null, lifeExpectancy:73,62}, 
1996{.........},
1997{..........},.........}
,AFG{1995{ country:"Afghanistan", fillkey: 1, healthPercGDP: null, lifeExpectancy:49,62} etc.}}

However, I found out for D3.datamaps to work,

I need the following structure:

data = {1995{ABW{.....},AFG{.....},....}
1996{ABW{....},AFG{....},....}etc.}

What I tried(2/2)

 var data2 = {};
        // Make the datastructure
    for (var i = 0; i < lifeExpectancy.length; i++){

        for(var k = 0; k < number; k++){
            var year = 1995 + k;
            data2[Object.keys(lifeExpectancy[i])[k]] = {}


            for (var j = 0; j < countryCodes.length; j++){


                if(lifeExpectancy[i]["country"] == countryCodes[j][2]){

                    data2[Object.keys(lifeExpectancy[i])[k]][countryCodes[j][1]] = {
                        fillKey: (Math.floor((lifeExpectancy[i][year] - min)/denumerator)),
                        country: lifeExpectancy[i]["country"], 
                        lifeExpectancy: lifeExpectancy[i][Object.keys(lifeExpectancy[i])[k]],
                        healthPercGDP: healthPercGDP[i][Object.keys(healthPercGDP[i])[k]]}
                }
            }
        }
    }

However the last block of code just gives me:

data2={1995{SSD{country: "South Sudan", fillKey:1, healthPercGDP:null, lifeExpectancy: 52.7}},1996{SSD{.....}},1997{SSD{....}}, etc.}

I only get dictionary with 1995-2016, all with the values for South Sudan. What makes it even stranger is that South Sudan is not the last variable in the list of country codes.

Full datasets:

https://github.com/JappaB/DataProcessing/tree/master/Homework/week-6


Solution

  • Here's a simple way to do this:

        var lifeExpectancyData = [{"country":"Abkhazia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null,"2011":null,"2012":null,"2013":null,"2014":null,"2015":null,"2016":null},
        {"country":"Afghanistan","1995":49.4,"1996":49.7,"1997":49.5,"1998":48.6,"1999":50,"2000":50.1,"2001":50.4,"2002":51,"2003":51.4,"2004":51.8,"2005":52,"2006":52.1,"2007":52.4,"2008":52.8,"2009":53.3,"2010":53.6,"2011":54,"2012":54.4,"2013":54.8,"2014":54.9,"2015":53.8,"2016":52.72},
        {"country":"Akrotiri and Dhekelia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null,"2011":null,"2012":null,"2013":null,"2014":null,"2015":null,"2016":null}]
    
        var healthcareData = [{"country":"Abkhazia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null},
        {"country":"Afghanistan","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":5.7,"2003":6.8,"2004":6.4,"2005":6.6,"2006":6.8,"2007":7.3,"2008":7.0,"2009":7.6,"2010":7.6},
        {"country":"Akrotiri and Dhekelia","1995":null,"1996":null,"1997":null,"1998":null,"1999":null,"2000":null,"2001":null,"2002":null,"2003":null,"2004":null,"2005":null,"2006":null,"2007":null,"2008":null,"2009":null,"2010":null}]
    
        var countryCodes = [
        	["ab", "AB", "Abkhazia"],
        	["af", "AFG", "Afghanistan"],
        ];
    
        function isNumber(object) {
        	return !isNaN(object);
        }
    
        var years = Object.keys(lifeExpectancyData[0])
        	.filter(isNumber)
    
        var data = {}
    
        years.forEach(function(year) {
    
        	data[year] = {};
    
        	countryCodes.forEach(function(row) {
        		let code = row[1];
        		let country = row[2];
    
        		function matchesCountry(obj) {
        			return obj.country === country;
        		}
    
        		let fillKey = 0;	// calculate fillkey
    
        		let lifeExpectancyFiltered = lifeExpectancyData.filter(matchesCountry);
    
        		let healthcarePercentageFiltered = healthcareData.filter(matchesCountry);
    
        		let lifeExpectancy = lifeExpectancyFiltered.length ? lifeExpectancyFiltered[0][year] || 0 : 0;
        		let healthcarePercentage = healthcarePercentageFiltered.length ? healthcarePercentageFiltered[0][year] || 0 : 0;
      
        		data[year][code] = {
        			fillKey: fillKey,
        			country: country,
        			lifeExpectancy: lifeExpectancy,
        			healthcarePercentage: healthcarePercentage
        		}
        	})
        })
    
        console.log(data)