Map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    body {
      margin: 0;
      background-color: #2A2C39;
      font-family: 'Yanone Kaffeesatz', sans-serif;
      font-weight: 200;
      font-size: 17px;
    }
    #map-holder {
      width: 100vw;
      height: 100vh;
    }
    svg rect {
      fill: #2A2C39;   /* map background colour */
    }
    .country{
      fill: #d0d0d0;   /* country colour */
      stroke: #2A2C39; /* country border colour */
      stroke-width: 1; /* country border width */
    }
    .country-on{
      fill: #4B5358;   /* highlight colour for selected country */
    }
    .countryLabel{
      display: none;   /* hide all country labels by default */
    }
    .countryName{
      fill: #FFFAFF;   /* country label text colour */
    }
    .countryLabelBg{
      fill: #30BCED;   /* country label background colour */
    }
  
  </style>
</head>

</script>
</body>

https://d3js.org/d3.v4.min.js