I think that tooltipsy dosen't work with the map because it only recognizes the svg area, not the countries' path. That could be an explanation to why the tooltip appears in the top of the svg.
xxxxxxxxxx
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
body {
font-family: Helvetica, sans-serif;
padding: 40px;
}
.countries {
stroke: #fff;
stroke-width: 1px;
}
.legendLinear text {
font-size: 11px;
fill: white;
}
.tooltip{ background-color:rgba(255,255,255,0.8);
margin: 5px;
padding: 5px;
font-size: 13px;
}
/*.country-label {
fill: #777;
fill-opacity: .5;
font-size: 11px;
font-weight: 300;
text-anchor: middle;
}*/
</style>
<body>
<h2>Current Malaria infant mortality rates in Africa</h2>
<p>Per 1,000 live births</p>
<p>Source: <a href="https://data.unicef.org/child-health/diarrhoealdiseases.html">UNICEF</a>. Data shown is most recent data for countries with data available.</p>
<div id="vis"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="tooltip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="d3-legend.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 700,
height = 600;
var svg = d3.select('#vis').append('svg')
.attr('width', width)
.attr('height', height)
.style("background-color", "#3E446B");
var projection = d3.geo.mercator()
.scale(380) // mess with this if you want
.translate([width / 2.4, height / 1.9]);
var path = d3.geo.path()
.projection(projection);
var colorScale = d3.scale.linear().range(["#FCE4C2", "#EB8A02"]).interpolate(d3.interpolateLab);
var countryById = d3.map();
// we use queue because we have 2 data files to load.
queue()
.defer(d3.json, "africa.topojson")
.defer(d3.csv, "my2013.csv", typeAndSet) // process
.await(loaded);
function typeAndSet(d) {
d.Malaria = +d.Malaria;
countryById.set(d.ISO3, d); //where the id in my2013
return d;
}
function getColor(d) {
var dataRow = countryById.get(d.properties.iso_a3); //match id my2013 with countries id
if (dataRow) {
console.log("row", dataRow);
return colorScale(dataRow.Malaria);
} else {
console.log("no dataRow", d);
return "#ccc";
}
}
function getText(d) {
var dataRow = countryById.get(d.properties.iso_a3);
if (dataRow) {
console.log(dataRow);
return "<strong>" + dataRow.country + "</strong><br> The malaria rate in 2013 was <strong>" + dataRow.Malaria + "</strong>";
} else {
console.log("no dataRow", d);
return "<strong>" + d.properties.name + "</strong><br> No data";
}
}
function loaded(error, countries, illness) {
console.log("countries", countries);
console.log("illness", illness);
colorScale.domain(d3.extent(illness, function(d) {return d.Malaria;}));
var world = topojson.feature(countries, countries.objects.collection).features;
svg.selectAll('path.countries')
.data(world)
.enter()
.append('path')
.attr('class', 'countries')
.attr('d', path)
.attr('fill', function(d,i) {
/*console.log(d.properties.name);*/
return getColor(d);
})
/*.append("title")
.text(function(d) {
return getText(d);
});*/
.call(d3.helper.tooltip(
function(d, i){
return getText(d);
}
)); //tooltip based in an example from Roger Veciana: https://bl.ocks.org/rveciana/5181105
var linear = colorScale;
svg.append("g")
.attr("class", "legendLinear")
.attr("transform", "translate(20,20)");
var legendLinear = d3.legend.color()
.shapeWidth(30)
.orient('vertical')
.scale(linear);
svg.select(".legendLinear")
.call(legendLinear);
}
</script>
</body>
</html>
Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js
https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js
https://d3js.org/topojson.v1.min.js