Skip to content

Instantly share code, notes, and snippets.

@renecnielsen
Last active September 2, 2017 20:22
Show Gist options
  • Save renecnielsen/d301813987e32a7b8eee8e5a43b72776 to your computer and use it in GitHub Desktop.
Save renecnielsen/d301813987e32a7b8eee8e5a43b72776 to your computer and use it in GitHub Desktop.
IFRC IMs
license: mit
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment