"Week 11: Choropleth Map"

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.

<!DOCTYPE html>
<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>

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 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