block by renecnielsen d301813987e32a7b8eee8e5a43b72776

IFRC IMs

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//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='//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="//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};
}
});

var regional_ims = [{
        name: 'Africa',
        im: 'Henk Hoff',
        latitude: -1.2912989,
        longitude: 36.7973006,
        radius: 10,
        fillKey: 'Has IM',
      },{
        name: 'Americas',
        im: 'Alberto Cabrera<br/>Fanor Andres Camacho Orejuela',
        latitude: 9.0052873,
        longitude: -79.58781,
        radius: 10,
        fillKey: 'Has IM',
      },{
        name: 'Asia Pacific',
        im: 'Charles Ranby',
        latitude: 3.1608324,
        longitude: 101.726076,
        radius: 10,
        fillKey: 'Has IM',
      },{
        name: 'Europe and Central Asia',
        im: 'Rachel Catherine Yates',
        latitude: 47.5189678,
        longitude: 19.0254206,
        radius: 10,
        fillKey: 'Has IM',
      },{
        name: 'Middle East and North Africa',
        im: 'Ryan Delafosse',
        latitude: 33.8546194,
        longitude: 35.552374,
        radius: 10,
        fillKey: 'Has IM',
      },{
        name: 'Geneva Secretariat',
        im: 'René Clausen Nielsen<br/>Guido Pizzini<br/>Mununuri Musori<br/>Elsa Raunio<br/>Heather Leson<br/>Roxanne Moore',
        latitude: 46.2050242,
        longitude: 6.1090692,
        radius: 10,
        fillKey: 'Has IM',
      }
    ];
//draw bubbles
map.bubbles(regional_ims, {
    popupTemplate: function (geo, data) {
            return ['<div class="hoverinfo">' +  '<h3>' + data.name + '</h3>',
            data.im,
            '</div>'].join('');
    }
});

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