Spinning Globe Choropleth in D3

Question

I am trying to do chorolpleth with a spinning globe in d3. I can get a globe to display everything, but I can not get countries to fill in the correct color scheme.

Longer explanation. I basically started with Mike Bostock's code for the spinning world found here:

http://bl.ocks.org/mbostock/6747043

I have some economic data for about 85 countries that I read from an external CSV. And I'm trying to get colors to display in countries by values ​​in csv. There's another Bostok example here choropleth (static and just USA and often referring to SO d3 questions):

http://bl.ocks.org/mbostock/4060606

As a result, I get solid white (#fff) countries on the surface of the globe. This is not what I'm trying to get.

I added the ISO 3166-1 numeric codes to my csv so that I can match them with the same identifiers inside the topojson data. So my csv looks like this:

country     id      curracct
Germany     276     260.9
Sweden      752     7.24
Etc.

My first thought was only to create a variable that was a function that went along the length of the “countries” from the topojson data and found countries where the identifier was equal to the id from the csv countries, and then assigned a scaled color to them. Then I set 'context.fillStyle' equal to this variable / function. This did not work.

Then I just put the 'context.fillStyle' directly inside the function (which is the code that is currently written below). That didn't work either.

, 85 csv, .

, - "context" , . .style( "", [ , ]) , . , - ?

. , , . , , . , JS SO, , . . . .

var width = 560,
    height = 560,
    speed = -1e-2,
    start = Date.now();

var sphere = {type: "Sphere"};

var color = d3.scale.quantize()
    .range(["#ffffd9", "#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]);

var projection = d3.geo.orthographic()
    .scale(width / 2.1)
    .clipAngle(90)
    .translate([width / 2, height / 2]);

var graticule = d3.geo.graticule();

var canvas = d3.select("body")
    .append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var path = d3.geo.path()
    .projection(projection)
    .context(context);

queue()
    .defer(d3.json, "/d3/world-110m.json")
    .defer(d3.csv, "trade.csv")
    .await(globeTrade);

function globeTrade(error, topo, data) {
      var land = topojson.feature(topo, topo.objects.land),
          countries = topojson.feature(topo, topo.objects.countries),
          borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; }),
    grid = graticule();

    color.domain([0, d3.max(data, function(d){return d.curracct})]);


    d3.timer(function() {
     var λ = speed * (Date.now() - start),
     φ = -15;


    context.clearRect(0, 10, width, height);

    context.beginPath();
    path(sphere);
    context.lineWidth = 2.5;
    context.strokeStyle = "#000";
    context.stroke();
    context.fillStyle = "#fff";
    context.fill();

    context.save();
    context.translate(width / 2, 0);
    context.scale(-1, 1);
    context.translate(-width / 2, 0);
    projection.rotate([λ + 180, -φ]);

    context.beginPath();
    path(land);
    context.fillStyle = "#ddd" //changed to a nuetral gray
    context.fill();

    context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    context.beginPath();
    path(borders);
    context.lineWidth = .25;
    context.strokeStyle="#fff";
    context.stroke();


    context.restore();
    projection.rotate([λ, φ]);

    context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();

    // This is where I am failing
    context.beginPath();
    path(countries);
    function render (d){
        for (var j = 0; j < countries.features.length; j++) {
            if (d.id == countries.features[j].id) {
                context.fillStyle = color(d.curracct)
                }
            else {
                context.fillStyle = "#737368"; //left Bostock color for now
            }

        }

    }   
    context.fill();
    context.lineWidth = .1;
    context.strokeStyle = "#000"; 
    context.stroke();       
});

data.forEach(function(d, i) {
    d.curracct = +d.curracct;
    d.id = +d.id;
  });

d3.select(self.frameElement).style("height", height + "px");

    </script>
</body>