D3 Simple Map Example

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<!DOCTYPE html>
<html lang="es">
  <style>
    /*.mpio._44279 { fill: #fff; }*/
    
    path {
      fill: #777;
    }
    
    .mpio {
      fill: none;
      stroke: #fff;
      stroke-opacity: .25;
      stroke-width: .5px;
      pointer-events: all;
    }
    
    .depts {
      fill: none;
      stroke: #ff0000;
      stroke-linejoin: round;
      stroke-width: 1;
      opacity: 1;
    }
    
    div.tooltip {
      position: absolute;
      text-align: center;
      width: 100px;
      height: 28px;
      padding: 2px;
      font: 12px sans-serif;
      background: white;
      border-radius: 8px;
      pointer-events: none;
    }

  </style>

  <body>
    <h1 id='department' style='position:absolute;'></h1>
    <div id='mapa_calor'></div>

  </body>

</html>

JavaScript

var width = 600,
          height = 600;

        var div = d3.select("body").append("div")
          .attr("class", "tooltip")
          .style("opacity", 0);

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

        d3.json("https://raw.githubusercontent.com/deldersveld/topojson/master/countries/colombia/colombia-departments.json", function(error, co) {
          console.log(co)
          var subunits = topojson.feature(co, co.objects.COL_adm1);
          var projection = d3.geo.mercator()
            .scale(1000)
            .translate([width / 2, height / 2])
            .center([-75, 5])
           // .rotate([2, 3, 2]);

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

          var zoom = d3.behavior.zoom()
            .translate([0, 0])
            .scale(1)
            .scaleExtent([1, 8]);


          var g = svg.append("g");


          var centroids = {};

          g.append("path")
            .datum(subunits)
            .attr("d", path);
            
            var geoPoint = [-75,5]; // longitude latitude
            var svgPoint = projection(geoPoint); // svg x,y
            var pathOrigin = [width - 100, 100]; // a point in the top right corner of the svg (100 pixels down, 100 pixels from the right)

 
          function translateAlong(path, circle) {
            var l = path.getTotalLength();
            return function(d, i, a) {
              return function(t) {
                d3.select(circle).attr("r", circleSize(t));
                var p = path.getPointAtLength(t * l);
                return "translate(" + p.x + "," + p.y + ")";
              };
            };
          }

          //municipalities
          g.selectAll(".mpio")
          //TODO change here for mpio
            .data(topojson.feature(co, co.objects.COL_adm1).features)
            .enter().append("path")
            .on('mouseover', mouseoverMun)
            .on('mouseout',...