Skip to content

Instantly share code, notes, and snippets.

@Pabloska

Pabloska/index.html

Last active January 12, 2018 14:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pabloska/5d73d024742fc509c003dc73c8d87aeb to your computer and use it in GitHub Desktop.
Save Pabloska/5d73d024742fc509c003dc73c8d87aeb to your computer and use it in GitHub Desktop.
Download ZIP
4mi
Raw
index.html
<html>
<head>
<title>Hot Spots</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Migrant Incidents : Hot Spots" />
<meta property="og:site_name" content="4MI | Hot Spots" />
<meta name="author" content="Pablo Gallego Cadabon">
<meta name="keywords" content="migration, migrant report, geo-map, map, refugee, crisis, death at sea, global migration">
<meta name="description" content="migration data">
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:description" content="Interactive map of incidents reported by migrants and refugees from The Horn of Africa on the move to Europe and South Africa." />
<meta name='subtitle' content='Migrant Incidents : Hot Spots'>
<meta property="og:url" content="http://4mi.regionalmms.org/maps/4mi_filters_2016.html" />
<meta property="og:image" content="http://4mi.regionalmms.org/Pablosimages/thumbnail_filters.jpg" />
<meta property="article:author" content="https://www.facebook.com/pablo.cadabon" />
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- include cartodb.js CSS library -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
</head>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;font-family: 'Open Sans', sans-serif;background-color:#232227;overflow-x: hidden}
#map { width: 100%; height:70%; background: black;}
#menu { position: absolute; bottom: 10; left: 10; width: 130px; height:460px; z-index:10;border: 0px solid #777777;}
.cartodb-timeslider{ display: none!important; }
div.cartodb-legend { position: absolute; bottom: 0px; }
div.cartodb-legend.intensity { padding:5px }
#menu a.selected{
color: black;
background:white
}
.btn-default a:hover {
color: #F84F40;
}
.leaflet-container .leaflet-control-attribution{
color: grey; -> change color of text
background-color: transparent;
opacity:0
}
.link-web{z-index:1500;position:absolute;top:10px;right:20px;border: 1px solid rgba(255, 255, 255, .3);border-radius:0px;}
.link-web:hover{border: 1.5px solid white;border-radius:0px;margin:0px;padding:0px;color:#ffff99;background-color: rgba(0,0,0,0.4);text-decoration: none}
.share-buttons{z-index:1500;position:absolute;top:10px;right:20px;}
.btn-default:hover{ border: 2px solid grey;}
.btn-default:after{ background-color:rgba(0, 102, 204, 0.6); border: 2px solid grey;}
.leaflet-container .leaflet-control-attribution{
color: grey; -> change color of text
background-color: transparent;
}
.leaflet-container .leaflet-control-attribution a{
color: grey; -> change the color of the hyperlinks
}
.btn {
padding: 5px;
margin-top:5px;
min-width: 170px;
}
@media screen and (max-width: 501px) {
.btn{padding: 0px;min-width: 260px;} /* hide it elsewhere */}
.total_boxes {margin-top:5px;color:white; padding: 5px;border: 1px solid #ccc;width:170px;backgrund-color:transparent}
@media screen and (max-width: 501px) {
.total_boxes{padding: 0px;min-width: 260px;} /* hide it elsewhere */}
.title_filter { color:white;font-weight: 600;text-transform: uppercase;background-color:#3f3f41;margin-bottom:5px;text-align:center;font-size:14px}
@media screen and (max-width: 501px) {
.title_filter{margin-top:-70px } /* hide it elsewhere */}
.dropdown-menu{
padding: 0px;
min-width: 170px;
}
.row {
text-align:center;
margin-top:20px
}
#box{
position: absolute;
top: 60px;
left: 20px;
width: 200px;
height: 170px;
opacity: 0.9;
padding: 5px 10px 5px 10px;
border-radius: 25px;
background-color: #FFF;
color: #fdb462;
}
.intro {font-size:12px;top:30%;padding:50px;padding-top:20px;position:relative}
.intro_t2 {font-size:15px;opacity:0.9; margin-top:0px;text-align:center}
.header {font-size:24px;font-weight:bold;text-align:center;opacity:0.9}
a.close{
text-align:center;
border: 2px solid white;
opacity:1;
background:transparent;
text-shadow:none;
padding:5px;
color:white
}
a.close:hover{
border: 1px solid #ff704d;
opacity:1;
text-shadow:none;
padding:4px;
color:#ff704d;
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.logo{margin-right: auto; margin-left: auto;z-index:100;width:150px;border: 0px solid #ccc;float:center;top:15px;opacity: 0.65; text-align: center}
</style>
<body onload="init()">
<div id='map'>
<!--Legend-->
<div style="border: transparent;background-color:rgba(0, 0, 0, 0)" class='cartodb-legend intensity'>
<div style="margin-bottom:5px;font-size:13px;border-bottom: 1px solid grey;text-align:center;left:50%;right:50%">N° of Incidents Displayed: <span id="numa" style="font-size:20px;;color: red;font-weight: bold">9,252</span></div>
<ul>
<li style="text-transform: normal" class="min">
Less
</li>
<li class="max">
More
</li>
<li class="graph" style="background: #ffd800;background: -moz-linear-gradient(left, #ffd800 0%, #ff5e00 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffd800), color-stop(100%,#ff5e00));background: -webkit-linear-gradient(left, #ffd800 0%,#ff5e00 100%);background: -o-linear-gradient(left, #ffd800 0%,#ff5e00 100%);background: -ms-linear-gradient(left, #ffd800 0%,#ff5e00 100%)background: linear-gradient(to right, #ffd800 0%,#ff5e00 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd800', endColorstr='#ff5e00',GradientType=1 );background-image: -ms-linear-gradient(left, #ffd800 0%,#ff5e00 100%)">
</li>
</ul>
<p style="font-size:11px;margin-top:5px;margin-bottom:0px;font-weight:bold;text-align:center" >Reported from 10/09/2014 to 16/12/2016</p>
</div>
</div>
<!--Alert window - start visualization-->
<div style="background-color:rgba(0, 0, 0, 0.5);width:100%;height:100%;top:0px;position:fixed;z-index:1000;padding:0px;border-color:transparent" class="alert alert-success fade in">
<div style=";color:white;height:100%;background:#333333;opacity:1;z-index:10000">
<iframe style="opacity:0.6;position:absolute" frameborder="0" height="100%" width="100%" src="http://4mi.regionalmms.org/maps/MR_incident_spot_06.html">
</iframe>
<div class="intro" >
<p class="header" ><span style="opacity:0.9">Migrant Incidents</span><span style="color:#ff704d"> &#8226;</span> Hot Spots
<div class="intro_t2" >
Interactive map of incidents reported by migrants and refugees from The Horn of Africa on the move to Europe and South Africa. Click start to filter and explore the data in detail.
<br></br>
<p style="position:relative;width:200px; display: block; margin-left: auto;margin-right: auto; text-align: center;padding-bottom:20px" >
<a style="font-weight:normal;top:20px;width:100%" class="close" data-dismiss="alert" >Start Visualization</a>
</p>
</div>
<p style="opacity:0.8;margin-top:40px;position:relative; display: block; margin-left: auto;margin-right: auto; text-align: center;font-size:12px;" >&#174 Mixed Migration Monitoring Mechanism Initiative (4Mi) - All Rights Reserved</p>
</div>
</div>
</div>
<!--incidents-->
<div class="container">
<br></br>
<div class="title_filter">Filters<span style="text-transform: normal;color:#ffff99" id ='region'></span></div>
<div class="row">
<div class="btn-group">
<div class="total_boxes" >Sample Size
<span id="arrivals" style=";color: white;font-weight: bold">0</span>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selection"> Select Incident </span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#death" id="death" class="button">Deaths</a></li>
<li><a href="#missing" id="missing" class="button">Missing People</a></li>
<li><a href="#kidnapping" id="kidnapping" class="button" >Kidnapping</a></li>
<li><a href="#sexual_abuse" id="sexual_abuse" class="button" >Sexual Abuse</a></li>
<li><a href="#physical_abuse" id="physical_abuse" class="button" >Physical Abuse</a></li>
<li><a href="#extortion" id="extortion" class="button" >Extortion</a></li>
<li><a href="#food_water" id="food_water" class="button">Lack of Food/Water</a></li>
<li><a href="#shelter" id="shelter" class="button">Shelter issues</a></li>
<li><a style ="font-weight:bold;color:black;margin-bottom:10px" href="#all_incidents" id="all_incidents" class="button">All Incidents</a></li>
</ul>
</div>
<!--origins-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selection">Select Origin </span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#djibouti" id="djibouti" class="button">Djibouti</a></li>
<li><a href="#eritrea" id="eritrea" class="button">Eritrea</a></li>
<li><a href="#somalia" id="somalia" class="button">Somalia</a></li>
<li><a href="#ethiopia" id="ethiopia" class="button">Ethiopia</a></li>
<li><a style ="font-weight:bold;color:black;margin-bottom:10px" href="#all_origins" id="all_origins" class="button">All origins</a></li>
</ul>
</div>
<!--gender-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selection">Select Gender </span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#male" id="male" class="button">Male</a></li>
<li><a href="#female" id="female" class="button">Female</a></li>
<li><a style ="font-weight:bold;color:black;margin-bottom:10px" href="#all_genders" id="all_genders" class="button">Both genders</a></li>
</ul>
</div>
<div class="btn-group">
<div class="total_boxes" >Incidents Filtered:
<span id="num" style=";color: red;font-weight: bold">0</span>
</div>
</div>
</div><br>
<div style="color:white;opacity:0.7;text-align:justify">
This map shows the spatial distribution of incidents reported by migrants and refugees from the Horn of Africa. The dark dots (dark red) represent locations where incidents have repeatedly occurred, whereas the lighter spots (yellow) represent locations where incidents have occurred less frequently (1-2 times). While most of the incidents occurred in specific locations and were accurately geo-located, those which took place within the Sahara Desert – mostly between Khartoum (Sudan) and the southern Libyan region of Al Kufra – are displayed over approximate locations. Use the filters below to further breakdown the data/incidences.<br>
</div>
</div>
<!--LOGO-->
<br>
<br>
<!--<div class="logo" ><img src="http://xchange.org/map/img/xchange-white.png" alt="migrnats" style=";opacity:0.8; background:transparent; z-index:10;max-width:65%;max-height:65%"> </div> -->
<div style="opacity:0.6;padding:10px;margin-right: auto; margin-left: auto;text-align: center;font-size:13px;;color:white;" >&#174 Developed by <a style="color:white" href="http://www.pablogallego-gis.com/" >Pablo Gallego Cadabon</a></div>
<!--sharing-->
<ul class="share-buttons" style=" border: 0px solid grey;opacity:0.7;height:28px;width:190px;margin-top:0px;text-align:right">
<a style="padding:7px;" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F4mi.regionalmms.org%2Fmaps%2F4mi_filters_2016.html&t=" title="Share on Facebook" target="_blank"><img style="width:15%" src="http://4mi.regionalmms.org/Pablosimages/Facebook.png"></a>
<a style="padding:7px;" href="https://twitter.com/intent/tweet?source=http%3A%2F%2F4mi.regionalmms.org%2Fmap%2F4mi_filters_2016.html&text=:%20http%3A%2F%2F4mi.regionalmms.org%2Fmaps%2F4mi_filters_2016.html" target="_blank" title="Tweet"><img style="width:15%" src="http://4mi.regionalmms.org/Pablosimages/Twitter.png"></a>
<a style="padding:7px;" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2F4mi.regionalmms.org%2Fmaps%2F4mi_filters_2016.html&title=&summary=&source=http%3A%2F%2F4mi.regionalmms.org%2Fmaps%2F4mi_filters_2016.html" target="_blank" title="Share on LinkedIn"><img style="width:15%" src="http://4mi.regionalmms.org/Pablosimages/LinkedIn.png"></a>
</ul>
<!--sharing-->
<a class="link-web" style=" line-height: 150%;opacity:1;height:25px;width:160px;margin-top:0px;margin-right:130px;text-align:center;color:white" href="http://4mi.regionalmms.org/4mi.html" ><span style="font-size:15px;color:#339BEB; font-weight: 800;"> 4Mi </span>website </a>
<script>
var map;
var incident = "'shelter','extortion','missing','death','lack of food/water','kidnapping','physical abuse','sexual abuse'";
var origin = "'Somalia','Eritrea','Ethiopia'";
var gender = "'Male','Female'";
function init(){
// initiate leaflet map
map = new L.Map('map', {
zoomControl: false,
scrollWheelZoom: false,
attributionControl: false,
center: [15,20],
width: 500,
zoom: 4,
minZoom: 4
});
L.control.zoom({
position:'topleft'
}).addTo(map);
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
}).addTo(map);
//http://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.png
//http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png
//http://stamen-tiles-{s}.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.png
//HORN-OF-AFRICA BOUNDARIES//
var layerUrl3 = 'https://pablo-cartodb.carto.com/api/v2/viz/50c534c6-e23c-4755-bea1-04206e924c2d/viz.json';
cartodb.createLayer(map, layerUrl3, {
cartodb_logo: false,
}
)
.on('done', function(layer) {
map.addLayer(layer);
//layer.interaction.remove();
//layer.interaction = null;
}).on('error', function() {
//log the error
});
//Migrant Routes Across Africa//
cartodb.createLayer(map, {
user_name: 'pablo-cartodb',
table_name: "all_routes_africa",
type: 'cartodb',
order: 1,
cartodb_logo: false,
sublayers: [{
sql: "SELECT * FROM all_routes_africa where rmms='yes'",
cartocss: '#all_routes_africa{line-color: #FFFFFF;line-width: 1; line-opacity: 0.7;}#all_routes_africa [type="sea"]{ line-color: #FFFFFF;line-width: 0.8;line-opacity: 0.7;line-dasharray: 3, 3;}#all_routes_africa [image_url !=""]{ line-color: #FFFFFF; line-width: 1; line-opacity: 0.7;}'
}]
})
.addTo(map)
//INCIDENTS LAYER//
var layerUrl2 = 'https://pablo-cartodb.carto.com/api/v2/viz/c66ee023-29ef-4cab-8e29-11519946c0ac/viz.json';
var sublayers = [];
cartodb.createLayer(map, layerUrl2, {
cartodb_logo: false,
}
)
.addTo(map)
.on('done', function(layer) {
//***Create the sublayer to be toggled
/* var incident = 'b_death';
var origin = 'd_somalia1';
var gender = 'c_male'; */
console.log(incident,origin)
var subLayerOptions = {
sql:"SELECT * FROM table_4mi_dataset_p5"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
//sublayer.setInteraction(true);
}).on('error', function() {
//log the error
});
//END BUBLES LAYER//
$('.button').click(function() {
//$('.button').removeClass('selected');
//$(this).addClass('selected');
LayerActions[$(this).attr('id')]();
//console.log(LayerActions[$(this).attr('id')])
});
//dropdown menu incudents
$(".dropdown-menu li a").click(function(){
$(this).parents(".btn-group").find('.selection').text($(this).text());
$(this).parents(".btn-group").find('.selection').val($(this).text());
});
//layer actions
var val;
var sum = 0
var sum2 = 0
var sql = new cartodb.SQL({ user: 'kkadabon'});
var LayerActions = {
// FUNTION FOR INCIDENTS//
all_incidents: function(){
incident = "'shelter','extortion','missing','death','lack of food/water','kidnapping','physical abuse','sexual abuse'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows + 1
}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
extortion: function(){
incident = "'extortion'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows + 1
}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
missing: function(){
incident = "'missing'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows + 1
}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
//ANIMATED FIGURES
},
shelter: function(){
incident = "'shelter'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
death: function(){
var sum = 0;
incident = "'death'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
val = data.rows[i].incident
sum = sum + val
}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
food_water: function(){
incident = "'lack of food/water'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
kidnapping: function(){
incident = "'kidnapping'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
physical_abuse: function(){
incident = "'physical abuse'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
sexual_abuse: function(){
incident = "'sexual abuse'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
// FUNTION FOR ORIGINS//
all_origins: function(){
origin = "'Somalia','Eritrea','Ethiopia'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
somalia: function(){
origin = "'Somalia'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
eritrea: function(){
origin = "'Eritrea'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
ethiopia: function(){
origin = "'Ethiopia'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
djibouti: function(){
origin = "'Djibouti'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
//genders
all_genders: function(){
gender = "'Male','Female'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
male: function(){
gender = "'Male'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
female: function(){
gender = "'Female'";
sublayers[0].set({
sql: "SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ")and sex in ("+ gender + ") ",
});
//sql API to filter and then js to count the number of rows filtered
sql.execute("SELECT * FROM table_4mi_dataset_p5 where type in ("+ incident + ") and origin in ("+ origin + ") and sex in ("+ gender + ")")
.done(function(data){
for(i = 0; i < data.total_rows; i++){ // loop that reads each column of the table
sum = data.total_rows}
console.log(sum)
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#num').animateNumber({number: sum, numberStep: comma_separator_number_step},1000 );
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#numa').animateNumber({number: sum, numberStep: comma_separator_number_step},1000);
});
return true;
},
}
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(',')
$('#arrivals').animateNumber({number: 1235, numberStep: comma_separator_number_step},1000 );
}
</script>
<script src="http://4mi.regionalmms.org/js/jquery.animateNumber.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-78074518-6', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment