Pabloska/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Multiple choropleth maps</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.menu-ui {
  position:absolute;
  top:10px;
  right:10px;
  font-size:20px;
  }

/* Do a fancy data transition for browsers that support it */
path {
  -webkit-transition:fill 200ms;
          transition:fill 200ms;
  }

  	.info {
		padding: 6px 8px;
		font: 14px/16px Arial, Helvetica, sans-serif;
		background: white;
		background: rgba(255,255,255,0.8);
		box-shadow: 0 0 15px rgba(0,0,0,0.2);
		border-radius: 5px;
		}
		.info h4 {
		margin: 0 0 5px;
		color: #777;
		}

		.legend {
		line-height: 18px;
		color: #555;
		}
		.legend i {
		width: 18px;
		height: 18px;
		float: left;
		margin-right: 8px;
		opacity: 0.7;
		}

</style>

<div id='map'></div>
<div id='variables' class='menu-ui'></div>


<div style="margin:0px 20px 0px 20px; float:left;position:relative">
   <img src="http://migrantreport.org/wp-content/uploads/graph2.png" alt="" width="330px";height='500px' />
</div>
<div style="margin:40px 20px 0 0; float:right;position:relative;
    width: 270px;word-wrap: break-word;font-style: italic;font-size: 14px">
   <p> Scroll down and display the values from 2000 to 2014 on the map. Notice, for instance, how countries such as the UK and US change category through the time.</p>
</div>

<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicGFibG84MSIsImEiOiI1NDRiZTFhNTRkZmVlN2Y0MzZlYWVjNWVmYzk5YTEwNyJ9.92iWZa52uWI4oHKg_Uu4aw';
var map = L.mapbox.map('map', 'mapbox.light')
    .setView([60, -50], 3);

// Be nice and credit our data source, Census Reporter.
map.attributionControl.addAttribution('Data from ' +
  '<a href="http://www.mipex.eu/">' +
  'MIPEX</a>');

// Choropleth colors from http://colorbrewer2.org/
// You can choose your own range (or different number of colors)
// and the code will compensate.
var hues = [
    '#ffffb2',
    '#fed976',
    '#fd8d3c',
    '#f03b20',
	'#bd0026',
	];

// The names of variables that we'll show in the UI for
// styling. These need to match exactly.
var variables = [
    '2010: Average Score on Integration Policies',
    '2011: Average Score on Integration Policies',
	'2012: Average Score on Integration Policies',
	'2013: Average Score on Integration Policies',
	'2014: Average Score on Integration Policies'];

// Collect the range of each variable over the full set, so
// we know what to color the brightest or darkest.
var ranges = {};
var $select = $('<select></select>')
    .appendTo($('#variables'))
    .on('change', function() {
        setVariable($(this).val());
    });
for (var i = 0; i < variables.length; i++) {
    ranges[variables[i]] = { min: Infinity, max: -Infinity };
    // Simultaneously, build the UI for selecting different
    // ranges
    $('<option></option>')
        .text(variables[i])
        .attr('value', variables[i])
        .appendTo($select);
}

// Create a layer of state features, and when it's done
// loading, run loadData
var usLayer = L.mapbox.featureLayer()
    .loadURL('int.json')
    .addTo(map)
    .on('ready', loadData);

// Grab the spreadsheet of data as JSON. If you have CSV
// data, you should convert it to JSON with
// http://shancarter.github.io/mr-data-converter/
function loadData() {
    $.getJSON('integration_years.json')
        .done(function(data) {
            joinData(data, usLayer);
        });
}

function joinData(data, layer) {
    // First, get the US state GeoJSON data for reference.
    var usGeoJSON = usLayer.getGeoJSON(),
        byState = {};

    // Rearrange it so that instead of being a big array,
    // it's an object that is indexed by the state name,
    // that we'll use to join on.
    for (var i = 0; i < usGeoJSON.features.length; i++) {
        byState[usGeoJSON.features[i].properties.name] =
            usGeoJSON.features[i];
    }
    for (i = 0; i < data.length; i++) {
        // Match the GeoJSON data (byState) with the tabular data
        // (data), replacing the GeoJSON feature properties
        // with the full data.
        byState[data[i].name].properties = data[i];
        for (var j = 0; j < variables.length; j++) {
            // Simultaneously build the table of min and max
            // values for each attribute.
            var n = variables[j];
            ranges[n].min = Math.min(data[i][n], ranges[n].min);
            ranges[n].max = Math.max(data[i][n], ranges[n].max);
        }
    }
    // Create a new GeoJSON array of features and set it
    // as the new usLayer content.
    var newFeatures = [];
    for (i in byState) {
        newFeatures.push(byState[i]);
    }
    usLayer.setGeoJSON(newFeatures);
    // Kick off by filtering on an attribute.
    setVariable(variables[0]);
}
function getColor(d) {
	return d > 80 ? '#bd0026' :
           d > 60  ? '#f03b20' :
           d > 40  ? '#fd8d3c' :
           d > 20  ? '#fed976' :

                     '#ffffb2' ;
		}


		//Custom Legend Control

		var legend = L.control({position: 'bottomright'});

		legend.onAdd = function (map) {

		var div = L.DomUtil.create('div', 'info legend'),
        grades = [0,20,40,60,80],
        labels = ["Unfavorable","Slighty unfavorable", "Halway favorable","Slightly favourable","Favorable"];

		// loop through our density intervals and generate a label with a colored square for each interval
		for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
            '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1]+ ' : '+labels[i]+ '<br>' : '+    : '+labels[i]);
		}


		return div;
		};

		legend.addTo(map);


// Excuse the short function name: this is not setting a JavaScript
// variable, but rather the variable by which the map is colored.
// The input is a string 'name', which specifies which column
// of the imported JSON file is used to color the map.
function setVariable(name) {
    var scale = ranges[name];
    usLayer.eachLayer(function(layer) {
        // Decide the color for each state by finding its
        // place between min & max, and choosing a particular
        // color as index.
        var division = Math.floor(
            (hues.length - 1) *
            ((layer.feature.properties[name] - scale.min) /
            (scale.max - scale.min)));
        // See full path options at
        // http://leafletjs.com/reference.html#path
        layer.setStyle({
            fillColor: hues[division],
            fillOpacity: 0.6,
            weight: 0.6

        });
    });
}

</script>
</body>
</html>

## int.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              int.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## integration_years.json

      
    Raw
  

              integration_years.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Multiple choropleth maps</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<style>
	.menu-ui {
	position:absolute;
	top:10px;
	right:10px;
	font-size:20px;
	}

	/* Do a fancy data transition for browsers that support it */
	path {
	-webkit-transition:fill 200ms;
	transition:fill 200ms;
	}

	.info {
	padding: 6px 8px;
	font: 14px/16px Arial, Helvetica, sans-serif;
	background: white;
	background: rgba(255,255,255,0.8);
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border-radius: 5px;
	}
	.info h4 {
	margin: 0 0 5px;
	color: #777;
	}

	.legend {
	line-height: 18px;
	color: #555;
	}
	.legend i {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 8px;
	opacity: 0.7;
	}

	</style>

	<div id='map'></div>
	<div id='variables' class='menu-ui'></div>


	<div style="margin:0px 20px 0px 20px; float:left;position:relative">
	<img src="http://migrantreport.org/wp-content/uploads/graph2.png" alt="" width="330px";height='500px' />
	</div>
	<div style="margin:40px 20px 0 0; float:right;position:relative;
	width: 270px;word-wrap: break-word;font-style: italic;font-size: 14px">
	<p> Scroll down and display the values from 2000 to 2014 on the map. Notice, for instance, how countries such as the UK and US change category through the time.</p>
	</div>

	<!-- jQuery is required for this example. -->
	<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoicGFibG84MSIsImEiOiI1NDRiZTFhNTRkZmVlN2Y0MzZlYWVjNWVmYzk5YTEwNyJ9.92iWZa52uWI4oHKg_Uu4aw';
	var map = L.mapbox.map('map', 'mapbox.light')
	.setView([60, -50], 3);

	// Be nice and credit our data source, Census Reporter.
	map.attributionControl.addAttribution('Data from ' +
	'<a href="http://www.mipex.eu/">' +
	'MIPEX</a>');

	// Choropleth colors from http://colorbrewer2.org/
	// You can choose your own range (or different number of colors)
	// and the code will compensate.
	var hues = [
	'#ffffb2',
	'#fed976',
	'#fd8d3c',
	'#f03b20',
	'#bd0026',
	];

	// The names of variables that we'll show in the UI for
	// styling. These need to match exactly.
	var variables = [
	'2010: Average Score on Integration Policies',
	'2011: Average Score on Integration Policies',
	'2012: Average Score on Integration Policies',
	'2013: Average Score on Integration Policies',
	'2014: Average Score on Integration Policies'];

	// Collect the range of each variable over the full set, so
	// we know what to color the brightest or darkest.
	var ranges = {};
	var $select = $('<select></select>')
	.appendTo($('#variables'))
	.on('change', function() {
	setVariable($(this).val());
	});
	for (var i = 0; i < variables.length; i++) {
	ranges[variables[i]] = { min: Infinity, max: -Infinity };
	// Simultaneously, build the UI for selecting different
	// ranges
	$('<option></option>')
	.text(variables[i])
	.attr('value', variables[i])
	.appendTo($select);
	}

	// Create a layer of state features, and when it's done
	// loading, run loadData
	var usLayer = L.mapbox.featureLayer()
	.loadURL('int.json')
	.addTo(map)
	.on('ready', loadData);

	// Grab the spreadsheet of data as JSON. If you have CSV
	// data, you should convert it to JSON with
	// http://shancarter.github.io/mr-data-converter/
	function loadData() {
	$.getJSON('integration_years.json')
	.done(function(data) {
	joinData(data, usLayer);
	});
	}

	function joinData(data, layer) {
	// First, get the US state GeoJSON data for reference.
	var usGeoJSON = usLayer.getGeoJSON(),
	byState = {};

	// Rearrange it so that instead of being a big array,
	// it's an object that is indexed by the state name,
	// that we'll use to join on.
	for (var i = 0; i < usGeoJSON.features.length; i++) {
	byState[usGeoJSON.features[i].properties.name] =
	usGeoJSON.features[i];
	}
	for (i = 0; i < data.length; i++) {
	// Match the GeoJSON data (byState) with the tabular data
	// (data), replacing the GeoJSON feature properties
	// with the full data.
	byState[data[i].name].properties = data[i];
	for (var j = 0; j < variables.length; j++) {
	// Simultaneously build the table of min and max
	// values for each attribute.
	var n = variables[j];
	ranges[n].min = Math.min(data[i][n], ranges[n].min);
	ranges[n].max = Math.max(data[i][n], ranges[n].max);
	}
	}
	// Create a new GeoJSON array of features and set it
	// as the new usLayer content.
	var newFeatures = [];
	for (i in byState) {
	newFeatures.push(byState[i]);
	}
	usLayer.setGeoJSON(newFeatures);
	// Kick off by filtering on an attribute.
	setVariable(variables[0]);
	}
	function getColor(d) {
	return d > 80 ? '#bd0026' :
	d > 60 ? '#f03b20' :
	d > 40 ? '#fd8d3c' :
	d > 20 ? '#fed976' :

	'#ffffb2' ;
	}


	//Custom Legend Control

	var legend = L.control({position: 'bottomright'});

	legend.onAdd = function (map) {

	var div = L.DomUtil.create('div', 'info legend'),
	grades = [0,20,40,60,80],
	labels = ["Unfavorable","Slighty unfavorable", "Halway favorable","Slightly favourable","Favorable"];

	// loop through our density intervals and generate a label with a colored square for each interval
	for (var i = 0; i < grades.length; i++) {
	div.innerHTML +=
	'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
	grades[i] + (grades[i + 1] ? '–' + grades[i + 1]+ ' : '+labels[i]+ '<br>' : '+ : '+labels[i]);
	}


	return div;
	};

	legend.addTo(map);



	// Excuse the short function name: this is not setting a JavaScript
	// variable, but rather the variable by which the map is colored.
	// The input is a string 'name', which specifies which column
	// of the imported JSON file is used to color the map.
	function setVariable(name) {
	var scale = ranges[name];
	usLayer.eachLayer(function(layer) {
	// Decide the color for each state by finding its
	// place between min & max, and choosing a particular
	// color as index.
	var division = Math.floor(
	(hues.length - 1) *
	((layer.feature.properties[name] - scale.min) /
	(scale.max - scale.min)));
	// See full path options at
	// http://leafletjs.com/reference.html#path
	layer.setStyle({
	fillColor: hues[division],
	fillOpacity: 0.6,
	weight: 0.6

	});
	});
	}

	</script>
	</body>
	</html>