renecnielsen/.block

## .block
license: mit

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

## thumbnail.png

      
    Raw
  

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