work on @ramnathv datamaps plugin by timelyportfolio

index.html

<!DOCTYPE html>
<meta name="description" content="Datamaps Hexbin Plugin" />
<meta charset="utf-8">
<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//d3js.org/d3.hexbin.v0.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <!-- I recommend you host this file on your own, since this will change without warning -->
  <script src="//datamaps.github.io/scripts/datamaps.usa.js?v=1"></script>
  <p>Datamaps Hexbin Plugin</p> 
  <p><a href="//datamaps.github.io/">DataMaps Project Homepage</a></p>
  
  <div id="container1" style="position: relative; width: 80%; height: 80%;"></div>
  <script>
      var map = new Datamap({
        scope: 'usa',
        element: document.getElementById('container1'),
        geographyConfig: {
          "popupOnHover": false,
          "highlightOnHover": false
        }
      });

map.addPlugin("hexbin", function(layer, data, options){
  var self = this;
  
  var hexbin = d3.hexbin()
    .radius(5)
    .x(function(d) {
      return self.latLngToXY(+d.latitude, +d.longitude)[0];
    })
    .y(function(d) {
      return self.latLngToXY(+d.latitude, +d.longitude)[1];
    });
  
  var className = "hexbin";
  var hexbins = layer
    .selectAll(className)
    .data(hexbin(data), JSON.stringify);
  
  var radius = d3.scale.sqrt()
    .domain([0, 12])
    .range([0, 10]);

  
  hexbins.enter()
    .append("path")
      .attr("class", "hexagon")
      .attr("d", function(d){
        return hexbin.hexagon(radius(d.length))
      })
      .attr("transform", function(d) { 
        return "translate(" + d.x + "," + d.y + ")"; 
      })
      .style("fill", "green")
      .attr('data-info', function(d) {
          return JSON.stringify(d);
       })
      .on('mouseover', function ( datum ) {
          var $this = d3.select(this)
          //use the same options from the bubbles plugin
          var bubblesOptions = self.options.bubblesConfig;
          debugger;
          if (bubblesOptions.highlightOnHover) {
            //save all previous attributes for mouseout
            var previousAttributes = {
              'fill':  $this.style('fill'),
              'stroke': $this.style('stroke'),
              'stroke-width': $this.style('stroke-width'),
              'fill-opacity': $this.style('fill-opacity')
            };

            $this
              .style('fill', bubblesOptions.highlightFillColor)
              .style('stroke', bubblesOptions.highlightBorderColor)
              .style('stroke-width', bubblesOptions.highlightBorderWidth)
              .style('fill-opacity', bubblesOptions.highlightFillOpacity)
              .attr('data-previousAttributes', JSON.stringify(previousAttributes));
          }

          if (bubblesOptions.popupOnHover) {
            debugger;
            //was using updatePopup from datamaps prototype
            //but position not working
            //I think this is because the hexbins use transform/translate for positioning
            //self.updatePopup($this, datum, self.options.hexbinOptions, self.svg);
            
            //note: still doesn't work when in an iframe though
              var element = $this;
              var options =  self.options.hexbinOptions;
              var position = $this[0][0].getBoundingClientRect();
              var svgposition = self.svg[0][0].getBoundingClientRect();
              element.on('mousemove', null);
              element.on('mousemove', function() {
                d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover')
                  .style('top', ( ( position.top - svgposition.top + 30)) + "px")
                  .html(function() {
                    var data = JSON.parse(element.attr('data-info'));
                    //if ( !data ) return '';
                    return options.popupTemplate(datum, data);
                  })
                  .style('left', ( position.left - svgposition.left) + "px");
              });
          
              d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block');

          }
        })
        .on('mouseout', function ( datum ) {
          var $this = d3.select(this);
          var bubblesOptions = self.options.bubblesConfig;
          if (bubblesOptions.highlightOnHover) {
            //reapply previous attributes
            var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );
            for ( var attr in previousAttributes ) {
              $this.style(attr, previousAttributes[attr]);
            }
          }

          d3.selectAll('.datamaps-hoverover').style('display', 'none');
        })  
       .transition()
       .duration(400);
  
})

          
     d3.json('//rawgithub.com/creaktive/cartodb20/master/spec/support/data/walmart.json', function(data){
       map.hexbin(data.slice(1, 624),  { 
         popupTemplate: function(geo, data) {
           debugger;
           return '<div class="hoverinfo">' + data[0].strcity + ', ' + data[0].strstate + ': ' + data.length + ' stores' + '</div>'
         }
     })
})
    
         
  </script>
</body>