S.C. S.C. - 5 months ago 42
Javascript Question

Using d3.geomap to display 1/0 data

I have CSV data where the values can be either 1, 0, or blank. I want to get this to work with d3-geomaps.

Snapshot of my CSV:

If I set it to read from column "1802", as it happens to have a mix of 1 and 0, the map works as expected. Greens = 0, Reds = 1.

However, if I read from column "1800 or 1801", as they are all 0's, all the countries are grayed out. But I want it to show greens for all the 0's.

My code:

var customColors = ['green','red','red'];
var map = d3.geomap.choropleth()
.geofile('../d3-geomap/topojson/world/countries.json')
.colors(customColors)
.column(y)
.format(format)
.legend(false)
.unitId('Country');

d3.csv('CSVs/data.csv', function(error, data) {
d3.select('.map')
.datum(data)
.call(map.draw, map);


My question is, is it possible to use d3.geomap to handle 1/0 data? If so, how can I make this work?

~~~Added note~~~

If you're having trouble with my CSV snapshot, here's what my CSV looks like in plain text:

Country,1800,1801,1802
AGO,0,0,0
ARG,0,0,1
AUS,0,0,0
AUT,,0,0

Answer

You can set the data domain, when you create a map object as demonstrated in this new example map.

var map = d3.geomap.choropleth()
    .colors(['green','red'])
    .domain([0, 1])
    ....

Unfortunately, empty values in your CSV will then be green too, unless you convert them to NaN beforehand. This may well indicate a bug in d3.geomap, that I need to look into.

I fixed coloring and tooltips for empty and NaN values in release 1.0.2, which I just published.