Geomap

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.names {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
  }

/* Tooltip CSS */
    .d3-tip {
    line-height: 1.5;
    font-weight: 400;
    font-family:"avenir next", Arial, sans-serif;
    padding: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #66ccff;
    border-radius: 1px;
    pointer-events: none;
    }

/* Creates a small triangle extender for the tooltip */
    .d3-tip:after {      
      box-sizing: border-box;
      display: inline;
      font-size: 8px;
      width: 100%;
      line-height: 1.5;
      color: rgba(0, 0, 0, 0.6);
      position: absolute;
      pointer-events: none;
      
    }

/* Northward tooltips */
    .d3-tip.n:after {
      content: "\25BC";
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
      text-align: center;
    }

/* Eastward tooltips */
    .d3-tip.e:after {
      content: "\25C0";
      margin: -4px 0 0 0;
      top: 50%;
      left: -8px;
    }

/* Southward tooltips */
    .d3-tip.s:after {
      content: "\25B2";
      margin: 0 0 1px 0;
      top: -80px;
      left: 0;
      text-align: center;
    }

/* Westward tooltips */
    .d3-tip.w:after {
      content: "\25B6";
      margin: -4px 0 0 -1px;
      top: 50%;
      left: 100%;
    }

/*    text{
      pointer-events:none;
    }*/

.details{
      color:white;
    }

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="d3-tip.js"></script>
<script>
var format = d3.format(",");

// Set tooltips
var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function(d) {
              return "<strong>Country: </strong><span class='details'>" + d.properties.name + "<br></span>" + "<strong>Population: </strong><span class='details'>" + format(d.population) +"</span>";
            })

var margin = {top: 50, right: 0, bottom: 0, left: 900},
            width = 1330,
            height = 600;
            // width = 1330 - margin.left - margin.right,
            // height = 650 - margin.top - margin.bottom;
var scale = [10,20,30,40,50,60,70,80,90,100];
var legend_labels = ["10", "20+", "30+", "40+", "50+", "60+", "70+", "80+", "90+", "100"];
var color = d3.scale.threshold()
    .domain(scale)
    .range(["rgb(0, 102, 204)", 
            "rgb(0, 153, 255)", 
            "rgb(51, 153, 255)", 
            "rgb(153, 204, 255)", 
            "rgb(204, 153, 255)", 
            "rgb(255, 153, 255)",
            "rgb(255, 102, 204)",
            "rgb(255, 51, 153)",
            "rgb(204, 102, 153)",
            "rgb(102, 0, 51)"]);

var path = d3.geo.path();

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append('g')
            .attr('class', 'map');

var projection = d3.geo.mercator()
                   .scale(130)
                  .translate( [width / 2, height / 1.5]);

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

svg.call(tip);

queue()
    .defer(d3.json, "world_countries.json")
    .defer(d3.tsv, "final_country_feed_food_comparison.tsv")
    .await(ready);

// var color_domain = [50, 150, 350, 750, 1500]
// var ext_color_domain = [0, 50, 150, 350, 750, 1500]
             
// var color_legend = d3.scale.threshold()
// .domain(color_domain)
// .range(["#adfcad", "#ffcb40", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);

function ready(error, data, population) {
  var populationById = {};

population.forEach(function(d) { populationById[d.id] = +d.population; });
  data.features.forEach(function(d) { d.population = populationById[d.id] });

svg.append("g")
      .attr("class", "countries")
    .selectAll("path")
      .data(data.features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { return color(populationById[d.id]); })
      .style('stroke', 'white')
      .style('stroke-width', 1.5)
      .style("opacity",0.8)
      // tooltips
        .style("stroke","white")
        .style('stroke-width', 0.3)
        .on('mouseover',function(d){
          tip.show(d);

d3.select(this)
            .style("opacity", 1)
            .style("stroke","white")
            .style("stroke-width",3);
        })
        .on('mouseout', function(d){
          tip.hide(d);

d3.select(this)
            .style("opacity", 0.8)
            .style("stroke","white")
            .style("stroke-width",0.3);
        });

svg.append("path")
      .datum(topojson.mesh(data.features, function(a, b) { return a.id !== b.id; }))
       // .datum(topojson.mesh(data.features, function(a, b) { return a !== b; }))
      .attr("class", "names")
      .attr("d", path);
    //Adding legend for our Choropleth

var legend = svg.selectAll("g.legend")
  .data(scale)
  .enter().append("g")
  .attr("class", "legend");

var ls_w = 20, ls_h = 20;

legend.append("rect")
  .attr("x", 50)
  .attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
  .attr("width", ls_w)
  .attr("height", ls_h)
  .style("fill", function(d, i) { return color(d); })
  .style("opacity", 0.8);

legend.append("text")
  .attr("x", 80)
  .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
  .text(function(d, i){ return legend_labels[i]; });
}
</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js