I am trying to make a map in D3 of the 12 provinces of the Netherlands and color them based on some mock data in an external JSON file:

[{"_id":"Groningen","value":52},
{"_id":"Friesland","value":18},
{"_id":"Drenthe","value":87},
{"_id":"Overijssel","value":93},
{"_id":"Flevoland","value":60},
{"_id":"Gelderland","value":7},
{"_id":"Utrecht","value":26},
{"_id":"Noord-Holland","value":52},
{"_id":"Zuid-Holland","value":72},
{"_id":"Zeeland","value":41},
{"_id":"Noord-Brabant","value":78},
{"_id":"Limburg","value":19}]

This is the code I have thus far. It successfully generates them map but right now colors each province as a function of the length of the province name (which is silly ofcourse):

var width = 960,
height = 500,
centered;

// Define color scale
var color = d3.scaleLinear()
   .domain([1, 20])
   .clamp(true)
   .range(['steelblue', "yellow"]);

var projection = d3.geoMercator()
   .scale(5500)
   .center([6, 52.1])
   .translate([width / 2, height / 2]);

var path = d3.geoPath()
   .projection(projection);

// Set svg width & height
var svg = d3.select('svg')
    .attr('width', width)
    .attr('height', height);

// Add background
svg.append('rect')
   .attr('class', 'background')
   .attr('width', width)
   .attr('height', height)

var g = svg.append('g');

var effectLayer = g.append('g')
   .classed('effect-layer', true);

var mapLayer = g.append('g')
   .classed('map-layer', true);

// Load map data
d3.json('data/provincesNL2.json', function(error, mapData) {
    var features = mapData.features;

    // Draw each province as a path
    mapLayer.selectAll('path')
      .data(features)
      .enter().append('path')
      .attr('d', path)
      .attr('vector-effect', 'non-scaling-stroke')
      .attr('fill', fillFn)
});

// Get province name
function nameFn(d){
   return d && d.properties ? d.properties.PROVINCIE : null;
}

// Get province name length
function nameLength(d){
   var n = nameFn(d);
   return n ? n.length : 0;
}

// Get province color
function fillFn(d){
   return color(nameLength(d));
};

I just do not know how to implement the values from the JSON file to represent the color of each province along the color scale. I am not to experienced with javascript and I thought this shouldnt be too hard but I just can not figure it out. Many thanks for any help!