I'm following this example in d3.js for how to make a small-multiple choropleth map:

https://gist.github.com/armollica/6314f45890bcaaa45c808b5d2b0c602f

There's this wrapper function:

function ready(error, us, manufacturing) {}

And within it, there is:

function render(d) {
    var data = d.values;  //this is the manufacturing data 
    
    var context = d3.select(this).node().getContext("2d");
    
    var color = function(d) {
      console.log(d) //this is the 'US' geography json data
      if (data.has(d.id)) {
        var value = data.get(d.id).pct_change_emp;
        return value ? colorScale(value) : "#fff";
      }
      return "#fff";
    };

    // Want the maps to render sequentially. Use setTimeout to give the
    // browser a break in between drawing each map.
    window.setTimeout(function() {      
      drawMap(context, color);
    }, 500);
  }

I don't understand how the render function is accessing two different datasets using the same d variable. Console-logging data is the manufacturing data, but console-logging d below the var color declaration is the US geo-json data.

I don't see how d is returning different datasets here, and where that specification is happening in the code. Everything works functionally, I'm just not understanding it.