JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Map</title>

    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>

</head>

<body>
    <div class="chart-title">Vaccination coverage in Europe</div>
    <div> <span id="years_list"></span><span id="antigen_list"></span></div>
    <div id="container-map"></div>
<!--
    <script src="./script/map.js"></script>
-->
</body>

<pre id="data-IT">
ID;NUTS2-ID;NUTS2-NAME;YEAR;ANTIGEN;COVERAGE-PERC
1;IT;Italy;2000;POL;96,6
2;IT;Italy;2000;DIF;
3;IT;Italy;2000;TET;
4;IT;Italy;2000;PER;
5;IT;Italy;2000;DT-DTP3;95,3
6;IT;Italy;2000;EP B;94,1
7;IT;Italy;2000;HIB;54,7
8;IT;Italy;2000;MOR;
9;IT;Italy;2000;PAR;
10;IT;Italy;2000;ROS;
11;IT;Italy;2000;VAR;
12;IT;Italy;2000;M-MPR1-MPRV;
13;IT;Italy;2000;M-MPR1;74,1
14;IT;Italy;2001;POL;95,8
15;IT;Italy;2001;DIF;
16;IT;Italy;2001;TET;
17;IT;Italy;2001;PER;
18;IT;Italy;2001;DT-DTP3;95,9
19;IT;Italy;2001;EP B;94,5
20;IT;Italy;2001;HIB;70,2
21;IT;Italy;2001;MOR;
22;IT;Italy;2001;PAR;
23;IT;Italy;2001;ROS;
24;IT;Italy;2001;VAR;
25;IT;Italy;2001;M-MPR1-MPRV;
26;IT;Italy;2001;M-MPR1;76,9
27;IT;Italy;2002;POL;95,9
28;IT;Italy;2002;DIF;
29;IT;Italy;2002;TET;
30;IT;Italy;2002;PER;
31;IT;Italy;2002;DT-DTP3;96,8
32;IT;Italy;2002;EP B;95,4
33;IT;Italy;2002;HIB;83,4
34;IT;Italy;2002;MOR;
35;IT;Italy;2002;PAR;
36;IT;Italy;2002;ROS;
37;IT;Italy;2002;VAR;
38;IT;Italy;2002;M-MPR1-MPRV;
39;IT;Italy;2002;M-MPR1;80,8
40;IT;Italy;2003;POL;96,6
41;IT;Italy;2003;DIF;
42;IT;Italy;2003;TET;
43;IT;Italy;2003;PER;
44;IT;Italy;2003;DT-DTP3;96,6
45;IT;Italy;2003;EP...

CSS

pre {
    display:none;
}

JavaScript

var width = 700;
var height = 600;

var svg = d3.select("#container-map").append("svg")
    .attr("width", width)
    .attr("height", height);

var projection = d3.geoMercator().scale(1000).center([25,45]);
var path = d3.geoPath(projection);

//var pathtonuts2 = './data/GeoJSON/nuts2.json';
//var pathtocoverageIT =  './data/csv/Coverage Italy 24 months.csv';

// for test
    var pathtonuts2 = 'https://gist.githubusercontent.com/rveciana/5919944/raw/2fef6be25d39ebeb3bead3933b2c9380497ddff4/nuts2.json';
var pathtocoverageIT = 'https://dl.dropboxusercontent.com/s/r8mpix4aqytvp31/Coverage%20Italy%2024%20months.csv';

//Parser CSV with any delimiter from file
/*
var dsv = function (url, delimiter, callback){
  d3.text(url, function(text) {
    var data = d3.dsvFormat(delimiter).parse(text);
    callback(null, data);
  });
}
*/

//Parser CSV with any delimiter from HTML

var dsv = function (url, delimiter, callback){
  
    var data = d3.dsvFormat(delimiter).parse(d3.select("pre#data-IT").text());
    callback(null, data);
  
}

var regionInfo = {"properties":{"name":"Italy"}, "id" : "IT"};

var menuYear = d3.select("#years_list");
var menuAntigen = d3.select("#antigen_list");
var nestedData;
var mymap = svg.append("g");

/////////////SCALE//////////////
var x = d3.scaleLinear()
    .domain([0, 100])
    .rangeRound([500, 700]);

var color = d3.scaleThreshold()
    .domain(d3.range(0, 101, 25))
    .range(d3.schemeRdYlGn[5]);

var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(-20,20)");

//Scale colors
g.selectAll("rect")
    .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
    .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]);...