TiagoDevezas · August 29, 2015 14:20
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 	div.tooltip {   
 	  position: absolute;           
 	  text-align: center;           
 	  width: 150px;                  
 	  height: 25px;                 
 	  padding: 2px;             
 	  font-size: 12px;
 	  color: white;     
 	  background: black;
 	  border: 1px;      
 	  border-radius: 8px;           
 	  pointer-events: none;         
 	}

 	#legend {
    padding: 1.5em 0 0 1.5em;
    text-align: center;
 	}
 	.list-inline {
    list-style: outside none none;
    padding-left: 0;
    margin: 0 auto;
    width: 50%;
 	}

 	li.key {
 	    border-top-width: 15px;
 	    border-top-style: solid;
 	    font-size: .75em;
 	    width: 15%;
 	    padding-left: 0;
 	    padding-right: 0;
 	    display: inline-block;
 	}

 	.container {
 		width: 100%;
 		text-align: center;
 	}

 	#map {
 		width: 100%; 
 		height: 1000px; 
 		display: inline-block;
 		margin-top: 2em;
 	}

 	path {
 	  stroke: white;
 	  stroke-width: 0.25px;
 	}

 	svg {
 	  background-color: lavender;
 	  border: 1px solid black;
 	}

 </style>
 <body>
 	<div class="container">
 		<div id="legend">Artigos que mencionam o país</div>
 		<div id="map"></div>
 	</div>
 	<script src="http://d3js.org/d3.v3.min.js"></script>
 	<script src="http://d3js.org/topojson.v1.min.js"></script>
 	<script src="http://cdn.rawgit.com/d3/d3-plugins/master/jsonp/jsonp.js"></script>
 	<script>

 		var width = parseInt(d3.select("#map").style("width")),
 			height = parseInt(d3.select("#map").style("height"));

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

 		var bb;

 		apiURL = 'http://irlab.fe.up.pt/p/mediaviz/panorama/api/places';
 		params = '?type=national&map=world&since=2015-04-25&until=2015-05-30';
 		callback = '&callback=d3.jsonp.callback';

 	  var zoom = d3.behavior.zoom()
 	    .scaleExtent([1, 8])
    	.on("zoom", move);

 		function move() {

 		  var t = d3.event.translate;
 		  var s = d3.event.scale;
 		  zscale = s;
 		  var h = height/4;


 		  t[0] = Math.min(
 		    (width/height)  * (s - 1), 
 		    Math.max( width * (1 - s), t[0] )
 		  );

 		  t[1] = Math.min(
 		    h * (s - 1) + h * s, 
 		    Math.max(height  * (1 - s) - h * s, t[1])
 		  );

 		  zoom.translate(t);
 		  bb.attr("transform", "translate(" + t + ")scale(" + s + ")");

 		}

 		// d3.jsonp plugin needed to get data from the API
 		d3.jsonp(apiURL + params + callback, function(data) {

 			var maxCount = d3.max(data, function(d) { return d.count })
 		
 			var color_domain = [0, maxCount/2];

 			var color = d3.scale.quantile()
  			.domain(color_domain)
  			.range(['rgb(255,255,204)','rgb(217,240,163)','rgb(173,221,142)','rgb(120,198,121)','rgb(49,163,84)','rgb(0,104,55)']);

  		var tooltip = d3.select("body").append("div")   
 			  .attr("class", "tooltip")               
 			  .style("opacity", 0);

  		var countByAlpha3 = {};
  		var nameByAlpha3 = {};

  		data.forEach(function(d) {
 		    countByAlpha3[d.alpha3] = +d.count;
 		    nameByAlpha3[d.alpha3] = d.name;
  		});

  		var legend = d3.select('#legend')
 			  .append('ul')
 			    .attr('class', 'list-inline');

 			var keys = legend.selectAll('li.key')
 			    .data(color.range());

 			keys.enter().append('li')
 			    .attr('class', 'key')
 			    .style('border-top-color', String)
 			    .text(function(d) {
 			        var r = color.invertExtent(d);
 			        return '>= ' + Math.round(r[0]);
 			    });

 			function showTooltip(obj) {
 				var data = void 0;
 		    d3.select(obj).transition().duration(300)
 		    	.style("stroke", "black")
 		    	.style('fill', function(d) { data = d; return d3.rgb(color(countByAlpha3[d.id])).darker(.5)});
 		    tooltip.transition().duration(300)
 		    .style("opacity", 1)
 		    tooltip.text(nameByAlpha3[data.id] + ": " + countByAlpha3[data.id])
 		    .style("left", (d3.event.pageX) + "px")
 		    .style("top", (d3.event.pageY -30) + "px");
 			}

 			function hideTooltip(obj) {
 		    d3.select(obj)
 		    .transition().duration(300)
 		    .style('stroke', 'gray')
 		    .style("fill", function(d) {
 			    return color(countByAlpha3[d.id]); 
 			  })
 		    // .style("opacity", 0.8);
 		    tooltip.transition().duration(300)
 		    .style("opacity", 0);
 			}

 			// Continental Portugal map

 			d3.json('world.json', function(err, world) {
 				var paises = topojson.feature(world, world.objects.world);

 				var projection = d3.geo.mercator()
 				.translate([width /2, height / 1.6])
 				.scale(width / 2 / Math.PI);
 				// .center(center)
 				// .scale(1);

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

 				// projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]);
 				// projection.translate([width/2, height/2]);
 				// projection.scale(s);		


 				// var b = path.bounds(paises);

 				// // console.log(b);
 				// var s = 1 / Math.max(
 	   //                 (b[1][0] - b[0][0]) / width, 
 	   //                 (b[1][1] - b[0][1]) / height
 	   //             );

 				// // // var center = d3.geo.centroid(paises);
 				// // // b = d3.geo.bounds(paises);

 				// // b = world.bbox;

 				// // var center = [(b[2]+b[0])/2, (b[3]+b[1])/2];

 				// // projection.center(center);
 				// projection.translate([width / 2, height / 2]);
 				// projection.scale(s);

 				bb = d3.select('svg')
 					.call(zoom)
 					.append('g')
 					.attr('class', 'mundo');

 				var paises = bb.selectAll('g')
 				.data(paises.features)
 				.enter()
 				.append('g')
 				.attr('class', function (d) { return d.properties.name})
 				.append('path')
 				.attr('d', path)
 				.style("fill", function(d) {
 			    return color(countByAlpha3[d.id]); 
 			  })
 			  .style("stroke", "gray")
 				.on("mouseover", function() { showTooltip(this) })
 			  .on("mouseout", function() { hideTooltip(this) });

 			});

 		});

 	</script>
 </body>
diff --git a/world.json b/world.json
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	div.tooltip {
	position: absolute;
	text-align: center;
	width: 150px;
	height: 25px;
	padding: 2px;
	font-size: 12px;
	color: white;
	background: black;
	border: 1px;
	border-radius: 8px;
	pointer-events: none;
	}

	#legend {
	padding: 1.5em 0 0 1.5em;
	text-align: center;
	}
	.list-inline {
	list-style: outside none none;
	padding-left: 0;
	margin: 0 auto;
	width: 50%;
	}

	li.key {
	border-top-width: 15px;
	border-top-style: solid;
	font-size: .75em;
	width: 15%;
	padding-left: 0;
	padding-right: 0;
	display: inline-block;
	}

	.container {
	width: 100%;
	text-align: center;
	}

	#map {
	width: 100%;
	height: 1000px;
	display: inline-block;
	margin-top: 2em;
	}

	path {
	stroke: white;
	stroke-width: 0.25px;
	}

	svg {
	background-color: lavender;
	border: 1px solid black;
	}

	</style>
	<body>
	<div class="container">
	<div id="legend">Artigos que mencionam o país</div>
	<div id="map"></div>
	</div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://cdn.rawgit.com/d3/d3-plugins/master/jsonp/jsonp.js"></script>
	<script>

	var width = parseInt(d3.select("#map").style("width")),
	height = parseInt(d3.select("#map").style("height"));

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

	var bb;

	apiURL = 'http://irlab.fe.up.pt/p/mediaviz/panorama/api/places';
	params = '?type=national&map=world&since=2015-04-25&until=2015-05-30';
	callback = '&callback=d3.jsonp.callback';

	var zoom = d3.behavior.zoom()
	.scaleExtent([1, 8])
	.on("zoom", move);

	function move() {

	var t = d3.event.translate;
	var s = d3.event.scale;
	zscale = s;
	var h = height/4;


	t[0] = Math.min(
	(width/height) * (s - 1),
	Math.max( width * (1 - s), t[0] )
	);

	t[1] = Math.min(
	h * (s - 1) + h * s,
	Math.max(height * (1 - s) - h * s, t[1])
	);

	zoom.translate(t);
	bb.attr("transform", "translate(" + t + ")scale(" + s + ")");

	}

	// d3.jsonp plugin needed to get data from the API
	d3.jsonp(apiURL + params + callback, function(data) {

	var maxCount = d3.max(data, function(d) { return d.count })

	var color_domain = [0, maxCount/2];

	var color = d3.scale.quantile()
	.domain(color_domain)
	.range(['rgb(255,255,204)','rgb(217,240,163)','rgb(173,221,142)','rgb(120,198,121)','rgb(49,163,84)','rgb(0,104,55)']);

	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var countByAlpha3 = {};
	var nameByAlpha3 = {};

	data.forEach(function(d) {
	countByAlpha3[d.alpha3] = +d.count;
	nameByAlpha3[d.alpha3] = d.name;
	});

	var legend = d3.select('#legend')
	.append('ul')
	.attr('class', 'list-inline');

	var keys = legend.selectAll('li.key')
	.data(color.range());

	keys.enter().append('li')
	.attr('class', 'key')
	.style('border-top-color', String)
	.text(function(d) {
	var r = color.invertExtent(d);
	return '>= ' + Math.round(r[0]);
	});

	function showTooltip(obj) {
	var data = void 0;
	d3.select(obj).transition().duration(300)
	.style("stroke", "black")
	.style('fill', function(d) { data = d; return d3.rgb(color(countByAlpha3[d.id])).darker(.5)});
	tooltip.transition().duration(300)
	.style("opacity", 1)
	tooltip.text(nameByAlpha3[data.id] + ": " + countByAlpha3[data.id])
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY -30) + "px");
	}

	function hideTooltip(obj) {
	d3.select(obj)
	.transition().duration(300)
	.style('stroke', 'gray')
	.style("fill", function(d) {
	return color(countByAlpha3[d.id]);
	})
	// .style("opacity", 0.8);
	tooltip.transition().duration(300)
	.style("opacity", 0);
	}

	// Continental Portugal map

	d3.json('world.json', function(err, world) {
	var paises = topojson.feature(world, world.objects.world);

	var projection = d3.geo.mercator()
	.translate([width /2, height / 1.6])
	.scale(width / 2 / Math.PI);
	// .center(center)
	// .scale(1);

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

	// projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]);
	// projection.translate([width/2, height/2]);
	// projection.scale(s);


	// var b = path.bounds(paises);

	// // console.log(b);
	// var s = 1 / Math.max(
	// (b[1][0] - b[0][0]) / width,
	// (b[1][1] - b[0][1]) / height
	// );

	// // // var center = d3.geo.centroid(paises);
	// // // b = d3.geo.bounds(paises);

	// // b = world.bbox;

	// // var center = [(b[2]+b[0])/2, (b[3]+b[1])/2];

	// // projection.center(center);
	// projection.translate([width / 2, height / 2]);
	// projection.scale(s);

	bb = d3.select('svg')
	.call(zoom)
	.append('g')
	.attr('class', 'mundo');

	var paises = bb.selectAll('g')
	.data(paises.features)
	.enter()
	.append('g')
	.attr('class', function (d) { return d.properties.name})
	.append('path')
	.attr('d', path)
	.style("fill", function(d) {
	return color(countByAlpha3[d.id]);
	})
	.style("stroke", "gray")
	.on("mouseover", function() { showTooltip(this) })
	.on("mouseout", function() { hideTooltip(this) });

	});

	});

	</script>
	</body>