title: Displaying a JSON file as a map using D3js v4
body: <p>I'm trying to create a map similar to <a href="https://bl.ocks.org/mbostock/4060606" rel="nofollow noreferrer">that of Mike Bostock</a>.</p>
  
  <p><a href="https://gist.githubusercontent.com/rveciana/5919944/raw/2fef6be25d39ebeb3bead3933b2c9380497ddff4/nuts2.json" rel="nofollow noreferrer">This is my JSON file</a> (it represents Europe divided into NUTS 2 regions).
  Its structure is:</p>
  
  <pre><code>{
      "type": "Topology",
      "objects":
      {
          "nuts2":
          {
              "type": "GeometryCollection",
              "bbox": [-63.15345500000001, -21.387309500000015, 55.83662850000002, 71.18531800099998],
              "geometries": [
              {
                  "type": "Polygon",
                  "properties":
                  {
                      "nuts_id": "AT11",
                      "name": "Burgenland (AT)",
                      "population": 286691
                  },
                  "id": "AT11",
                  "arcs": [
                      [0, 1, 2, 3, 4]
                  ]
              },
              {
                  "type": "Polygon",
                  "properties":
                  {
                      "nuts_id": "AT12",
                      "name": "Niederösterreich",
                      "population": 1618592
                  },
                  "id": "AT12",
                  "arcs": [
                      [5, 6, 7, -4, 8, 9, 10],
                      [11]
                  ]
              },
              {
                  "type": "Polygon",
                  "properties":
                  {
                      "nuts_id": "AT13",
                      "name": "Wien",
                      "population": 1741246
                  },
                  "id": "AT13",
                  "arcs": [
                      [-12]
                  ]
              },
              {
                  "type": "Polygon",
                  "properties":
                  {
                      "nuts_id": "AT21",
                      "name": "Kärnten",
                      "population": 555473
                  },
                  "id": "AT21",
                  "arcs": [
                      [12, 13, 14, 15, 16, 17, 18]
                  ]
              },
              ...
  </code></pre>
  
  <p>Then I have <a href="https://www.dropbox.com/s/r8mpix4aqytvp31/Coverage%20Italy%2024%20months.csv?dl=0" rel="nofollow noreferrer">this CSV file</a> that represents the vaccination coverage in Italy over several years and for different antigens.
  Its structure is:</p>
  
  <pre><code>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 B;95,4
  46;IT;Italy;2003;HIB;90,4
  47;IT;Italy;2003;MOR;
  48;IT;Italy;2003;PAR;
  49;IT;Italy;2003;ROS;
  50;IT;Italy;2003;VAR;
  51;IT;Italy;2003;M-MPR1-MPRV;
  52;IT;Italy;2003;M-MPR1;83,9
  53;IT;Italy;2004;POL;96,8
  54;IT;Italy;2004;DIF;
  55;IT;Italy;2004;TET;
  56;IT;Italy;2004;PER;
  57;IT;Italy;2004;DT-DTP3;96,6
  58;IT;Italy;2004;EP B;96,3
  59;IT;Italy;2004;HIB;93,8
  60;IT;Italy;2004;MOR;
  61;IT;Italy;2004;PAR;
  62;IT;Italy;2004;ROS;
  63;IT;Italy;2004;VAR;
  64;IT;Italy;2004;M-MPR1-MPRV;
  65;IT;Italy;2004;M-MPR1;85,7
  66;IT;Italy;2005;POL;96,5
  67;IT;Italy;2005;DIF;
  68;IT;Italy;2005;TET;
  69;IT;Italy;2005;PER;
  70;IT;Italy;2005;DT-DTP3;96,2
  71;IT;Italy;2005;EP B;95,7
  72;IT;Italy;2005;HIB;94,7
  73;IT;Italy;2005;MOR;
  74;IT;Italy;2005;PAR;
  75;IT;Italy;2005;ROS;
  76;IT;Italy;2005;VAR;
  77;IT;Italy;2005;M-MPR1-MPRV;
  78;IT;Italy;2005;M-MPR1;87,3
  79;IT;Italy;2006;POL;96,5
  80;IT;Italy;2006;DIF;
  81;IT;Italy;2006;TET;
  82;IT;Italy;2006;PER;
  83;IT;Italy;2006;DT-DTP3;96,6
  84;IT;Italy;2006;EP B;96,3
  85;IT;Italy;2006;HIB;95,5
  86;IT;Italy;2006;MOR;
  87;IT;Italy;2006;PAR;
  88;IT;Italy;2006;ROS;
  89;IT;Italy;2006;VAR;
  90;IT;Italy;2006;M-MPR1-MPRV;
  91;IT;Italy;2006;M-MPR1;88,3
  92;IT;Italy;2007;POL;96,7
  93;IT;Italy;2007;DIF;
  94;IT;Italy;2007;TET;
  95;IT;Italy;2007;PER;
  96;IT;Italy;2007;DT-DTP3;96,7
  97;IT;Italy;2007;EP B;96,5
  98;IT;Italy;2007;HIB;96
  99;IT;Italy;2007;MOR;
  100;IT;Italy;2007;PAR;
  101;IT;Italy;2007;ROS;
  102;IT;Italy;2007;VAR;
  103;IT;Italy;2007;M-MPR1-MPRV;
  104;IT;Italy;2007;M-MPR1;89,6
  105;IT;Italy;2008;POL;96,3
  106;IT;Italy;2008;DIF;
  107;IT;Italy;2008;TET;
  108;IT;Italy;2008;PER;
  109;IT;Italy;2008;DT-DTP3;96,7
  110;IT;Italy;2008;EP B;96,1
  111;IT;Italy;2008;HIB;95,7
  112;IT;Italy;2008;MOR;
  113;IT;Italy;2008;PAR;
  114;IT;Italy;2008;ROS;
  115;IT;Italy;2008;VAR;
  116;IT;Italy;2008;M-MPR1-MPRV;
  117;IT;Italy;2008;M-MPR1;90,1
  118;IT;Italy;2009;POL;96,1
  119;IT;Italy;2009;DIF;
  120;IT;Italy;2009;TET;
  121;IT;Italy;2009;PER;
  122;IT;Italy;2009;DT-DTP3;96,2
  123;IT;Italy;2009;EP B;95,8
  124;IT;Italy;2009;HIB;95,6
  125;IT;Italy;2009;MOR;
  126;IT;Italy;2009;PAR;
  127;IT;Italy;2009;ROS;
  128;IT;Italy;2009;VAR;
  129;IT;Italy;2009;M-MPR1-MPRV;89,9
  130;IT;Italy;2009;M-MPR1;
  131;IT;Italy;2010;POL;96,3
  132;IT;Italy;2010;DIF;
  133;IT;Italy;2010;TET;
  134;IT;Italy;2010;PER;
  135;IT;Italy;2010;DT-DTP3;96,4
  136;IT;Italy;2010;EP B;95,8
  137;IT;Italy;2010;HIB;94,6
  138;IT;Italy;2010;MOR;
  139;IT;Italy;2010;PAR;
  140;IT;Italy;2010;ROS;
  141;IT;Italy;2010;VAR;
  142;IT;Italy;2010;M-MPR1-MPRV;90,6
  143;IT;Italy;2010;M-MPR1;
  144;IT;Italy;2011;POL;96,1
  145;IT;Italy;2011;DIF;
  146;IT;Italy;2011;TET;
  147;IT;Italy;2011;PER;
  148;IT;Italy;2011;DT-DTP3;96,3
  149;IT;Italy;2011;EP B;96
  150;IT;Italy;2011;HIB;95,6
  151;IT;Italy;2011;MOR;
  152;IT;Italy;2011;PAR;
  153;IT;Italy;2011;ROS;
  154;IT;Italy;2011;VAR;
  155;IT;Italy;2011;M-MPR1-MPRV;90,1
  156;IT;Italy;2011;M-MPR1;
  157;IT;Italy;2012;POL;96,1
  158;IT;Italy;2012;DIF;
  159;IT;Italy;2012;TET;
  160;IT;Italy;2012;PER;
  161;IT;Italy;2012;DT-DTP3;96,2
  162;IT;Italy;2012;EP B;96
  163;IT;Italy;2012;HIB;94,8
  164;IT;Italy;2012;MOR;
  165;IT;Italy;2012;PAR;
  166;IT;Italy;2012;ROS;
  167;IT;Italy;2012;VAR;
  168;IT;Italy;2012;M-MPR1-MPRV;90
  169;IT;Italy;2012;M-MPR1;
  170;IT;Italy;2013;POL;95,74
  171;IT;Italy;2013;DIF;95,75
  172;IT;Italy;2013;TET;95,81
  173;IT;Italy;2013;PER;95,68
  174;IT;Italy;2013;DT-DTP3;
  175;IT;Italy;2013;EP B;95,65
  176;IT;Italy;2013;HIB;94,91
  177;IT;Italy;2013;MOR;90,35
  178;IT;Italy;2013;PAR;90,3
  179;IT;Italy;2013;ROS;90,3
  180;IT;Italy;2013;VAR;33,19
  181;IT;Italy;2013;M-MPR1-MPRV;
  182;IT;Italy;2013;M-MPR1;
  183;IT;Italy;2014;POL;94,71
  184;IT;Italy;2014;DIF;94,71
  185;IT;Italy;2014;TET;94,82
  186;IT;Italy;2014;PER;94,64
  187;IT;Italy;2014;DT-DTP3;
  188;IT;Italy;2014;EP B;94,61
  189;IT;Italy;2014;HIB;94,31
  190;IT;Italy;2014;MOR;86,74
  191;IT;Italy;2014;PAR;86,67
  192;IT;Italy;2014;ROS;86,69
  193;IT;Italy;2014;VAR;36,64
  194;IT;Italy;2014;M-MPR1-MPRV;
  195;IT;Italy;2014;M-MPR1;
  196;IT;Italy;2015;POL;93,43
  197;IT;Italy;2015;DIF;93,35
  198;IT;Italy;2015;TET;93,56
  199;IT;Italy;2015;PER;93,33
  200;IT;Italy;2015;DT-DTP3;
  201;IT;Italy;2015;EP B;93,2
  202;IT;Italy;2015;HIB;93,03
  203;IT;Italy;2015;MOR;85,29
  204;IT;Italy;2015;PAR;85,23
  205;IT;Italy;2015;ROS;85,22
  206;IT;Italy;2015;VAR;30,73
  207;IT;Italy;2015;M-MPR1-MPRV;
  208;IT;Italy;2015;M-MPR1;
  209;IT;Italy;2016;POL;93,33
  210;IT;Italy;2016;DIF;93,56
  211;IT;Italy;2016;TET;93,72
  212;IT;Italy;2016;PER;93,55
  213;IT;Italy;2016;DT-DTP3;
  214;IT;Italy;2016;EP B;92,98
  215;IT;Italy;2016;HIB;93,05
  216;IT;Italy;2016;MOR;87,26
  217;IT;Italy;2016;PAR;87,2
  218;IT;Italy;2016;ROS;87,19
  219;IT;Italy;2016;VAR;46,06
  220;IT;Italy;2016;M-MPR1-MPRV;
  221;IT;Italy;2016;M-MPR1;
  222;ITC1;Piemonte;2000;POL;97,2
  223;ITC1;Piemonte;2000;DIF;
  224;ITC1;Piemonte;2000;TET;
  225;ITC1;Piemonte;2000;PER;
  226;ITC1;Piemonte;2000;DT-DTP3;97,2
  227;ITC1;Piemonte;2000;EP B;97,2
  228;ITC1;Piemonte;2000;HIB;44
  229;ITC1;Piemonte;2000;MOR;
  230;ITC1;Piemonte;2000;PAR;
  231;ITC1;Piemonte;2000;ROS;
  232;ITC1;Piemonte;2000;VAR;
  233;ITC1;Piemonte;2000;M-MPR1-MPRV;
  234;ITC1;Piemonte;2000;M-MPR1;67,6
  235;ITC1;Piemonte;2001;POL;97,2
  236;ITC1;Piemonte;2001;DIF;
  237;ITC1;Piemonte;2001;TET;
  238;ITC1;Piemonte;2001;PER;
  239;ITC1;Piemonte;2001;DT-DTP3;97,2
  240;ITC1;Piemonte;2001;EP B;97,2
  241;ITC1;Piemonte;2001;HIB;66,8
  242;ITC1;Piemonte;2001;MOR;
  243;ITC1;Piemonte;2001;PAR;
  244;ITC1;Piemonte;2001;ROS;
  245;ITC1;Piemonte;2001;VAR;
  246;ITC1;Piemonte;2001;M-MPR1-MPRV;
  247;ITC1;Piemonte;2001;M-MPR1;73,2
  248;ITC1;Piemonte;2002;POL;96,9
  249;ITC1;Piemonte;2002;DIF;
  250;ITC1;Piemonte;2002;TET;
  251;ITC1;Piemonte;2002;PER;
  252;ITC1;Piemonte;2002;DT-DTP3;96,9
  253;ITC1;Piemonte;2002;EP B;96,9
  254;ITC1;Piemonte;2002;HIB;72,4
  255;ITC1;Piemonte;2002;MOR;
  256;ITC1;Piemonte;2002;PAR;
  257;ITC1;Piemonte;2002;ROS;
  258;ITC1;Piemonte;2002;VAR;
  259;ITC1;Piemonte;2002;M-MPR1-MPRV;
  260;ITC1;Piemonte;2002;M-MPR1;79,3
  261;ITC1;Piemonte;2003;POL;97,1
  262;ITC1;Piemonte;2003;DIF;
  263;ITC1;Piemonte;2003;TET;
  264;ITC1;Piemonte;2003;PER;
  265;ITC1;Piemonte;2003;DT-DTP3;97
  266;ITC1;Piemonte;2003;EP B;95,9
  267;ITC1;Piemonte;2003;HIB;79,7
  268;ITC1;Piemonte;2003;MOR;
  269;ITC1;Piemonte;2003;PAR;
  270;ITC1;Piemonte;2003;ROS;
  271;ITC1;Piemonte;2003;VAR;
  272;ITC1;Piemonte;2003;M-MPR1-MPRV;
  273;ITC1;Piemonte;2003;M-MPR1;84,4
  274;ITC1;Piemonte;2004;POL;97,1
  275;ITC1;Piemonte;2004;DIF;
  276;ITC1;Piemonte;2004;TET;
  277;ITC1;Piemonte;2004;PER;
  278;ITC1;Piemonte;2004;DT-DTP3;97
  279;ITC1;Piemonte;2004;EP B;96,8
  ...
  </code></pre>
  
  <p>What I would like to do is show the map of Europe (using the JSON file) and color the Italian regions using the CSV file. 
  The idea is to use radio buttons so that the user can select which antigen he wants to view.</p>
  
  <p>First of all I started trying to visualize the map and I had several problems.
  I tried two ways: a basic one that loads only the JSON and another way that loads the CSV file and the JSON file.</p>
  
  <p>This is the first solution I've tested (<code>map.js</code>):</p>
  
  <pre><code>// Create SVG element
  var width = 700;
  var height = 600;
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  var projection = d3.geoMercator()
      .scale(width / 2 / Math.PI)
      //.scale(100)
      .translate([width / 2, height / 2]);
  
  var path = d3.geoPath()
      .projection(projection);
  
  // Load map from file
  d3.json("./data/GeoJSON/nuts2.json", function(error, euNuts2) {
      if (error) {
          return console.error(error);
          throw error;
      }
  
      // Create path based on map data
      svg.append("path")
          // Adjust topology reference objects.nuts2
          .datum(topojson.feature(euNuts2, euNuts2.objects.nuts2))
          .attr("d", path(euNuts2));
  });
  </code></pre>
  
  <p>It doesn't generate errors but it doesn't display anything. Why? Is it a problem of projections?</p>
  
  <p>This is the second solution I tested (<code>map.js</code>):</p>
  
  <pre><code>var width = 700;
  var height = 600;
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  var projection = d3.geoMercator()
      .scale(width / 2 / Math.PI)
      //.scale(100)
      .translate([width / 2, height / 2]);
  
  var path = d3.geoPath()
      .projection(projection);
  
  d3.queue()
      .defer(d3.json, '../data/GeoJSON/nuts2.json')
      .defer(d3.csv, '../data/csv/Coverage Italy 24 months.csv')
      .await(makeMap); // when data arrives call makeMap function
  
  function makeMap(error, coverageItaly) {
      if (error) {
          console.log("*** ERROR LOADING FILES: " + error + " ***");
      }
  
  }; // end makeMap function 
  </code></pre>
  
  <p>Here the problem is the path of the CSV file that is not found, but to me it seems correct.</p>
  
  <p>The files are saved in this way:</p>
  
  <pre><code>data dir
  |_ csv dir
     |_ Coverage Italy 24 months.csv
  |_ GeoJSON dir
     |_ nuts2.json
  
  script dir
  |_ map.js
  
  style dir
  |_ map.css
  
  index.html
  </code></pre>
  
  <p>My html file is (<code>index.html</code>):</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Map&lt;/title&gt;
  
      &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
      &lt;script src="//d3js.org/topojson.v2.min.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="./style/map.css" media="screen" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="chart-title"&gt;Vaccination coverage in Europe&lt;/div&gt;
  
      &lt;div id="container-map"&gt;&lt;/div&gt;
  
      &lt;script src="./script/map.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>I don't understand exactly what the problems are.
  I have read the D3js API, I have looked at numerous examples and I cann't solve them. 
  Can someone help me?</p>