S.C. S.C. - 1 year ago 113
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()

d3.csv('CSVs/data.csv', function(error, 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:


Answer Source

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

var map = d3.geomap.choropleth()
    .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.