IFRC IMs

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.hires.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,900' rel='stylesheet' type='text/css'>
  <style type="text/css">
  body {
    font: 100 10px Roboto, "Helvetica Neue", Helvetica;
    background-color: #f8f8f8;
  }
  h1 {
    font-size: 2.5em;
    font-weight: 900;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 1.3em;
    margin: 0;
  }
  #content {
    max-width: 1600px;
    margin: 20px auto;
  }
  #description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  }
  #sources {
    text-align: right;
    font-size: 0.9em;
    width: 1000px;
    margin: 0 auto;
  }
  #container {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 500px
  }
  .datamaps-hoverover {
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 100 !important;
  }
  a {
    color: #C02C2D;
  }
  </style>
</head>
<body>
  <div id="content">
    <div id="description">
      <h1>IFRC Information Management Network</h1>
      <p></p>
    </div>
    <div id="container"></div>
    <div id="sources">
      <p><a href="https://bl.ocks.org/renecnielsen/d301813987e32a7b8eee8e5a43b72776">Source</a></p>
    </div>
  </div>
</body>
<script>

// Creating function to insert thousand separator in output
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// Getting the container's dimensions
var width = document.getElementById('container').offsetWidth;
var height = document.getElementById('container').offsetHeight;

// Datamap constructor, fill in the options from the docs
var map = new Datamap({
  element: document.getElementById('container'),
  fills: {
    "Has IM": '#C02C2D',
    "Needs IM": '#2A2A2A',
    defaultFill: '#dedede'       // the colours
},

geographyConfig: {
  highlightOnHover: false,
  highlightFillColor:"#003045",
  highlightBorderColor:"#96999b",
},
setProjection: function(element, options) {
  var projection, path;
  projection = d3.geo.mercator()                          // The d3 projection
  .translate([(width/2), (height/2)])      // And some options
  .scale( width / 2 / Math.PI)
  .center([-15.652173913043478, 17.2734596919573]);
  path = d3.geo.path()
  .projection( projection );
  return {path: path, projection: projection};
}
});

//draw a legend for this map
map.legend();
</script>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

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

https://d3js.org/topojson.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.hires.min.js