calvinmetcalf/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=1024, user-scalable=no">
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;}
      #map{ height: 100% }
    </style>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<title>Hex Bins + leaflet</title>

<div id="map"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
<script src="https://raw.github.com/d3/d3-plugins/master/hexbin/hexbin.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script>
var m = L.map("map").setView([42.08, -71.64],8);

var stamenAttribution = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		  'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';

var tiles = L.layerGroup([
	L.tileLayer("http://{s}.tile.stamen.com/terrain-background/{z}/{x}/{y}.jpg",{minZoom:4,maxZoom:18}),
	L.tileLayer("http://{s}.tile.stamen.com/terrain-lines/{z}/{x}/{y}.png",{minZoom:4,maxZoom:12,attribution:stamenAttribution})
	]).addTo(m);

	var hexbin = d3.hexbin()
    .size([d3.max(points,function(v){return v[0]})-d3.min(points,function(v){return v[0]}), d3.max(points,function(v){return v[1]})-d3.min(points,function(v){return v[1]})])
    .radius(0.1);
    var hex = hexbin(points);

    function hexagon(radius) {
    var x0 = 0, y0 = 0;
    return d3.range(0, 2 * Math.PI, Math.PI / 3).map(function(angle) {
      var x1 = Math.sin(angle) * radius,
          y1 = -Math.cos(angle) * radius,
          dx = x1 - x0,
          dy = y1 - y0;
      x0 = x1, y0 = y1;
      return [dx, dy];
    });
  };
      var q = d3.scale.quantile().domain(hex.map(function(h){return h.length;}).reduce(function(a,b){if(a.indexOf(b)===-1){a.push(b)};return a;},[]).sort(function(a,b){return a-b})).range(d3.range(11))

  var transform = hexagon(0.1);
  transform.shift();
    var bins = hex.map(function(h){
    	return [transform.map(function(t){
    		return [h.x+t[0],h.y+t[1]];
    	}),colorbrewer.Spectral[11][q(h.length)]];
    })
var hexlayer = L.featureGroup(bins.map(function(v){
return L.polygon(v[0],{stroke:false,color:v[1],fillOpacity:0.7});
})).addTo(m);
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=1024, user-scalable=no">
	<style>
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0;}
	#map{ height: 100% }
	</style>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
	<title>Hex Bins + leaflet</title>

	<div id="map"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
	<script src="https://raw.github.com/d3/d3-plugins/master/hexbin/hexbin.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
	<script>
	var m = L.map("map").setView([42.08, -71.64],8);

	var stamenAttribution = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — ' +
	'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';

	var tiles = L.layerGroup([
	L.tileLayer("http://{s}.tile.stamen.com/terrain-background/{z}/{x}/{y}.jpg",{minZoom:4,maxZoom:18}),
	L.tileLayer("http://{s}.tile.stamen.com/terrain-lines/{z}/{x}/{y}.png",{minZoom:4,maxZoom:12,attribution:stamenAttribution})
	]).addTo(m);

	var hexbin = d3.hexbin()
	.size([d3.max(points,function(v){return v[0]})-d3.min(points,function(v){return v[0]}), d3.max(points,function(v){return v[1]})-d3.min(points,function(v){return v[1]})])
	.radius(0.1);
	var hex = hexbin(points);

	function hexagon(radius) {
	var x0 = 0, y0 = 0;
	return d3.range(0, 2 * Math.PI, Math.PI / 3).map(function(angle) {
	var x1 = Math.sin(angle) * radius,
	y1 = -Math.cos(angle) * radius,
	dx = x1 - x0,
	dy = y1 - y0;
	x0 = x1, y0 = y1;
	return [dx, dy];
	});
	};
	var q = d3.scale.quantile().domain(hex.map(function(h){return h.length;}).reduce(function(a,b){if(a.indexOf(b)===-1){a.push(b)};return a;},[]).sort(function(a,b){return a-b})).range(d3.range(11))

	var transform = hexagon(0.1);
	transform.shift();
	var bins = hex.map(function(h){
	return [transform.map(function(t){
	return [h.x+t[0],h.y+t[1]];
	}),colorbrewer.Spectral[11][q(h.length)]];
	})
	var hexlayer = L.featureGroup(bins.map(function(v){
	return L.polygon(v[0],{stroke:false,color:v[1],fillOpacity:0.7});
	})).addTo(m);
	</script>