Read in data from csv file? about datamaps

[markmarkoh]

Do you ever pass data to Datamaps? I would either put the new Datamaps
call in the CSV callback or call myMap.updateChoropleth(data) once you've
got the data object setup.

On Sunday, March 2, 2014, xammamax [email protected] wrote:

The library is fantastic and I'm using it a lot right now! It would make
my work much easier if it was possible to read the data from a .csv file.
Did anybody try this before? What am I doing wrong?

I would build a jsfiddle but I don't know how to use a csv file in these
IDEs. Sorry about that.

What I'm trying to do is the following:

The csv file looks like this:
ISO,Rate,fillKey
SLE,181.6,>100
HTI,75.6,50-100
ZAF,44.6,20-50
NPL,41.6,20-50
BOL,41.4,20-50

And then I'm trying to use the following:

var data;

d3.csv("data.csv", function (error, csv) {
if (error) return console.log("error loading the csv: " + error);
console.log("there are " + csv.length + " elements in my csv set");

var nestFunction = d3.nest().key(function(d){return d.ISO;});

data = nestFunction.entries(
csv.map(function(d){
d.Rate = +d.Rate;

d.fillKey = d.fillKey;

return d;

})

            );

console.log("there are " + data.length + " elements in my data");

});

var myMap = new Datamap({
element: document.getElementById('map'),
scope: 'world',
geographyConfig: {
popupOnHover: false,
highlightOnHover: false
},
fills: {
'>100': '#1f77b4',
'50-100': '#9467bd',
'20-50': '#ff7f0e',
defaultFill: '#EDDC4E'
}
});

Reply to this email directly or view it on GitHubhttps://github.com//issues/61
.

Mark DiMarco
Phone: [phone]
Email: [email protected]

[xammamax]

Thank you for your answer!

I managed to read data from a .csv file now!
Here is my example: http://www.explainingprogress.com/wp-content/uploads/datamaps/uploaded_gdpPerCapita2011_PWTrgdpe/gdpPerCapita2011_PWTrgdpe.html

The data is stored in a csv file with the following structure:

ISO,gdppercapita
AGO,4214.452
ALB,7364.711
ARG,14507.62
ARM,5235.04
ATG,12908.97
AUS,38499.27
AUT,37282.53
...

And with the following code I'm reading the data, creating the fillKey and calling the map:

  var bucketLimits = [1000,2000,5000,10000,20000,30000,40000,50000];


d3.csv("gdpPerCapita2011_PWTrgdpe.csv", function(error, csvdata1) {

for (var i=0;i<csvdata1.length;i++)
        { 
                csvdata1[i].fillKey = {};

                if (csvdata1[i].gdppercapita < bucketLimits[0]) {  csvdata1[i].fillKey = '0'; }

                if (csvdata1[i].gdppercapita >= bucketLimits[0] && csvdata1[i].gdppercapita < bucketLimits[1]) {  csvdata1[i].fillKey = '1'; }
                if (csvdata1[i].gdppercapita >= bucketLimits[1] && csvdata1[i].gdppercapita < bucketLimits[2]) {  csvdata1[i].fillKey = '2'; }
                if (csvdata1[i].gdppercapita >= bucketLimits[2] && csvdata1[i].gdppercapita < bucketLimits[3]) {  csvdata1[i].fillKey = '3'; }
                if (csvdata1[i].gdppercapita >= bucketLimits[3] && csvdata1[i].gdppercapita < bucketLimits[4]) {  csvdata1[i].fillKey = '4'; }
                if (csvdata1[i].gdppercapita >= bucketLimits[4] && csvdata1[i].gdppercapita < bucketLimits[5]) {  csvdata1[i].fillKey = '5'; }
                if (csvdata1[i].gdppercapita >= bucketLimits[5] && csvdata1[i].gdppercapita < bucketLimits[6]) {  csvdata1[i].fillKey = '6'; }
                if (csvdata1[i].gdppercapita >= bucketLimits[6] && csvdata1[i].gdppercapita < bucketLimits[7]) {  csvdata1[i].fillKey = '7'; }
                if (csvdata1[i].gdppercapita >= bucketLimits[7] ) {  csvdata1[i].fillKey = '8'; }



                csvdata1[ csvdata1[i].ISO] = csvdata1[i] ;
                //console.log(csvdata1[i]);
                delete  csvdata1[i].ISO;
                delete  csvdata1[i] ;
            }
myMap1.updateChoropleth(csvdata1);

}
);

Everything is working except the tooltips..

popupTemplate: function(geography, csvdata1) {
if ( !csvdata1 ) return;  // makes sure that the tooltip is shown only if there is data 
return '<div class="hoverinfo">' + geography.properties.name + '<br> GDP per Capita <strong>' +  csvdata1.gdppercapita + '</strong> 2005 US Dollars';},
},  

Could you tell me what I'm doing wrong here?

[markmarkoh]

Try replacing your datamaps.world.min.js file with this one and let me know if the popup issue still persists.

[xammamax]

Thanks for getting back to me Mark!

I replaced the file but unfortunately it made things worse. All countries are shown in the defaultFill color and the popup issue is not resolved either.

I also updated the datamaps.world.min.js for the map that I was linking to above.

[markmarkoh]

I see the issue on my side I believe: add an empty data object when you first draw the map.
Like this:

var myMap2 = new Datamap(

        {
            scope: 'world',
            projection: 'equirectangular',
            element: document.getElementById('map'),
            // projection: 'mercator',

            geographyConfig: {
                                borderWidth: 0.2,
                                borderColor: '#4F4F4F',
                            /*  highlightBorderColor: 'black',
                                highlightBorderWidth: 0.5,
                                highlightFillColor: '#FFEC38',

                                highlightOnHover: true,
                                popupOnHover: true, //disable the popup while hovering
    */ 
                                popupTemplate: function(geography, csvdata1) {
                                    if ( !csvdata1 ) return;  // makes sure that the tooltip is shown only if there is data 
                                    return '<div class="hoverinfo">' + geography.properties.name + '<br> GDP per Capita <strong>' +  csvdata1.gdppercapita + '</strong> 2005 US Dollars';},
                                },  
            fills: {
                '0': colorschemeOfThisMap[0],
                '1': colorschemeOfThisMap[1],
                '2': colorschemeOfThisMap[2],
                '3': colorschemeOfThisMap[3],
                '4': colorschemeOfThisMap[4],
                '5': colorschemeOfThisMap[5],
                '6': colorschemeOfThisMap[6],
                '7': colorschemeOfThisMap[7],
                '8': colorschemeOfThisMap[8],
                defaultFill: 'grey'
            }, 
            data: {}
});

[xammamax]

Now it works!!
Thanks for fixing this so very quickly!!

I'm using the updated datamaps.world.min.js (the older version is not working).
And I added an an empty data object.

My online map is updated if somebody is interested.

[markmarkoh]

Looks great! Glad I was able to help.