JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.js"></script>
<script src="http://d3js.org/colorbrewer.v1.js"></script>
<script src="http://d3js.org/queue.v1.js"></script>
</body>

CSS

properties {
  fill: none;
}

//Hier werden die Farben für verschiedene Kategorien zugeteilt
.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

JavaScript

//Größe der Karte wird eingestellt
var width = 1050,
	height = 1000;
	
var rateById = d3.map();
//Skalierung für die Einfärbung 
var quantize = d3.scale.quantize()
    .domain([1, 50])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
	
//Skalierung und Ausrichtung auf deutschland
var projection = d3.geo.albers()
    .center([10.4, 51.35])
    .rotate([1, 0])
    .parallels([50, 60])
    .scale(1200 * 5)
    .translate([width / 2, height / 2]);
//D3 Projection wird angelegt
var path = d3.geo.path()
    .projection(projection);


//svg wird angelegt
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
//Warteschlange zum Ausführen des Skripts wird angelegt
queue()
    .defer(d3.json, "germany.json")
    .defer(d3.tsv, "test2.tsv", function(d) { 
		rateById.set(d.NAME_2, +d.rate); 
		})
    .await(ready);

//Karte wird geladen und mit den gewünschten Properties geöffnet und zugewiesen	  
function ready(error, de) {
  svg.append("g")
      .attr("class", "properties")
    svg.selectAll("path")
      .data(topojson.feature(de, de.objects.collection).features)
    .enter().append("path")
      .attr("class", function(d) { 
		return quantize(rateById.get(d.properties.NAME_2)); 
	  })
      .attr("d", path);


}