JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="721.464px" height="889.561px" viewBox="0 0 721.464 889.561" enable-background="new 0 0 721.464 889.561"
	 xml:space="preserve">
<g id="unknown">
	<g>
		<polygon fill="#E2E2E2" stroke="#FFFFFF" stroke-miterlimit="10" points="317.075,124.478 315.812,124.024 314.111,123.803 
			312.303,123.552 311.42,123.527 309.747,124.092 307.98,124.886 307.004,125.398 304.95,126.364 303.868,127.158 301.198,128.565 
			297.989,130.837 295.717,132.46 293.778,133.913 292.831,134.805 291.173,136.572 289.441,138.051 287.53,139.494 284.32,141.766 
			282.156,143.354 280.129,144.501 278.838,145.481 277.034,146.455 276.205,147.104 275.614,147.79 275.498,148.593 
			276.431,151.078 277.491,151.532 277.712,151.427 277.044,150.722 276.277,149.176 276.504,148.618 276.896,148.795 
			277.086,149.759 277.498,150.593 278.08,151 278.773,151.115 279.656,150.942 280.43,149.065 281.153,148.397 282.048,148.079 
			282.444,148.042 284.645,148.223 285.355,147.949 286.304,148.15 287.241,148.187 287.932,148.065 288.098,147.875 
			287.711,147.783 287.705,147.471 288.208,147.268 288.87,146.82 289.324,146.366 289.55,145.806 289.558,145.532 290.415,145.013 
			291.048,144.047 290.876,143.605 291.404,143.68 292.79,142.882 293.723,141.82 294.996,141.478 295.753,140.829 296.881,139.25 
			296.366,138.625 296.421,137.919 296.979,138.232 295.839,135.14 297.304,134.372 298.931,133.471 301.561,132.568 
			303.688,131.811 305.6,131.162 306.898,130.548 308.448,129.683 309.647,128.729 310.732,128.024 311.082,127.41 311.389,127.158 
			313.002,126.717 313.419,126.563 314.688,126.581 315.204,126.601 315.787,127.097 316.06,126.941 316.486,126.484 
			316.744,125.896 317.104,125.571 317.502,125.499 317.437,124.785 		"/>
		<polygon fill="#E2E2E2" stroke="#FFFFFF" stroke-miterlimit="10" points="391.259,87.048 389.636,86.219 387.889,85.651 
			385.921,85.461 384.153,85.534 382.748,85.678...

CSS

g path:hover, g polygon:hover{
          fill: blue;
        }
 /*
        #groningen polygon, #groningen path{
          fill: #333;
        }
*/

JavaScript

var colour = d3.scale.linear()
                .domain([10, 25])
                .range(["lightblue", "red"]);
 
var dataset = [
    ["friesland", 17.4],
    ["groningen", 20.8],
    ["drenthe", 20],
    ["noord-holland-noord", 15.9],
    ["zaanstreek-waterland", 14.7],
    ["amsterdam", 15.1],
    ["gooi", 16.1],
    ["amersfoort", 12.7],
    ["ijsselvechtstreek", 15.9],
    ["noordwest-veluwe", 17.7],
    ["twente", 15.2],
    ["utrecht", 15.2],
    ["midden-gelderland", 16.6],
    ["achterhoek", 15],
    ["zuid-west-gelderland", 19.1],
    ["drechtsteden", 15.5],
    ["amstelland", 11.4],
    ["haaglanden", 13.6],
    ["zeeland", 16.9],
    ["west-brabant", 13.2],
    ["midden-brabant", 15.4],
    ["noord-oost-brabant", 14.2],
    ["zuid-oost-brabant", 13.7],
    ["noord-limburg", 14.6],
    ["zuid-limburg", 19],
    ["rijnmond", 15.2],
    ["flevoland", 14],
    ["rijnstreek", 18.5]
];
  
d3.selectAll("g[id]") //select only g elements that have id values
    .datum(function(){
        var id=d3.select(this).attr("id"); 
        return [id, null]; })
        //create an initial [id, value] dataset based on the id attribute, with null value
    .data(dataset, function(d){return d[0];}) //use the first entry in [id,value] as the key
    .selectAll("path, polygon")
    .datum(function(){
        return d3.select(this.parentNode).datum() ||
        d3.select(this.parentNode.parentNode).datum();
    }) //use the parent's data if it exists, else the grandparent's data
    .attr("fill", function(d){return d?colour(d[1]):"lightgray";});
         //set the colour based on the data, if there is a valid data element
         //else use gray.