mapa mundi

forked from anonymous's block: mapa mundi

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
}

#info {
	position: absolute;
	background: #fff;
	background: -webkit-linear-gradient(top, #fff, #ccc, #fff);
	font-family: Verdana, sans-serif;
	font-size: 10pt;
	padding: 3pt;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border: thin solid #aaa;
	border-radius: 6px;
	-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
}

#info.hidden {
	display: none;
}
</style>
<body>
<div id="map"></div>
<div id="info" class="hidden"></div>
  
<script src="//d3js.org/d3.v4.js"></script>
<script src="topojson.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
  
<script>
var width = 960,
    height = 450;

var projection = d3.geoNaturalEarth2()
    .center([30, 1 ])
    .scale(194)
    .rotate([0,0]);

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);
    
var filter = svg.append("defs")
  .append("filter")
  .attr("id", "drop-shadow")
  .attr("height", "110%");
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 1)
.attr("result", "blur");

filter.append("feOffset")
    .attr("in", "blur")
    .attr("dx", 1)
    .attr("dy", 1)
    .attr("result", "offsetBlur");

var feMerge = filter.append("feMerge");

feMerge.append("feMergeNode")
    .attr("in", "offsetBlur")
feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");
    
var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "0%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#0F3871")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#175BA8")
    .attr("stop-opacity", 1);

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

var g = svg.append("g").attr("pointer-event","none");
var h = svg.append("g");

var idbyname = {};

d3.tsv("countrynames.tsv",function(names){
	console.log(names);
	names.forEach(function(d){
		idbyname[d.id] = d.name;	
	});
});
  
var idbynameTexto = {};
d3.tsv("countrynames.tsv",function(texto){
	console.log(texto);
	texto.forEach(function(d){
    idbynameTexto[d.id] = d.texto;
	});
});
  
// load and display the World
d3.json("world-110m.json", function(error, topology) {
    h.selectAll("path2")
      .data(topojson.object(topology, topology.objects.countries)
      .geometries)
    	.enter()
      .append("path")
      .attr("d", path)
      .on("mouseover",function(d,i){
      	console.log(d.id);
      	d3.select(this).style('fill','#EB9A28');
      	document.getElementById("info").innerHTML = idbyname[d.id];
      	var xPosition = parseFloat(d3.event.pageX) + 15 ;
				var yPosition = parseFloat(d3.event.pageY) - 15 ;
      	d3.select("#info")
					.style("left", xPosition + "px")
					.style("top", yPosition + "px")	
					;
					
				d3.select("#info").classed("hidden",false);
				//showText(text)
      })
    
      .on("mouseout",function(d,i){
      	d3.select(this).style('fill','none');
      	d3.select("#info").classed("hidden",true);
      })
    
      .on("mousemove",function(d,i){
      	var xPosition = parseFloat(d3.event.pageX) + 15 ;
				var yPosition = parseFloat(d3.event.pageY) - 15 ;
				d3.select("#info")
					.style("left", xPosition + "px")
					.style("top", yPosition + "px")	
					;	
				d3.select("#info").classed("hidden",false);
      })
    
      .on("click",function(d,i){
					document.getElementById("text").innerHTML = idbynameTexto[d.id];
      })
    
      .attr("class",function(d,i){
      	return "country_" + d.id;
      })
      .style("fill","none")
      .style("pointer-events","all")
      .attr('cursor','pointer')
      ;
      
    g.insert("path")
      .datum(topojson.object(topology, topology.objects.land))
      .attr("class", "land")
      .attr("d", path)
      .attr("pointer-events","none")
      .style("filter", "url(#drop-shadow)")
      .style("fill", "url(#gradient)")
      ;
      
    g.insert("path")
      .datum(topojson.mesh(topology, topology.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path)
      .style("fill","none")
      .attr("pointer-events","none")
      ;

});

function showText(text){
    		document.getElementById("text").innerHTML=text;
		};
		function hide(){
    		document.getElementById("text").innerHTML="";
		};
  
</script>
  
  <div id="text"></div>
</body>
</html>

https://d3js.org/d3.v4.js

https://d3js.org/d3-array.v1.min.js

https://d3js.org/d3-geo.v1.min.js

https://d3js.org/d3-geo-projection.v2.min.js