D3 Examples - mapa mundi

xxxxxxxxxx
 
<!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>
​
    