Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<style>
svg {
width: 100%;
height: 100%;
position: center;
background-color: #2B65EC;
}
.hidden {
display: none;
}
div.tooltip {
color: #222;
background: #fff;
border-radius: 3px;
box-shadow: 0px 0px 2px 0px #a6a6a6;
padding: .2em;
text-shadow: #f5f5f5 0 1px 0;
opacity: 0.9;
position: absolute;
</style>
</head>
<svg width="1200" height="900"></svg>
<div class="tooltip"></div>
<body>
<script>
var margin = {top: 10, right: 10, bottom: 10, left: 10};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var projection = d3.geoNaturalEarth1()
.center([0, 15])
.rotate([-9,0])
.scale([1300/(2*Math.PI)])
.translate([450,300]);
var path = d3.geoPath()
.projection(projection);
var svg = d3.select("svg")
.append("g")
.attr("width", width)
.attr("height", height);
var tooltip = d3.select("div.tooltip");
d3.queue()
.defer(d3.json, "world-110m.json")
.defer(d3.csv, "world-country-names.csv")
.await(ready);
function ready(error, world, names) {
if (error) throw error;
var countries1 = topojson.feature(world, world.objects.countries).features;
countries = countries1.filter(function(d) {
return names.some(function(n) {
if (d.id == n.id) return d.name = n.name;
})});
svg.selectAll("path")
.data(countries)
.enter()
.append("path")
.attr("stroke","green")
.attr("stroke-width",1)
.attr("fill", "white")
.attr("d", path )
.on("mouseover",function(d,i){
d3.select(this).attr("fill","grey").attr("stroke-width",2);
return tooltip.style("hidden", false).html(d.name);
})
.on("mousemove",function(d){
tooltip.classed("hidden", false)
.style("top", (d3.event.pageY) + "px")
.style("left", (d3.event.pageX + 10) + "px")
.html(d.name);
})
.on("mouseout",function(d,i){
d3.select(this).attr("fill","white").attr("stroke-width",1);
tooltip.classed("hidden", true);
});
};
</script>
</body>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js
https://d3js.org/d3-queue.v3.min.js