muratabur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Travigator


## globe-spin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Earth globe</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
</head>
<style type="text/css">

.water {
  fill: #00248F;
}

.land {
  fill: #A98B6F;
  stroke: #FFF;
  stroke-width: 0.7px;
}

.land:hover {
  fill:#33CC33;
  stroke-width: 1px;
}

.focused {
  fill: #33CC33;
}

select {
  position: absolute;
  top: 20px;
  left: 580px;
  border: solid #ccc 1px;
  padding: 3px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
}

.countryTooltip {
  position: absolute;
  display: none;
  pointer-events: none;
  background: #fff;
  padding: 5px;
  text-align: left;
  border: solid #ccc 1px;
  color: #666;
  font-size: 14px;
  font-family: sans-serif;
}

</style>
<body>
  <script>

  var width = 600,
  height = 500,
  sens = 0.25,
  focused;

  //Setting projection

  var projection = d3.geo.orthographic()
  .scale(245)
  .rotate([0, 0])
  .translate([width / 2, height / 2])
  .clipAngle(90);

  var path = d3.geo.path()
  .projection(projection);

  //SVG container

  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

  //Adding water

  svg.append("path")
  .datum({type: "Sphere"})
  .attr("class", "water")
  .attr("d", path);

  var countryTooltip = d3.select("body").append("div").attr("class", "countryTooltip"),
  countryList = d3.select("body").append("select").attr("name", "countries");


  queue()
  .defer(d3.json, "/d/5685937/world-110m.json")
  .defer(d3.tsv, "/d/5685937/world-110m-country-names.tsv")
  .await(ready);

  //Main function

  function ready(error, world, countryData) {

    var countryById = {},
    countries = topojson.feature(world, world.objects.countries).features;

    //Adding countries to select

    countryData.forEach(function(d) {
      countryById[d.id] = d.name;
      option = countryList.append("option");
      option.text(d.name);
      option.property("value", d.id);
    });

    //Drawing countries on the globe

    var world = svg.selectAll("path.land")
    .data(countries)
    .enter().append("path")
    .attr("class", "land")
    .attr("d", path)

    //Drag event

    .call(d3.behavior.drag()
      .origin(function() { var r = projection.rotate(); return {x: r[0] / sens, y: -r[1] / sens}; })
      .on("drag", function() {
        var rotate = projection.rotate();
        projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);
        svg.selectAll("path.land").attr("d", path);
        svg.selectAll(".focused").classed("focused", focused = false);
      }))

    //Mouse events

    .on("mouseover", function(d) {
      countryTooltip.text(countryById[d.id])
      .style("left", (d3.event.pageX + 7) + "px")
      .style("top", (d3.event.pageY - 15) + "px")
      .style("display", "block")
      .style("opacity", 1);
    })
    .on("mouseout", function(d) {
      countryTooltip.style("opacity", 0)
      .style("display", "none");
    })
    .on("mousemove", function(d) {
      countryTooltip.style("left", (d3.event.pageX + 7) + "px")
      .style("top", (d3.event.pageY - 15) + "px");
    });

    //Country focus on option select

    d3.select("select").on("change", function() {
      var rotate = projection.rotate(),
      focusedCountry = country(countries, this),
      p = d3.geo.centroid(focusedCountry);

      svg.selectAll(".focused").classed("focused", focused = false);

    //Globe rotating

    (function transition() {
      d3.transition()
      .duration(2500)
      .tween("rotate", function() {
        var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
        return function(t) {
          projection.rotate(r(t));
          svg.selectAll("path").attr("d", path)
          .classed("focused", function(d, i) { return d.id == focusedCountry.id ? focused = d : false; });
        };
      })
      })();
    });

    function country(cnt, sel) {
      for(var i = 0, l = cnt.length; i < l; i++) {
        if(cnt[i].id == sel.value) {return cnt[i];}
      }
    };

  };
  </script>
</body>
</html>

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  	cursor: cell;
  	height: 100%;
  	margin: 0;
  	padding: 0;
}

.gridline {
  	fill: none;
  	stroke: grey;
  	stroke-opacity: .5;
  	stroke-width: .5px;
}

.country {
  fill: teal;
}

.border {
	fill: none;
	stroke: white;
	stroke-width: 1px;
}

#clicked {
 	fill: blue;
}

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-color: rgba(50,50,50,0.5);
}

#overlay div {
     max-width:400px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:25px;
     text-align:center;
     cursor: default;
}
# overlay p {
	text-align: left;
}

.close-popup {
	background: teal;
	color: #FFF;
	padding: 5px;
	float: right;
	text-decoration: none;
	text-align: center;
}

.close-popup:hover { background: red; }

.submit-popup {
	background: teal;
	color: #FFF;
	padding: 5px;
	float: left;
	text-decoration: none;
	text-align: center;
}

.submit-popup:hover { background: green; }

.home-button {
	background: #fff;
	opacity: 0.75;
	color: teal;
	padding: 10px;
	text-decoration: none;
	text-align: center;
}

.home-button:hover { opacity: 1.0; }

#approval {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1001;
     background-color: rgba(100,100,100,0.5);
}

</style>
<body>
<div id="approval">
	<h1 id="approval_status" style="margin-top:100px; color:white">Waiting for approval</h1>
	<a href="../travigator/index.html" class="home-button" >HOME</a>
<div id="overlay">

	<div id="form">
		<h2 id="form-title">Not going anywhere?</h2>
		<br>
		<p style="text-align:left">I will be travelling to see <br>
			<select id="client"></select>
			and <br>
			<select id="purpose"></select>
			in relation to <br>
			<select id="product"></select>
			using <br>
			<select id="materials"></select>.
		</p>
		<br>
		<a href='#' class="submit-popup" onclick='submit_for_approval()'>Get approval</a>
		<a href='#' class="close-popup" onclick='popup()'>Nevermind</a>
		<br><br>
		<p style="font-size:10px">
		For more information regarding what each category of client/purpose/product
		refers to, please contact your favourite lawyer on +44 207 123 4567.
		</p>


	</div>

</div>
</div>
<div id="map"></div>

</body>
<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/queue-async/1.0.7/queue.min.js"></script>
<script>

var width = window.innerWidth,
    height = window.innerHeight;


// Load up required data, namely world map and list of countries
queue()
.defer(d3.json, "../travigator/world-110m.json")
.defer(d3.tsv, "../travigator/world-country-dict.tsv")
.await(ready)


// Open our main function to hold all the magic
function ready(error, world, names) {

// Define countries and land
	var countries = topojson.feature(world, world.objects.countries).features;
	var land = topojson.feature(world, world.objects.land);

// Pick a projection
	var projection = d3.geo.mercator()
	    .scale(width/2/Math.PI)
	    .rotate([-10,0,0])
	    .translate([width / 2, height / 2])
	    .clipExtent([ [0,0], [width, height*0.95] ])

// Define a path type based on our projection choice
	var path = d3.geo.path().projection(projection);

	var graticule = d3.geo.graticule();

	var svg = d3.select("#map").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .attr("preserveAspectRatio", "xMinYMin");

	svg.append("path")
	    .datum(graticule)
	    .attr("class", "gridline")
	    .attr("d", path);

// Draw the countries
  	svg.insert("path")
      	.datum(topojson.feature(world, world.objects.countries))
      	.attr("class", "country")
      	.attr("d", path);

// Add effects overlaid on countries
	svg.append("g")
      	.attr("class", "country")
    	.selectAll("path")
      	.data(topojson.feature(world, world.objects.countries).features)
    	.enter().append("path")
	    .attr("d", path)
      	.on("mouseover", function(d) { d3.select(this).transition().duration(300).style("fill", "red"); })
      	.on("mouseout", function(d) { d3.select(this).transition().duration(300).style("fill", "teal"); })
      	.on("click", function(d) { 	var place = d.properties.name;
      								popup(place)
						      	});

// Draw the borders
	svg.insert("path")
		.datum(topojson.mesh(world, world.objects.countries))
		.attr("class", "border")
		.attr("d", path);
};


// selector populator
function populate(selector, data) {

	var select = document.getElementById(selector),
    option,
    i = 0,
    len = data.length;

	for (; i < len; i += 1) {
	    option = document.createElement('option');
	    option.setAttribute('value', data[i].value);
	    option.appendChild(document.createTextNode(data[i].text));
	    select.appendChild(option);
	};
};

// raw data

client_data = [
	{value: "retail", text: "Retail Customers"},
	{value: "uhnwi", text: "UHNWI Customers"},
	{value: "funds", text: "Fund Managers"},
	{value: "pension", text: "Pension Funds"},
	{value: "banks", text: "Banks"},
	{value: "insurance", text: "Insurance Companies"},
];

purpose_data = [
	{value: "sell", text: "making new sales"},
	{value: "advising", text: "advising clients"},
	{value: "finalising", text: "finalising sales already made"},
	{value: "responding", text: "responding to reverse inquiries"},
	{value: "distributing", text: "engaging in re-distribution"},
	{value: "direct ad", text: "conducting marketing face to face"},
	{value: "pulic", text: "conducting marketing publicly"},
];

product_data = [
	{value: "sp", text: "Capital Protected Structured Notes"},
	{value: "othersec", text: "Other Securitised Instruments"},
	{value: "ucists", text: "UCITS IV Funds"},
	{value: "hf", text: "Hedge Funds"},
	{value: "otc", text: "OTC Derivatives"},
	{value: "other", text: "other financial products"},
];

materials_data = [
	{value: "printed", text: "printed marketing materials"},
	{value: "without", text: "no printed marketing materials"},
	{value: "approved", text: "regulator approved marketing materials"},
	{value: "electronic", text: "electronic media (eg. presentation, film)"},
];

// populate the drop downs
	populate("client", client_data);
	populate("purpose", purpose_data);
	populate("product", product_data);
	populate("materials", materials_data);

// popup and populate (unnecessarily dynamically generated)
function popup(place) {
	// make overlay gray bkgd and popup appear
	var popup = document.getElementById("overlay");
	popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";

	// replace title with clicked country
	var form = document.getElementById("form-title");
	var header = form.innerHTML = "What will you be doing in " + place + "?";


};


function submit_for_approval() {
	// make overlay gray bkgd and popup disappear
	var popup = document.getElementById("overlay");
	popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";

	// make overlay gray bkgd and popup appear
	var popup = document.getElementById("approval");
	popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";

	// replace approval_status with random value
	var approval = document.getElementById("approval_status");

	var statuses = [
		"OF COURSE, THAT IS APPROVED!", "SHOULD BE OK, BUT SEEK FURTHER COUNSEL MY FRIEND.", "THAT'S A GREY AREA BUT TECHNICALLY IT SHOULD BE OK.", "APPROVED BUT OUR REPUTATION IS ON THE LINE.", "I WILL PRETEND I DIDN'T HEAR THAT.", "HAHA, NICE TRY. BUT NO.", "THE LAW DISAGREES WITH YOU.", "WHAT IS THIS MIFID 1? ABSOLUTELY NOT!", "I'M SORRY I CAN'T APPROVE THAT."];

	var guess = Math.floor(Math.random() * statuses.length);
	var new_status = statuses[guess];
	console.log(guess, new_status);

	approval.innerHTML = new_status
	if (guess < 4.5) {popup.style.backgroundColor = 'green'} else {popup.style.backgroundColor = 'red'};
};

</script>

## world-110m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m.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.
      
    
## world-country-dict.tsv

          
            id
            name

            
              -1
              Northern Cyprus

            
              -2
              Kosovo

            
              -3
              Somaliland

            
              4
              Afghanistan

            
              8
              Albania

            
              10
              Antarctica

            
              12
              Algeria

            
              16
              American Samoa

            
              20
              Andorra

            
              24
              Angola

            
              28
              Antigua and Barbuda

            
              31
              Azerbaijan

            
              32
              Argentina

            
              36
              Australia

            
              40
              Austria

            
              44
              Bahamas

            
              48
              Bahrain

            
              50
              Bangladesh

            
              51
              Armenia

            
              52
              Barbados

            
              56
              Belgium

            
              60
              Bermuda

            
              64
              Bhutan

            
              68
              Bolivia, Plurinational State of

            
              70
              Bosnia and Herzegovina

            
              72
              Botswana

            
              74
              Bouvet Island

            
              76
              Brazil

            
              84
              Belize

            
              86
              British Indian Ocean Territory

            
              90
              Solomon Islands

            
              92
              Virgin Islands, British

            
              96
              Brunei Darussalam

            
              100
              Bulgaria

            
              104
              Myanmar

            
              108
              Burundi

            
              112
              Belarus

            
              116
              Cambodia

            
              120
              Cameroon

            
              124
              Canada

            
              132
              Cape Verde

            
              136
              Cayman Islands

            
              140
              Central African Republic

            
              144
              Sri Lanka

            
              148
              Chad

            
              152
              Chile

            
              156
              China

            
              158
              Taiwan, Province of China

            
              162
              Christmas Island

            
              166
              Cocos (Keeling) Islands

            
              170
              Colombia

            
              174
              Comoros

            
              175
              Mayotte

            
              178
              Congo

            
              180
              Congo, the Democratic Republic of the

            
              184
              Cook Islands

            
              188
              Costa Rica

            
              191
              Croatia

            
              192
              Cuba

            
              196
              Cyprus

            
              203
              Czech Republic

            
              204
              Benin

            
              208
              Denmark

            
              212
              Dominica

            
              214
              Dominican Republic

            
              218
              Ecuador

            
              222
              El Salvador

            
              226
              Equatorial Guinea

            
              231
              Ethiopia

            
              232
              Eritrea

            
              233
              Estonia

            
              234
              Faroe Islands

            
              238
              Falkland Islands (Malvinas)

            
              239
              South Georgia and the South Sandwich Islands

            
              242
              Fiji

            
              246
              Finland

            
              248
              Aland Islands

            
              250
              France

            
              254
              French Guiana

            
              258
              French Polynesia

            
              260
              French Southern Territories

            
              262
              Djibouti

            
              266
              Gabon

            
              268
              Georgia

            
              270
              Gambia

            
              275
              Palestinian Territory, Occupied

            
              276
              Germany

            
              288
              Ghana

            
              292
              Gibraltar

            
              296
              Kiribati

            
              300
              Greece

            
              304
              Greenland

            
              308
              Grenada

            
              312
              Guadeloupe

            
              316
              Guam

            
              320
              Guatemala

            
              324
              Guinea

            
              328
              Guyana

            
              332
              Haiti

            
              334
              Heard Island and McDonald Islands

            
              336
              Holy See (Vatican City State)

            
              340
              Honduras

            
              344
              Hong Kong

            
              348
              Hungary

            
              352
              Iceland

            
              356
              India

            
              360
              Indonesia

            
              364
              Iran, Islamic Republic of

            
              368
              Iraq

            
              372
              Ireland

            
              376
              Israel

            
              380
              Italy

            
              384
              Cote d'Ivoire

            
              388
              Jamaica

            
              392
              Japan

            
              398
              Kazakhstan

            
              400
              Jordan

            
              404
              Kenya

            
              408
              Korea, Democratic People's Republic of

            
              410
              Korea, Republic of

            
              414
              Kuwait

            
              417
              Kyrgyzstan

            
              418
              Lao People's Democratic Republic

            
              422
              Lebanon

            
              426
              Lesotho

            
              428
              Latvia

            
              430
              Liberia

            
              434
              Libya

            
              438
              Liechtenstein

            
              440
              Lithuania

            
              442
              Luxembourg

            
              446
              Macao

            
              450
              Madagascar

            
              454
              Malawi

            
              458
              Malaysia

            
              462
              Maldives

            
              466
              Mali

            
              470
              Malta

            
              474
              Martinique

            
              478
              Mauritania

            
              480
              Mauritius

            
              484
              Mexico

            
              492
              Monaco

            
              496
              Mongolia

            
              498
              Moldova, Republic of

            
              499
              Montenegro

            
              500
              Montserrat

            
              504
              Morocco

            
              508
              Mozambique

            
              512
              Oman

            
              516
              Namibia

            
              520
              Nauru

            
              524
              Nepal

            
              528
              Netherlands

            
              531
              Curacao

            
              533
              Aruba

            
              534
              Sint Maarten (Dutch part)

            
              535
              Bonaire, Sint Eustatius and Saba

            
              540
              New Caledonia

            
              548
              Vanuatu

            
              554
              New Zealand

            
              558
              Nicaragua

            
              562
              Niger

            
              566
              Nigeria

            
              570
              Niue

            
              574
              Norfolk Island

            
              578
              Norway

            
              580
              Northern Mariana Islands

            
              581
              United States Minor Outlying Islands

            
              583
              Micronesia, Federated States of

            
              584
              Marshall Islands

            
              585
              Palau

            
              586
              Pakistan

            
              591
              Panama

            
              598
              Papua New Guinea

            
              600
              Paraguay

            
              604
              Peru

            
              608
              Philippines

            
              612
              Pitcairn

            
              616
              Poland

            
              620
              Portugal

            
              624
              Guinea-Bissau

            
              626
              Timor-Leste

            
              630
              Puerto Rico

            
              634
              Qatar

            
              638
              Reunion

            
              642
              Romania

            
              643
              Russian Federation

            
              646
              Rwanda

            
              652
              Saint Barthelemy

            
              654
              Saint Helena, Ascension and Tristan da Cunha

            
              659
              Saint Kitts and Nevis

            
              660
              Anguilla

            
              662
              Saint Lucia

            
              663
              Saint Martin (French part)

            
              666
              Saint Pierre and Miquelon

            
              670
              Saint Vincent and the Grenadines

            
              674
              San Marino

            
              678
              Sao Tome and Principe

            
              682
              Saudi Arabia

            
              686
              Senegal

            
              688
              Serbia

            
              690
              Seychelles

            
              694
              Sierra Leone

            
              702
              Singapore

            
              703
              Slovakia

            
              704
              Viet Nam

            
              705
              Slovenia

            
              706
              Somalia

            
              710
              South Africa

            
              716
              Zimbabwe

            
              724
              Spain

            
              728
              South Sudan

            
              729
              Sudan

            
              732
              Western Sahara

            
              740
              Suriname

            
              744
              Svalbard and Jan Mayen

            
              748
              Swaziland

            
              752
              Sweden

            
              756
              Switzerland

            
              760
              Syrian Arab Republic

            
              762
              Tajikistan

            
              764
              Thailand

            
              768
              Togo

            
              772
              Tokelau

            
              776
              Tonga

            
              780
              Trinidad and Tobago

            
              784
              United Arab Emirates

            
              788
              Tunisia

            
              792
              Turkey

            
              795
              Turkmenistan

            
              796
              Turks and Caicos Islands

            
              798
              Tuvalu

            
              800
              Uganda

            
              804
              Ukraine

            
              807
              Macedonia, the former Yugoslav Republic of

            
              818
              Egypt

            
              826
              United Kingdom

            
              831
              Guernsey

            
              832
              Jersey

            
              833
              Isle of Man

            
              834
              Tanzania, United Republic of

            
              840
              United States

            
              850
              Virgin Islands, U.S.

            
              854
              Burkina Faso

            
              858
              Uruguay

            
              860
              Uzbekistan

            
              862
              Venezuela, Bolivarian Republic of

            
              876
              Wallis and Futuna

            
              882
              Samoa

            
              887
              Yemen

            
              894
              Zambia
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Earth globe</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	</head>
	<style type="text/css">

	.water {
	fill: #00248F;
	}

	.land {
	fill: #A98B6F;
	stroke: #FFF;
	stroke-width: 0.7px;
	}

	.land:hover {
	fill:#33CC33;
	stroke-width: 1px;
	}

	.focused {
	fill: #33CC33;
	}

	select {
	position: absolute;
	top: 20px;
	left: 580px;
	border: solid #ccc 1px;
	padding: 3px;
	box-shadow: inset 1px 1px 2px #ddd8dc;
	}

	.countryTooltip {
	position: absolute;
	display: none;
	pointer-events: none;
	background: #fff;
	padding: 5px;
	text-align: left;
	border: solid #ccc 1px;
	color: #666;
	font-size: 14px;
	font-family: sans-serif;
	}

	</style>
	<body>
	<script>

	var width = 600,
	height = 500,
	sens = 0.25,
	focused;

	//Setting projection

	var projection = d3.geo.orthographic()
	.scale(245)
	.rotate([0, 0])
	.translate([width / 2, height / 2])
	.clipAngle(90);

	var path = d3.geo.path()
	.projection(projection);

	//SVG container

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	//Adding water

	svg.append("path")
	.datum({type: "Sphere"})
	.attr("class", "water")
	.attr("d", path);

	var countryTooltip = d3.select("body").append("div").attr("class", "countryTooltip"),
	countryList = d3.select("body").append("select").attr("name", "countries");


	queue()
	.defer(d3.json, "/d/5685937/world-110m.json")
	.defer(d3.tsv, "/d/5685937/world-110m-country-names.tsv")
	.await(ready);

	//Main function

	function ready(error, world, countryData) {

	var countryById = {},
	countries = topojson.feature(world, world.objects.countries).features;

	//Adding countries to select

	countryData.forEach(function(d) {
	countryById[d.id] = d.name;
	option = countryList.append("option");
	option.text(d.name);
	option.property("value", d.id);
	});

	//Drawing countries on the globe

	var world = svg.selectAll("path.land")
	.data(countries)
	.enter().append("path")
	.attr("class", "land")
	.attr("d", path)

	//Drag event

	.call(d3.behavior.drag()
	.origin(function() { var r = projection.rotate(); return {x: r[0] / sens, y: -r[1] / sens}; })
	.on("drag", function() {
	var rotate = projection.rotate();
	projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]);
	svg.selectAll("path.land").attr("d", path);
	svg.selectAll(".focused").classed("focused", focused = false);
	}))

	//Mouse events

	.on("mouseover", function(d) {
	countryTooltip.text(countryById[d.id])
	.style("left", (d3.event.pageX + 7) + "px")
	.style("top", (d3.event.pageY - 15) + "px")
	.style("display", "block")
	.style("opacity", 1);
	})
	.on("mouseout", function(d) {
	countryTooltip.style("opacity", 0)
	.style("display", "none");
	})
	.on("mousemove", function(d) {
	countryTooltip.style("left", (d3.event.pageX + 7) + "px")
	.style("top", (d3.event.pageY - 15) + "px");
	});

	//Country focus on option select

	d3.select("select").on("change", function() {
	var rotate = projection.rotate(),
	focusedCountry = country(countries, this),
	p = d3.geo.centroid(focusedCountry);

	svg.selectAll(".focused").classed("focused", focused = false);

	//Globe rotating

	(function transition() {
	d3.transition()
	.duration(2500)
	.tween("rotate", function() {
	var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
	return function(t) {
	projection.rotate(r(t));
	svg.selectAll("path").attr("d", path)
	.classed("focused", function(d, i) { return d.id == focusedCountry.id ? focused = d : false; });
	};
	})
	})();
	});

	function country(cnt, sel) {
	for(var i = 0, l = cnt.length; i < l; i++) {
	if(cnt[i].id == sel.value) {return cnt[i];}
	}
	};

	};
	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	cursor: cell;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	.gridline {
	fill: none;
	stroke: grey;
	stroke-opacity: .5;
	stroke-width: .5px;
	}

	.country {
	fill: teal;
	}

	.border {
	fill: none;
	stroke: white;
	stroke-width: 1px;
	}

	#clicked {
	fill: blue;
	}

	#overlay {
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index: 1000;
	background-color: rgba(50,50,50,0.5);
	}

	#overlay div {
	max-width:400px;
	margin: 100px auto;
	background-color: #fff;
	border:1px solid #000;
	padding:25px;
	text-align:center;
	cursor: default;
	}
	# overlay p {
	text-align: left;
	}

	.close-popup {
	background: teal;
	color: #FFF;
	padding: 5px;
	float: right;
	text-decoration: none;
	text-align: center;
	}

	.close-popup:hover { background: red; }

	.submit-popup {
	background: teal;
	color: #FFF;
	padding: 5px;
	float: left;
	text-decoration: none;
	text-align: center;
	}

	.submit-popup:hover { background: green; }

	.home-button {
	background: #fff;
	opacity: 0.75;
	color: teal;
	padding: 10px;
	text-decoration: none;
	text-align: center;
	}

	.home-button:hover { opacity: 1.0; }

	#approval {
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index: 1001;
	background-color: rgba(100,100,100,0.5);
	}

	</style>
	<body>
	<div id="approval">
	<h1 id="approval_status" style="margin-top:100px; color:white">Waiting for approval</h1>
	<a href="../travigator/index.html" class="home-button" >HOME</a>
	<div id="overlay">

	<div id="form">
	<h2 id="form-title">Not going anywhere?</h2>
	<br>
	<p style="text-align:left">I will be travelling to see <br>
	<select id="client"></select>
	and <br>
	<select id="purpose"></select>
	in relation to <br>
	<select id="product"></select>
	using <br>
	<select id="materials"></select>.
	</p>
	<br>
	<a href='#' class="submit-popup" onclick='submit_for_approval()'>Get approval</a>
	<a href='#' class="close-popup" onclick='popup()'>Nevermind</a>
	<br><br>
	<p style="font-size:10px">
	For more information regarding what each category of client/purpose/product
	refers to, please contact your favourite lawyer on +44 207 123 4567.
	</p>


	</div>

	</div>
	</div>
	<div id="map"></div>

	</body>
	<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/queue-async/1.0.7/queue.min.js"></script>
	<script>

	var width = window.innerWidth,
	height = window.innerHeight;


	// Load up required data, namely world map and list of countries
	queue()
	.defer(d3.json, "../travigator/world-110m.json")
	.defer(d3.tsv, "../travigator/world-country-dict.tsv")
	.await(ready)




	// Open our main function to hold all the magic
	function ready(error, world, names) {

	// Define countries and land
	var countries = topojson.feature(world, world.objects.countries).features;
	var land = topojson.feature(world, world.objects.land);

	// Pick a projection
	var projection = d3.geo.mercator()
	.scale(width/2/Math.PI)
	.rotate([-10,0,0])
	.translate([width / 2, height / 2])
	.clipExtent([ [0,0], [width, height*0.95] ])

	// Define a path type based on our projection choice
	var path = d3.geo.path().projection(projection);

	var graticule = d3.geo.graticule();

	var svg = d3.select("#map").append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("preserveAspectRatio", "xMinYMin");

	svg.append("path")
	.datum(graticule)
	.attr("class", "gridline")
	.attr("d", path);

	// Draw the countries
	svg.insert("path")
	.datum(topojson.feature(world, world.objects.countries))
	.attr("class", "country")
	.attr("d", path);

	// Add effects overlaid on countries
	svg.append("g")
	.attr("class", "country")
	.selectAll("path")
	.data(topojson.feature(world, world.objects.countries).features)
	.enter().append("path")
	.attr("d", path)
	.on("mouseover", function(d) { d3.select(this).transition().duration(300).style("fill", "red"); })
	.on("mouseout", function(d) { d3.select(this).transition().duration(300).style("fill", "teal"); })
	.on("click", function(d) { var place = d.properties.name;
	popup(place)
	});

	// Draw the borders
	svg.insert("path")
	.datum(topojson.mesh(world, world.objects.countries))
	.attr("class", "border")
	.attr("d", path);
	};


	// selector populator
	function populate(selector, data) {

	var select = document.getElementById(selector),
	option,
	i = 0,
	len = data.length;

	for (; i < len; i += 1) {
	option = document.createElement('option');
	option.setAttribute('value', data[i].value);
	option.appendChild(document.createTextNode(data[i].text));
	select.appendChild(option);
	};
	};

	// raw data

	client_data = [
	{value: "retail", text: "Retail Customers"},
	{value: "uhnwi", text: "UHNWI Customers"},
	{value: "funds", text: "Fund Managers"},
	{value: "pension", text: "Pension Funds"},
	{value: "banks", text: "Banks"},
	{value: "insurance", text: "Insurance Companies"},
	];

	purpose_data = [
	{value: "sell", text: "making new sales"},
	{value: "advising", text: "advising clients"},
	{value: "finalising", text: "finalising sales already made"},
	{value: "responding", text: "responding to reverse inquiries"},
	{value: "distributing", text: "engaging in re-distribution"},
	{value: "direct ad", text: "conducting marketing face to face"},
	{value: "pulic", text: "conducting marketing publicly"},
	];

	product_data = [
	{value: "sp", text: "Capital Protected Structured Notes"},
	{value: "othersec", text: "Other Securitised Instruments"},
	{value: "ucists", text: "UCITS IV Funds"},
	{value: "hf", text: "Hedge Funds"},
	{value: "otc", text: "OTC Derivatives"},
	{value: "other", text: "other financial products"},
	];

	materials_data = [
	{value: "printed", text: "printed marketing materials"},
	{value: "without", text: "no printed marketing materials"},
	{value: "approved", text: "regulator approved marketing materials"},
	{value: "electronic", text: "electronic media (eg. presentation, film)"},
	];

	// populate the drop downs
	populate("client", client_data);
	populate("purpose", purpose_data);
	populate("product", product_data);
	populate("materials", materials_data);

	// popup and populate (unnecessarily dynamically generated)
	function popup(place) {
	// make overlay gray bkgd and popup appear
	var popup = document.getElementById("overlay");
	popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";

	// replace title with clicked country
	var form = document.getElementById("form-title");
	var header = form.innerHTML = "What will you be doing in " + place + "?";


	};


	function submit_for_approval() {
	// make overlay gray bkgd and popup disappear
	var popup = document.getElementById("overlay");
	popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";

	// make overlay gray bkgd and popup appear
	var popup = document.getElementById("approval");
	popup.style.visibility = (popup.style.visibility == "visible") ? "hidden" : "visible";

	// replace approval_status with random value
	var approval = document.getElementById("approval_status");

	var statuses = [
	"OF COURSE, THAT IS APPROVED!", "SHOULD BE OK, BUT SEEK FURTHER COUNSEL MY FRIEND.", "THAT'S A GREY AREA BUT TECHNICALLY IT SHOULD BE OK.", "APPROVED BUT OUR REPUTATION IS ON THE LINE.", "I WILL PRETEND I DIDN'T HEAR THAT.", "HAHA, NICE TRY. BUT NO.", "THE LAW DISAGREES WITH YOU.", "WHAT IS THIS MIFID 1? ABSOLUTELY NOT!", "I'M SORRY I CAN'T APPROVE THAT."];

	var guess = Math.floor(Math.random() * statuses.length);
	var new_status = statuses[guess];
	console.log(guess, new_status);

	approval.innerHTML = new_status
	if (guess < 4.5) {popup.style.backgroundColor = 'green'} else {popup.style.backgroundColor = 'red'};
	};

	</script>
	id	name
	-1	Northern Cyprus
	-2	Kosovo
	-3	Somaliland
	4	Afghanistan
	8	Albania
	10	Antarctica
	12	Algeria
	16	American Samoa
	20	Andorra
	24	Angola
	28	Antigua and Barbuda
	31	Azerbaijan
	32	Argentina
	36	Australia
	40	Austria
	44	Bahamas
	48	Bahrain
	50	Bangladesh
	51	Armenia
	52	Barbados
	56	Belgium
	60	Bermuda
	64	Bhutan
	68	Bolivia, Plurinational State of
	70	Bosnia and Herzegovina
	72	Botswana
	74	Bouvet Island
	76	Brazil
	84	Belize
	86	British Indian Ocean Territory
	90	Solomon Islands
	92	Virgin Islands, British
	96	Brunei Darussalam
	100	Bulgaria
	104	Myanmar
	108	Burundi
	112	Belarus
	116	Cambodia
	120	Cameroon
	124	Canada
	132	Cape Verde
	136	Cayman Islands
	140	Central African Republic
	144	Sri Lanka
	148	Chad
	152	Chile
	156	China
	158	Taiwan, Province of China
	162	Christmas Island
	166	Cocos (Keeling) Islands
	170	Colombia
	174	Comoros
	175	Mayotte
	178	Congo
	180	Congo, the Democratic Republic of the
	184	Cook Islands
	188	Costa Rica
	191	Croatia
	192	Cuba
	196	Cyprus
	203	Czech Republic
	204	Benin
	208	Denmark
	212	Dominica
	214	Dominican Republic
	218	Ecuador
	222	El Salvador
	226	Equatorial Guinea
	231	Ethiopia
	232	Eritrea
	233	Estonia
	234	Faroe Islands
	238	Falkland Islands (Malvinas)
	239	South Georgia and the South Sandwich Islands
	242	Fiji
	246	Finland
	248	Aland Islands
	250	France
	254	French Guiana
	258	French Polynesia
	260	French Southern Territories
	262	Djibouti
	266	Gabon
	268	Georgia
	270	Gambia
	275	Palestinian Territory, Occupied
	276	Germany
	288	Ghana
	292	Gibraltar
	296	Kiribati
	300	Greece
	304	Greenland
	308	Grenada
	312	Guadeloupe
	316	Guam
	320	Guatemala
	324	Guinea
	328	Guyana
	332	Haiti
	334	Heard Island and McDonald Islands
	336	Holy See (Vatican City State)
	340	Honduras
	344	Hong Kong
	348	Hungary
	352	Iceland
	356	India
	360	Indonesia
	364	Iran, Islamic Republic of
	368	Iraq
	372	Ireland
	376	Israel
	380	Italy
	384	Cote d'Ivoire
	388	Jamaica
	392	Japan
	398	Kazakhstan
	400	Jordan
	404	Kenya
	408	Korea, Democratic People's Republic of
	410	Korea, Republic of
	414	Kuwait
	417	Kyrgyzstan
	418	Lao People's Democratic Republic
	422	Lebanon
	426	Lesotho
	428	Latvia
	430	Liberia
	434	Libya
	438	Liechtenstein
	440	Lithuania
	442	Luxembourg
	446	Macao
	450	Madagascar
	454	Malawi
	458	Malaysia
	462	Maldives
	466	Mali
	470	Malta
	474	Martinique
	478	Mauritania
	480	Mauritius
	484	Mexico
	492	Monaco
	496	Mongolia
	498	Moldova, Republic of
	499	Montenegro
	500	Montserrat
	504	Morocco
	508	Mozambique
	512	Oman
	516	Namibia
	520	Nauru
	524	Nepal
	528	Netherlands
	531	Curacao
	533	Aruba
	534	Sint Maarten (Dutch part)
	535	Bonaire, Sint Eustatius and Saba
	540	New Caledonia
	548	Vanuatu
	554	New Zealand
	558	Nicaragua
	562	Niger
	566	Nigeria
	570	Niue
	574	Norfolk Island
	578	Norway
	580	Northern Mariana Islands
	581	United States Minor Outlying Islands
	583	Micronesia, Federated States of
	584	Marshall Islands
	585	Palau
	586	Pakistan
	591	Panama
	598	Papua New Guinea
	600	Paraguay
	604	Peru
	608	Philippines
	612	Pitcairn
	616	Poland
	620	Portugal
	624	Guinea-Bissau
	626	Timor-Leste
	630	Puerto Rico
	634	Qatar
	638	Reunion
	642	Romania
	643	Russian Federation
	646	Rwanda
	652	Saint Barthelemy
	654	Saint Helena, Ascension and Tristan da Cunha
	659	Saint Kitts and Nevis
	660	Anguilla
	662	Saint Lucia
	663	Saint Martin (French part)
	666	Saint Pierre and Miquelon
	670	Saint Vincent and the Grenadines
	674	San Marino
	678	Sao Tome and Principe
	682	Saudi Arabia
	686	Senegal
	688	Serbia
	690	Seychelles
	694	Sierra Leone
	702	Singapore
	703	Slovakia
	704	Viet Nam
	705	Slovenia
	706	Somalia
	710	South Africa
	716	Zimbabwe
	724	Spain
	728	South Sudan
	729	Sudan
	732	Western Sahara
	740	Suriname
	744	Svalbard and Jan Mayen
	748	Swaziland
	752	Sweden
	756	Switzerland
	760	Syrian Arab Republic
	762	Tajikistan
	764	Thailand
	768	Togo
	772	Tokelau
	776	Tonga
	780	Trinidad and Tobago
	784	United Arab Emirates
	788	Tunisia
	792	Turkey
	795	Turkmenistan
	796	Turks and Caicos Islands
	798	Tuvalu
	800	Uganda
	804	Ukraine
	807	Macedonia, the former Yugoslav Republic of
	818	Egypt
	826	United Kingdom
	831	Guernsey
	832	Jersey
	833	Isle of Man
	834	Tanzania, United Republic of
	840	United States
	850	Virgin Islands, U.S.
	854	Burkina Faso
	858	Uruguay
	860	Uzbekistan
	862	Venezuela, Bolivarian Republic of
	876	Wallis and Futuna
	882	Samoa
	887	Yemen
	894	Zambia