timelyportfolio/index.html

## index.html
<!DOCTYPE html>
<meta name="description" content="Datamaps Hexbin Plugin" />
<meta charset="utf-8">
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/d3.hexbin.v0.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <!-- I recommend you host this file on your own, since this will change without warning -->
  <script src="http://datamaps.github.io/scripts/datamaps.usa.js?v=1"></script>
  <p>Datamaps Hexbin Plugin</p>
  <p><a href="http://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('http://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>
	<!DOCTYPE html>
	<meta name="description" content="Datamaps Hexbin Plugin" />
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.hexbin.v0.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<!-- I recommend you host this file on your own, since this will change without warning -->
	<script src="http://datamaps.github.io/scripts/datamaps.usa.js?v=1"></script>
	<p>Datamaps Hexbin Plugin</p>
	<p><a href="http://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('http://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>