Pabloska/Investment_UE_coming.csv

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>slavery trade</title>
<link rel = "stylesheet" type = "text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<style>

   .legend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 13px;
    }
  .legend .legend-scale ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;
    }
  .legend .legend-scale ul li {
    font-size: 80%;
    list-style: none;
    margin-left: 0;
    line-height: 18px;
    margin-bottom: 3px;
    }
  .legend ul.legend-labels li span {
    display: block;
    float: left;
	border-radius: 50%;
    height: 16px;
    width: 16px;
    margin-right: 5px;
    margin-left: 0;
    border: 0px solid #999;
    }


  .legend .legend-source {
    font-size: 70%;
    color: #999;
    clear: both;
    }
  .legend a {
    color: green;
    }
  .legend {
	max-width: 300px !important;
	width:165px;
    padding: 5px;
    border: 1px solid gray;
    margin: 0px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px #888888;
	position: fixed;
	z-index: +1;
	right:950px;
    top:600px;
	float: right;
	Position:relative;
	background:#F5F5F5;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    }

html { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;height:700px }
body { background:#ccc; margin:0; background:white; }
#container { width:1130px;height:700px;background:#F5F5F5;
 margin:0 auto;

font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
box-shadow: 0px 0px 30px black}

#header { height:70px; background:#DCDCDC;margin:5px 0 0; background: url('bgnoise_lg.png');background-repeat:repeat;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
clear:both;}
#logo { float:left; width:50px; height:50px;background-color: #DCDCDC;box-shadow: 0px 0px 10px grey;
opacity: 0.5;
border-radius: 30px;
filter: alpha(opacity=70);
Position:relative;left:40px;top:10px;
background: url('grillete.jpg'); background-size: 50px 50px; background-repeat: no-repeat;
 }
#title { font-size:27px; position:relative; text-align:center; float:left; width:900px; height:20px;
 margin:15px; }
#top_info {font-size:15px; float:right; width:150px; height:60px; padding:5px; Position:relative;right:0px;top:20px;
}

#top_info1 {font-size:10px; float:right; width:150px; height:60px; Position:relative;right:50px;top:20px; background:grey;
}


#navbar { height:30px; clear:both;background:#F5F5F5
}
#navbar ul { margin:0; padding:0; list-style-type:none; }
#navbar ul li { padding:5px 17px 0; float:left; }
#navbar ul li a { font-size:14px; font-weight:bold;color:grey
; padding:0 0 0 60px;
display:block; }
#banner { background:#DCDCDC; height:40px; clear:both;padding:20px 250px 0px; font-size:13px; font-weight:bold;color:grey;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;font-weight:normal;
background: url('bgnoise_lg.png');background-repeat:repeat;
}

#maincontainer { background:#D3D3D3;height:700px;width:1130px;font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
clear:both; }
#b {colour:blue;}
#map { float:left;width:650px;padding:4px }
#diagram {float:right;width:400px;padding:4px }
#text{ text-align: justify;
background: url('bgnoise_lg.png');background-repeat:repeat;
float:right;padding:0 15px 0;height:600px;width:272px;Position:relative;right:150px;top:-640px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#text1{ text-align: justify;
float:right;padding:60px;background:#DCDCDC;height:600px;width:800px;Position:relative;left:350px;top:-50px;
}
#text2{ text-align: justify;

float:right;padding:0 15px 0;height:600px;width:272px;Position:relative;right:30px;top:-640px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

h1 {font-size:20px; text-align:center; padding:10px 0 0;font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;Position:relative;top:-50px;
}
h2 {font-size:14px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;Position:relative;top:-50px;padding:0px 0 0;
}
h3 {font-size:12px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-style: italic;padding:0px 0 0;
}
h4 {font-size:12px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;Position:relative;top:-50px;padding:30px 0 0;font-style: italic;
}
h5 {font-size:13px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;Position:relative;top:-50px;padding:30px 0 0;font-style: italic;line-height: 230%
}
#footer { text-align: justify;
float:left;padding:5px;height:15px;width:1250px;Position:relative;right:0px;top:-540px;
}
#footer ul { margin:0; padding:0; list-style-type:none;Position:relative;top:-50px; }
#footer ul li { padding:20px 0 0; float:left;}
#footer ul li a { font-size:12px; font-weight: bold;color:grey
; padding:0 10px 0;border-bottom-width: 50px
display:inline; Position:relative;top:-15px;}

#footer1 { text-align: justify;
float:left;padding:0px;height:15px;width:1250px;Position:relative;right:-12px;top:550px;
}
#footer1 ul { margin:0; padding:0; list-style-type:none;Position:relative;top:-50px; }
#footer1 ul li { padding:0px 0 0; float:left;}
#footer1 ul li a { font-size:12px; font-weight: bold;color:grey
; padding:0 5px 0;border-bottom-width: 50px
display:inline; Position:relative;top:-480px;}


#tt { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; }

#tipContainer { font-size:11px;position:relative;left:15px;width:165px;z-index:100;background-repeat:no-repeat;text-align:left;line-height:15px;}

#tipLocation { font-weight:normal;margin:0px;padding:7px 7px;background:#D3D3D3;font-size:14px; border: 1px solid gray;border-bottom-style: dotted; border-radius: 5px 5px 0 0;}

#tipCount { font-weight:bold;font-size:13px;letter-spacing:-1px;margin:0px;padding:0px 10px 10px 10px; }

#tipKey { font-weight:normal;font-size:10px;color:#333;margin:0px;padding:5px 0px 5px 10px;background:#F5F5F5;border:1px solid gray;border-top-style: none;border-radius: 0 0 5px 5px; }

#tt2 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; }

#tipContainer2 { font-size:11px;position:relative;left:15px;width:230px;z-index:100;background-repeat:no-repeat;text-align:left;line-height:15px;}

#tipLocation2 { font-weight:normal;margin:0px;padding:7px 7px;background:#D3D3D3;border: 1px solid gray;border-bottom-style: dotted;font-size:14px;;border-radius: 5px 5px 0 0; }

#tipCount2 { font-weight:bold;font-size:13px;letter-spacing:-1px;margin:0px;padding:0px 10px 10px 10px; }

#tipKey2 { font-weight:normal;font-size:10px;color:#333;margin:0px;padding:5px 0px 5px 10px;background:#F5F5F5;border:1px solid gray;border-top-style: none;border-radius: 0 0 5px 5px; }

.tipClear { clear:both;}

.subunit-label {
  fill: #777;
  fill-opacity: .5;
  font-size: 20px;
  font-weight: 300;
  text-anchor: middle;
}


</style>


</head>

<!--CONTAINER-->
<div id="container">

	<!--CONTENT AREA -->

	<div id="maincontainer">
				<div class='legend'>
					<div class='legend-title'>Title</div>
					<div class='legend-scale'>
						<ul class='legend-labels'>
							<li><span style='background:#65a89d;'></span>Class 1</li>
							<li><span style='background:#a96a46;'></span>Class 2</li>
						</ul>
					</div>

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

<div id="text2">
<h1><strong>European Office Capital Flows 2013<strong></h1>
<h1> INFO: </h1>
<h2>> Hover over the circles and display the info-window that contains the total figures of the subject Country  </h2>
<h2>> Click over the symbols and display the flow lines that show direction and volume of transactions.   </h2>
<h4></h4>
</div>

	<!--FOOTER
	<div id="footer">
			<ul>
				<li>
					<a style='font-weight:normal;padding:0 235px 0'>The Transatlantic Slave Trade: <b>Overview</b>,	August 2014</a><a>Created by Pablo Gallego</a>
					<a href="http://uk.linkedin.com/pub/pablo-gallego-cadab%C3%B3n/3a/663/515">
					<img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_profile_greytxt_80x15.png" width="80" height="15" border="0" alt="View Pablo Gallego Cadabón's profile on LinkedIn">
					</a>
				</li>
			</ul>
	</div>
</div>
</div><!--END CONTAINER-->


<script src="http://d3js.org/d3.v3.min.js"></script>

<script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>


<script type="text/javascript" src="investments_EU.js"></script>


</html>

## Investment_UE_coming.csv

          
            abbrev
            state
            United Kingdom
            Switzerland
            Germany
            Sweden
            France
            Netherlands
            Spain
            Luxembourg
            Italy

            
              UK
              United Kingdom
              N/A
              0
              106
              0
              308
              49
              181
              0
              N/A

            
              SW
              Switzerland
              309
              N/A
              462
              N/A
              21
              N/A
              125
              N/A
              N/A

            
              GE
              Germany
              2021
              0
              N/A
              346
              540
              552
              20
              N/A
              N/A

            
              NO
              Sweden
              447
              N/A
              252
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A

            
              FR
              France
              109
              0
              134
              N/A
              N/A
              N/A
              130
              N/A
              130

            
              NE
              Netherlands
              35
              N/A
              32
              N/A
              N/A
              N/A
              N/A
              0
              N/A

            
              SP
              Spain
              614
              0
              16
              N/A
              0
              N/A
              N/A
              0
              N/A

            
              CE
              Luxembourg
              290
              N/A
              N/A
              N/A
              N/A
              201
              12
              N/A
              N/A

            
              IT
              Italy
              N/A
              N/A
              N/A
              N/A
              0
              N/A
              N/A
              N/A
              N/A

## Investment_UE_going.csv

          
            abbrev
            state
            United Kingdom
            Switzerland
            Germany
            Sweden
            France
            Netherlands
            Spain
            Luxembourg
            Italy
            total_imm
            total_emm

            
              UK
              United Kingdom
              N/A
              309
              2021
              447
              109
              35
              614
              290
              N/A
              3825
              644

            
              SW
              Switzerland
              0
              N/A
              0
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              0
              917

            
              GE
              Germany
              106
              462
              N/A
              252
              134
              32
              16
              N/A
              N/A
              1002
              3479

            
              NO
              Sweden
              0
              N/A
              346
              N/A
              N/A
              N/A
              N/A
              N/A
              N/A
              346
              699

            
              FR
              France
              308
              21
              540
              N/A
              N/A
              N/A
              N/A
              N/A
              0
              869
              503

            
              NE
              Netherlands
              49
              N/A
              552
              N/A
              N/A
              N/A
              N/A
              201
              N/A
              802
              67

            
              SP
              Spain
              181
              125
              20
              N/A
              130
              N/A
              N/A
              12
              N/A
              468
              630

            
              CE
              Luxembourg
              0
              N/A
              N/A
              N/A
              N/A
              0
              N/A
              N/A
              N/A
              0
              503

            
              IT
              Italy
              N/A
              N/A
              N/A
              N/A
              130
              N/A
              N/A
              N/A
              N/A
              130
              0

## investments_EU.js
  var w = 800;
  var h = 690;
  var centered;

  var formatC = d3.format(",.0f");
  var formatD = d3.format("+,.0f");

   var immin, immax, exmin, exmax;

  var projection = d3.geo.mercator()
	.scale(780)
	.translate([w / 2.3 , h / 0.58 ]);

   //Define path generator
  var path = d3.geo.path()
	.projection(projection);

  var colors = ["#EDF8FB","#41083e"];
  var immdomain = [24431,537148];
  var emmdomain = [20056,566986];

  var circleSize = d3.scale.linear().range([10,150000]).domain([0, 137175]);

  var lineSize = d3.scale.linear().range([1.5,30]).domain([0, 3500]);

  var fillcolor = d3.scale.linear().range(colors).domain(immdomain);


   //Create SVG element
  var svg = d3.select("#map")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	//.style("background", "#fff");


  var fp = d3.format(".1f");

   //initialize html tooltip
  var tooltip = d3.select("#maincontainer")
	.append("div")
	.attr("id", "tt")
	.style("z-index", "10")
	.style("position", "absolute")
	.style("visibility", "hidden");

	  var tooltip2 = d3.select("#maincontainer")
	.append("div")
	.attr("id", "tt2")
	.style("z-index", "10")
	.style("position", "absolute")
	.style("visibility", "hidden");

  var g = svg.append("g");


  var coming, going;
  d3.csv("Investment_UE_coming.csv", function (data) {
  	coming = data;

  });

  d3.csv("Investment_UE_going.csv", function (data) {
going = data;

	d3.json("world_clean.json", function (json) {

	  for (var i = 0; i < data.length; i++) {
		var dataName = data[i].state;
		var tempObj = {};
		for (var propt in data[i]) {
		  var valz = parseFloat(data[i][propt]);
		  tempObj[propt] = valz;
		}

		//Find the corresponding state inside the GeoJSON
		for (var j = 0; j < json.features.length; j++) {
		  var jsonState = json.features[j].properties.name;

		  if (dataName == jsonState) {

			matched = true;
			json.features[j].properties.state = dataName;
			json.features[j].id = dataName;
			json.features[j].abbrev = data[i].abbrev;
			json.features[j].ind = i;

			for (var propt in tempObj) {
				if(!isNaN(tempObj[propt])) {
			  json.features[j].properties[propt] = tempObj[propt];
			  }

			}
			break;
		  }
		}
	  }


	  //Bind data and create one path per GeoJSON feature
	  g.selectAll("path")
		.data(json.features)
		.enter()
		.append("path")
		.attr("class", "state")
		.attr("id", function(d) {
			return d.properties.state;
			})
		.attr("d", path)
		.attr("stroke-width", 0.5)
		.style("stroke", "white")
		.style("fill", "#696969");
	// Labels
		/*g.selectAll("text")
		.data(json.features)
		.enter()
		.append("svg:text")
		.text(function(d){
        return d.properties.name;
		})
		.attr("x", function(d){
        return path.centroid(d)[0];
		})
		.attr("y", function(d){
        return  path.centroid(d)[1];
		})
		.attr("text-anchor", function(d) {
		var idnumber = d.id ;
		if (idnumber > 1) {
			return "below";
			} else {
			return "below";
			}
		})

		.attr("transform", function(d) {
		var idnumber = d.id ;
		if (idnumber > 1) {
			return "translate(0,0) scale(1) rotate(0)";
			} else {
			return "translate(0.5,0) scale(1) rotate(0)";
			}
		})

		.attr("font-size", function(d) {
		var idnumber = d.id ;
		if (idnumber > 10) {
			return "1pt";
			} else {
			return "10pt";
			}

		})*/


	   g.selectAll("circle")
	.data(json.features)
	.enter().append("circle")
	.attr("cx", function(d) {
		var centname = d.properties.name;
		var ctroid;
		ctroid = path.centroid(d)[0];
		return ctroid;
	})
	.attr("cy", function(d) {
		var centname = d.properties.name;
		var ctroid;
		ctroid = path.centroid(d)[1];
		return ctroid;
	})
	.attr("r", function(d) {
		var diff = d.properties.total_imm;
		return circleSize(Math.sqrt(Math.abs(diff)/Math.PI));

	})
	.attr("class", "circ")
	.attr("id", function(d) {return d.abbrev;})
	.attr("fill", function(d) {
		var diff = d.properties.total_imm - d.properties.total_emm;
		if(diff>0) {
		return "#CC0606";
		} else {
		return "#CC0606";
		}

	})
	.attr("fill-opacity", "0.5")
	.attr("stroke", "#fff")
	.attr("stroke-weight", "0.5")


		.on("mouseover", function (d) {
		  return toolOver(d, this);
		})
		.on("mousemove", function (d) {
		  var m = d3.mouse(this);
		  mx = m[0];
		  my = m[1];
		  return toolMove(mx, my, d);
		})
		.on("mouseout", function (d) {
		  return toolOut(d, this);
		})
	.on("click", function(d) {clicked(d)});


	});
  });

function toolOver(v, thepath) {

	d3.select(thepath).style({
		"fill-opacity": "0.7",
		"cursor":"pointer"
	});
	return tooltip.style("visibility", "visible");
};

function toolOut(m, thepath) {
	d3.select(thepath).style({
		"fill-opacity": "0.5",
		"cursor":""
	});
	return tooltip.style("visibility", "hidden");
};

function toolMove(mx, my, data) {


	if (mx < 120) {
		mx = 120
	};

		if (my < 40) {
		my = 40
	};
	return tooltip.style("top", my + -0 + "px").style("left", mx - 120 + "px").html("<div id='tipContainer'><div id='tipLocation'><b>" + data.id +": Office transactions"+ "</b></div><div id='tipKey'>Transactions in: <b>" + "€ "+ formatC(data.properties.total_imm)+" Million" + "</b><br>Transactions out: <b>" +"€ "+ formatC(data.properties.total_emm) + " Million"+ "</b><br>Net: <b>" + formatC((data.properties.total_imm - data.properties.total_emm)) + "</b></div><div class='tipClear'></div> </div>");
};

function toolOver2(v, thepath) {

	d3.select(thepath).style({
		"opacity": "1",
		"cursor":"pointer"
	});
	return tooltip2.style("visibility", "visible");
};

function toolOut2(m, thepath) {
	d3.select(thepath).style({
		"opacity": "0.5",
		"cursor":""
	});
	return tooltip2.style("visibility", "hidden");
};

function toolMove2(mx, my, home, end, v1, v2) {
var diff = v1-v2;

	if (mx < 120) {
		mx = 120
	};

		if (my < 40) {
		my = 40
	};
	return tooltip2.style("top", my + -0 + "px").style("left", mx - 120 + "px").html("<div id='tipContainer2'><div id='tipLocation'><b>" + home + " &#x2194; " + end + "</b></div><div id='tipKey2'>" + home + " to " + end +": <b>" +"€ "+ formatC(v2) +" Million"+ "</b><br>" + end + " to " + home +": <b>" +"€ "+ formatC(v1)+" Million"+ "</b><br>Net change, " + home + ": <b>" + formatD(v1-v2) + "</b></div><div class='tipClear'></div> </div>");
};


  function clicked(selected) {
  //var coming = selected.properties;
  var selname = selected.id;

/*
	d3.selectAll(".circ")
	.attr("fill-opacity", "0.2");
*/

  var homex = path.centroid(selected)[0];
  var homey = path.centroid(selected)[1];

  g.selectAll(".goingline")
  .attr("stroke-dasharray", 0)
  .remove()


  g.selectAll(".goingline")
  .data(going)
  .enter().append("path")
  .attr("class", "goingline")

  .attr("d", function(d,i)
  	{
 	//console.log(coming[i][selname], coming[i].state);
 	//console.log(going[i][selname], going[i].state);
  	var abb = d.abbrev;
  	var finalval = coming[i][selname] - going[i][selname];


  	var theState = d3.select("#" + abb);

	if(!isNaN(finalval)) {
  	var startx = path.centroid(theState[0][0].__data__)[0];
  	var starty = path.centroid(theState[0][0].__data__)[1];

  	  if(finalval > 0) {
  	    	  	return "M" + startx + "," + starty + " Q" + (startx + homex)/2 + " " + (starty + homey)/1.5 +" " + homex+" "   + homey;

  	} else {
  	  	return "M" + homex + "," + homey + " Q" + (startx + homex)/2 + " " + (starty + homey)/2.5 +" " + startx+" "   + starty;
  	}
  	}
  	})

  .call(transition)

  .attr("stroke-width", function(d,i) {
	var finalval = coming[i][selname] - going[i][selname];

  	return lineSize(parseFloat(Math.abs(finalval)));
  	})
  .attr("stroke", function(d,i) {
  var finalval = coming[i][selname] - going[i][selname];
  if(finalval > 0) {

  return "#FFFF00";
  } else {
  return "#FFFF00";
  }

  })
  .attr("fill", "none")
  .attr("opacity", 0.5)
  .attr("stroke-linecap", "round")
  .on("mouseover", function (d) {
		  return toolOver2(d, this);
		})
		.on("mousemove", function (d,i) {
		  var m = d3.mouse(this);
		  mx = m[0];
		  my = m[1];
		  return toolMove2(mx, my, selname, d.state, coming[i][selname], going[i][selname]);
		})
		.on("mouseout", function (d) {
		  return toolOut2(d, this);
		});


  }


function transition(path) {
  path.transition()
      .duration(1500)
      .attrTween("stroke-dasharray", tweenDash);
}

function tweenDash() {
  var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);
  return function(t) { return i(t); };
}

d3.select(self.frameElement).style("height", "700px");

## world_clean.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world_clean.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.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<title>slavery trade</title>
	<link rel = "stylesheet" type = "text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

	<style>

	.legend .legend-title {
	text-align: left;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 13px;
	}
	.legend .legend-scale ul {
	margin: 0;
	margin-bottom: 5px;
	padding: 0;
	float: left;
	list-style: none;
	}
	.legend .legend-scale ul li {
	font-size: 80%;
	list-style: none;
	margin-left: 0;
	line-height: 18px;
	margin-bottom: 3px;
	}
	.legend ul.legend-labels li span {
	display: block;
	float: left;
	border-radius: 50%;
	height: 16px;
	width: 16px;
	margin-right: 5px;
	margin-left: 0;
	border: 0px solid #999;
	}


	.legend .legend-source {
	font-size: 70%;
	color: #999;
	clear: both;
	}
	.legend a {
	color: green;
	}
	.legend {
	max-width: 300px !important;
	width:165px;
	padding: 5px;
	border: 1px solid gray;
	margin: 0px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px #888888;
	position: fixed;
	z-index: +1;
	right:950px;
	top:600px;
	float: right;
	Position:relative;
	background:#F5F5F5;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
	}

	html { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;height:700px }
	body { background:#ccc; margin:0; background:white; }
	#container { width:1130px;height:700px;background:#F5F5F5;
	margin:0 auto;

	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	box-shadow: 0px 0px 30px black}

	#header { height:70px; background:#DCDCDC;margin:5px 0 0; background: url('bgnoise_lg.png');background-repeat:repeat;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	clear:both;}
	#logo { float:left; width:50px; height:50px;background-color: #DCDCDC;box-shadow: 0px 0px 10px grey;
	opacity: 0.5;
	border-radius: 30px;
	filter: alpha(opacity=70);
	Position:relative;left:40px;top:10px;
	background: url('grillete.jpg'); background-size: 50px 50px; background-repeat: no-repeat;
	}
	#title { font-size:27px; position:relative; text-align:center; float:left; width:900px; height:20px;
	margin:15px; }
	#top_info {font-size:15px; float:right; width:150px; height:60px; padding:5px; Position:relative;right:0px;top:20px;
	}

	#top_info1 {font-size:10px; float:right; width:150px; height:60px; Position:relative;right:50px;top:20px; background:grey;
	}



	#navbar { height:30px; clear:both;background:#F5F5F5
	}
	#navbar ul { margin:0; padding:0; list-style-type:none; }
	#navbar ul li { padding:5px 17px 0; float:left; }
	#navbar ul li a { font-size:14px; font-weight:bold;color:grey
	; padding:0 0 0 60px;
	display:block; }
	#banner { background:#DCDCDC; height:40px; clear:both;padding:20px 250px 0px; font-size:13px; font-weight:bold;color:grey;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;font-weight:normal;
	background: url('bgnoise_lg.png');background-repeat:repeat;
	}

	#maincontainer { background:#D3D3D3;height:700px;width:1130px;font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	clear:both; }
	#b {colour:blue;}
	#map { float:left;width:650px;padding:4px }
	#diagram {float:right;width:400px;padding:4px }
	#text{ text-align: justify;
	background: url('bgnoise_lg.png');background-repeat:repeat;
	float:right;padding:0 15px 0;height:600px;width:272px;Position:relative;right:150px;top:-640px;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	}
	#text1{ text-align: justify;
	float:right;padding:60px;background:#DCDCDC;height:600px;width:800px;Position:relative;left:350px;top:-50px;
	}
	#text2{ text-align: justify;

	float:right;padding:0 15px 0;height:600px;width:272px;Position:relative;right:30px;top:-640px;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	}

	h1 {font-size:20px; text-align:center; padding:10px 0 0;font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;Position:relative;top:-50px;
	}
	h2 {font-size:14px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;Position:relative;top:-50px;padding:0px 0 0;
	}
	h3 {font-size:12px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-style: italic;padding:0px 0 0;
	}
	h4 {font-size:12px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;Position:relative;top:-50px;padding:30px 0 0;font-style: italic;
	}
	h5 {font-size:13px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;Position:relative;top:-50px;padding:30px 0 0;font-style: italic;line-height: 230%
	}
	#footer { text-align: justify;
	float:left;padding:5px;height:15px;width:1250px;Position:relative;right:0px;top:-540px;
	}
	#footer ul { margin:0; padding:0; list-style-type:none;Position:relative;top:-50px; }
	#footer ul li { padding:20px 0 0; float:left;}
	#footer ul li a { font-size:12px; font-weight: bold;color:grey
	; padding:0 10px 0;border-bottom-width: 50px
	display:inline; Position:relative;top:-15px;}

	#footer1 { text-align: justify;
	float:left;padding:0px;height:15px;width:1250px;Position:relative;right:-12px;top:550px;
	}
	#footer1 ul { margin:0; padding:0; list-style-type:none;Position:relative;top:-50px; }
	#footer1 ul li { padding:0px 0 0; float:left;}
	#footer1 ul li a { font-size:12px; font-weight: bold;color:grey
	; padding:0 5px 0;border-bottom-width: 50px
	display:inline; Position:relative;top:-480px;}


	#tt { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; }

	#tipContainer { font-size:11px;position:relative;left:15px;width:165px;z-index:100;background-repeat:no-repeat;text-align:left;line-height:15px;}

	#tipLocation { font-weight:normal;margin:0px;padding:7px 7px;background:#D3D3D3;font-size:14px; border: 1px solid gray;border-bottom-style: dotted; border-radius: 5px 5px 0 0;}

	#tipCount { font-weight:bold;font-size:13px;letter-spacing:-1px;margin:0px;padding:0px 10px 10px 10px; }

	#tipKey { font-weight:normal;font-size:10px;color:#333;margin:0px;padding:5px 0px 5px 10px;background:#F5F5F5;border:1px solid gray;border-top-style: none;border-radius: 0 0 5px 5px; }

	#tt2 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; }

	#tipContainer2 { font-size:11px;position:relative;left:15px;width:230px;z-index:100;background-repeat:no-repeat;text-align:left;line-height:15px;}

	#tipLocation2 { font-weight:normal;margin:0px;padding:7px 7px;background:#D3D3D3;border: 1px solid gray;border-bottom-style: dotted;font-size:14px;;border-radius: 5px 5px 0 0; }

	#tipCount2 { font-weight:bold;font-size:13px;letter-spacing:-1px;margin:0px;padding:0px 10px 10px 10px; }

	#tipKey2 { font-weight:normal;font-size:10px;color:#333;margin:0px;padding:5px 0px 5px 10px;background:#F5F5F5;border:1px solid gray;border-top-style: none;border-radius: 0 0 5px 5px; }

	.tipClear { clear:both;}

	.subunit-label {
	fill: #777;
	fill-opacity: .5;
	font-size: 20px;
	font-weight: 300;
	text-anchor: middle;
	}



	</style>


	</head>

	<!--CONTAINER-->
	<div id="container">

	<!--CONTENT AREA -->

	<div id="maincontainer">
	<div class='legend'>
	<div class='legend-title'>Title</div>
	<div class='legend-scale'>
	<ul class='legend-labels'>
	<li><span style='background:#65a89d;'></span>Class 1</li>
	<li><span style='background:#a96a46;'></span>Class 2</li>
	</ul>
	</div>

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

	<div id="text2">
	<h1><strong>European Office Capital Flows 2013<strong></h1>
	<h1> INFO: </h1>
	<h2>> Hover over the circles and display the info-window that contains the total figures of the subject Country </h2>
	<h2>> Click over the symbols and display the flow lines that show direction and volume of transactions. </h2>
	<h4></h4>
	</div>

	<!--FOOTER
	<div id="footer">
	<ul>
	<li>
	<a style='font-weight:normal;padding:0 235px 0'>The Transatlantic Slave Trade: <b>Overview</b>, August 2014</a><a>Created by Pablo Gallego</a>
	<a href="http://uk.linkedin.com/pub/pablo-gallego-cadab%C3%B3n/3a/663/515">
	<img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_profile_greytxt_80x15.png" width="80" height="15" border="0" alt="View Pablo Gallego Cadabón's profile on LinkedIn">
	</a>
	</li>
	</ul>
	</div>
	</div>
	</div><!--END CONTAINER-->



	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>


	<script type="text/javascript" src="investments_EU.js"></script>



	</html>
abbrev	state	United Kingdom	Switzerland	Germany	Sweden	France	Netherlands	Spain	Luxembourg	Italy
UK	United Kingdom	N/A	0	106	0	308	49	181	0	N/A
SW	Switzerland	309	N/A	462	N/A	21	N/A	125	N/A	N/A
GE	Germany	2021	0	N/A	346	540	552	20	N/A	N/A
NO	Sweden	447	N/A	252	N/A	N/A	N/A	N/A	N/A	N/A
FR	France	109	0	134	N/A	N/A	N/A	130	N/A	130
NE	Netherlands	35	N/A	32	N/A	N/A	N/A	N/A	0	N/A
SP	Spain	614	0	16	N/A	0	N/A	N/A	0	N/A
CE	Luxembourg	290	N/A	N/A	N/A	N/A	201	12	N/A	N/A
IT	Italy	N/A	N/A	N/A	N/A	0	N/A	N/A	N/A	N/A
	var w = 800;
	var h = 690;
	var centered;

	var formatC = d3.format(",.0f");
	var formatD = d3.format("+,.0f");

	var immin, immax, exmin, exmax;

	var projection = d3.geo.mercator()
	.scale(780)
	.translate([w / 2.3 , h / 0.58 ]);

	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

	var colors = ["#EDF8FB","#41083e"];
	var immdomain = [24431,537148];
	var emmdomain = [20056,566986];

	var circleSize = d3.scale.linear().range([10,150000]).domain([0, 137175]);

	var lineSize = d3.scale.linear().range([1.5,30]).domain([0, 3500]);

	var fillcolor = d3.scale.linear().range(colors).domain(immdomain);


	//Create SVG element
	var svg = d3.select("#map")
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	//.style("background", "#fff");


	var fp = d3.format(".1f");

	//initialize html tooltip
	var tooltip = d3.select("#maincontainer")
	.append("div")
	.attr("id", "tt")
	.style("z-index", "10")
	.style("position", "absolute")
	.style("visibility", "hidden");

	var tooltip2 = d3.select("#maincontainer")
	.append("div")
	.attr("id", "tt2")
	.style("z-index", "10")
	.style("position", "absolute")
	.style("visibility", "hidden");

	var g = svg.append("g");




	var coming, going;
	d3.csv("Investment_UE_coming.csv", function (data) {
	coming = data;

	});

	d3.csv("Investment_UE_going.csv", function (data) {
	going = data;

	d3.json("world_clean.json", function (json) {

	for (var i = 0; i < data.length; i++) {
	var dataName = data[i].state;
	var tempObj = {};
	for (var propt in data[i]) {
	var valz = parseFloat(data[i][propt]);
	tempObj[propt] = valz;
	}

	//Find the corresponding state inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {
	var jsonState = json.features[j].properties.name;

	if (dataName == jsonState) {

	matched = true;
	json.features[j].properties.state = dataName;
	json.features[j].id = dataName;
	json.features[j].abbrev = data[i].abbrev;
	json.features[j].ind = i;

	for (var propt in tempObj) {
	if(!isNaN(tempObj[propt])) {
	json.features[j].properties[propt] = tempObj[propt];
	}

	}
	break;
	}
	}
	}


	//Bind data and create one path per GeoJSON feature
	g.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("class", "state")
	.attr("id", function(d) {
	return d.properties.state;
	})
	.attr("d", path)
	.attr("stroke-width", 0.5)
	.style("stroke", "white")
	.style("fill", "#696969");
	// Labels
	/*g.selectAll("text")
	.data(json.features)
	.enter()
	.append("svg:text")
	.text(function(d){
	return d.properties.name;
	})
	.attr("x", function(d){
	return path.centroid(d)[0];
	})
	.attr("y", function(d){
	return path.centroid(d)[1];
	})
	.attr("text-anchor", function(d) {
	var idnumber = d.id ;
	if (idnumber > 1) {
	return "below";
	} else {
	return "below";
	}
	})

	.attr("transform", function(d) {
	var idnumber = d.id ;
	if (idnumber > 1) {
	return "translate(0,0) scale(1) rotate(0)";
	} else {
	return "translate(0.5,0) scale(1) rotate(0)";
	}
	})

	.attr("font-size", function(d) {
	var idnumber = d.id ;
	if (idnumber > 10) {
	return "1pt";
	} else {
	return "10pt";
	}

	})*/



	g.selectAll("circle")
	.data(json.features)
	.enter().append("circle")
	.attr("cx", function(d) {
	var centname = d.properties.name;
	var ctroid;
	ctroid = path.centroid(d)[0];
	return ctroid;
	})
	.attr("cy", function(d) {
	var centname = d.properties.name;
	var ctroid;
	ctroid = path.centroid(d)[1];
	return ctroid;
	})
	.attr("r", function(d) {
	var diff = d.properties.total_imm;
	return circleSize(Math.sqrt(Math.abs(diff)/Math.PI));

	})
	.attr("class", "circ")
	.attr("id", function(d) {return d.abbrev;})
	.attr("fill", function(d) {
	var diff = d.properties.total_imm - d.properties.total_emm;
	if(diff>0) {
	return "#CC0606";
	} else {
	return "#CC0606";
	}

	})
	.attr("fill-opacity", "0.5")
	.attr("stroke", "#fff")
	.attr("stroke-weight", "0.5")


	.on("mouseover", function (d) {
	return toolOver(d, this);
	})
	.on("mousemove", function (d) {
	var m = d3.mouse(this);
	mx = m[0];
	my = m[1];
	return toolMove(mx, my, d);
	})
	.on("mouseout", function (d) {
	return toolOut(d, this);
	})
	.on("click", function(d) {clicked(d)});


	});
	});

	function toolOver(v, thepath) {

	d3.select(thepath).style({
	"fill-opacity": "0.7",
	"cursor":"pointer"
	});
	return tooltip.style("visibility", "visible");
	};

	function toolOut(m, thepath) {
	d3.select(thepath).style({
	"fill-opacity": "0.5",
	"cursor":""
	});
	return tooltip.style("visibility", "hidden");
	};

	function toolMove(mx, my, data) {


	if (mx < 120) {
	mx = 120
	};

	if (my < 40) {
	my = 40
	};
	return tooltip.style("top", my + -0 + "px").style("left", mx - 120 + "px").html("<div id='tipContainer'><div id='tipLocation'><b>" + data.id +": Office transactions"+ "</b></div><div id='tipKey'>Transactions in: <b>" + "€ "+ formatC(data.properties.total_imm)+" Million" + "</b><br>Transactions out: <b>" +"€ "+ formatC(data.properties.total_emm) + " Million"+ "</b><br>Net: <b>" + formatC((data.properties.total_imm - data.properties.total_emm)) + "</b></div><div class='tipClear'></div> </div>");
	};

	function toolOver2(v, thepath) {

	d3.select(thepath).style({
	"opacity": "1",
	"cursor":"pointer"
	});
	return tooltip2.style("visibility", "visible");
	};

	function toolOut2(m, thepath) {
	d3.select(thepath).style({
	"opacity": "0.5",
	"cursor":""
	});
	return tooltip2.style("visibility", "hidden");
	};

	function toolMove2(mx, my, home, end, v1, v2) {
	var diff = v1-v2;

	if (mx < 120) {
	mx = 120
	};

	if (my < 40) {
	my = 40
	};
	return tooltip2.style("top", my + -0 + "px").style("left", mx - 120 + "px").html("<div id='tipContainer2'><div id='tipLocation'><b>" + home + " ↔ " + end + "</b></div><div id='tipKey2'>" + home + " to " + end +": <b>" +"€ "+ formatC(v2) +" Million"+ "</b><br>" + end + " to " + home +": <b>" +"€ "+ formatC(v1)+" Million"+ "</b><br>Net change, " + home + ": <b>" + formatD(v1-v2) + "</b></div><div class='tipClear'></div> </div>");
	};


	function clicked(selected) {
	//var coming = selected.properties;
	var selname = selected.id;

	/*
	d3.selectAll(".circ")
	.attr("fill-opacity", "0.2");
	*/

	var homex = path.centroid(selected)[0];
	var homey = path.centroid(selected)[1];

	g.selectAll(".goingline")
	.attr("stroke-dasharray", 0)
	.remove()


	g.selectAll(".goingline")
	.data(going)
	.enter().append("path")
	.attr("class", "goingline")

	.attr("d", function(d,i)
	{
	//console.log(coming[i][selname], coming[i].state);
	//console.log(going[i][selname], going[i].state);
	var abb = d.abbrev;
	var finalval = coming[i][selname] - going[i][selname];


	var theState = d3.select("#" + abb);

	if(!isNaN(finalval)) {
	var startx = path.centroid(theState[0][0].__data__)[0];
	var starty = path.centroid(theState[0][0].__data__)[1];

	if(finalval > 0) {
	return "M" + startx + "," + starty + " Q" + (startx + homex)/2 + " " + (starty + homey)/1.5 +" " + homex+" " + homey;

	} else {
	return "M" + homex + "," + homey + " Q" + (startx + homex)/2 + " " + (starty + homey)/2.5 +" " + startx+" " + starty;
	}
	}
	})

	.call(transition)

	.attr("stroke-width", function(d,i) {
	var finalval = coming[i][selname] - going[i][selname];

	return lineSize(parseFloat(Math.abs(finalval)));
	})
	.attr("stroke", function(d,i) {
	var finalval = coming[i][selname] - going[i][selname];
	if(finalval > 0) {

	return "#FFFF00";
	} else {
	return "#FFFF00";
	}

	})
	.attr("fill", "none")
	.attr("opacity", 0.5)
	.attr("stroke-linecap", "round")
	.on("mouseover", function (d) {
	return toolOver2(d, this);
	})
	.on("mousemove", function (d,i) {
	var m = d3.mouse(this);
	mx = m[0];
	my = m[1];
	return toolMove2(mx, my, selname, d.state, coming[i][selname], going[i][selname]);
	})
	.on("mouseout", function (d) {
	return toolOut2(d, this);
	});


	}


	function transition(path) {
	path.transition()
	.duration(1500)
	.attrTween("stroke-dasharray", tweenDash);
	}

	function tweenDash() {
	var l = this.getTotalLength(),
	i = d3.interpolateString("0," + l, l + "," + l);
	return function(t) { return i(t); };
	}

	d3.select(self.frameElement).style("height", "700px");