cluster 1 million points

<!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% }
    .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition: -webkit-transform 0.25s ease-out, opacity 0.25s ease-in;
	-moz-transition: -moz-transform 0.25s ease-out, opacity 0.25s ease-in;
	-o-transition: -o-transform 0.25s ease-out, opacity 0.25s ease-in;
	transition: transform 0.25s ease-out, opacity 0.25s ease-in;
	}
    .marker-cluster-tiny {
    background-color: rgba(181, 226, 140, 0.6);
     
    }
.marker-cluster-tiny div {
	background-color: rgba(110, 204, 57, 0.6);
     
	}

.marker-cluster-small {
    background-color: rgba(104, 98, 150, 0.6);
   
    }
.marker-cluster-small div {
	background-color: rgba(0, 17, 204, 0.6);
    
	}

.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
     
	}
.marker-cluster-medium div {
	background-color: rgba(240, 194, 12, 0.6);
      
	}

.marker-cluster-large {
	background-color: rgba(253, 156, 115, 0.6);
       
	}
.marker-cluster-large div {
	background-color: rgba(241, 128, 23, 0.6);

}

.marker-cluster {
    background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 30px;
    </style>
  
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />

<title>Clusters</title>
<div id="map"></div>
<script src="https://d3js.org/d3.v3.js"></script>

var m = L.map("map").setView([42.3164, -71.7],9);

//make the map

L.tileLayer("https://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",{minZoom:4,maxZoom:12,attribution:'Map tiles by <a href="https://stamen.com">Stamen Design</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(m);
	
//add a tileset

var pts = L.layerGroup().addTo(m);

var qt, bbox;

return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: size});
	}
    var hover;
function redoMap(event){
    if(!Array.isArray(event)){
      p=event;  
      pts.clearLayers();
      event.points.forEach(function(v){//do the query
         pts.addLayer(L.circleMarker(v,{stroke:false,fillOpacity:0.8,radius:6,color:colorbrewer.Spectral[11][getHash(JSON.stringify(v))],clickable:false}));//turn it into a marker wiht a popup
    });
    if(hover){
         m.removeLayer(hover);
                     hover=null;
    }
    event.clusters.forEach(
        function(v){//do the query
        
         pts.addLayer(
             L.marker(v[2],{icon:_defaultIconCreateFunction(v)}).on("mouseover",function(){
                 if(!hover){
                     hover = L.polygon(v[1]).addTo(m);
                 }
             }).on("mouseout",function(){
                 if(hover){
                     m.removeLayer(hover);
                     hover=null;
                 }
             })
             );//turn it into a marker wiht a popup
    }
        )
      return;
    }
}
m.on("contextmenu moveend",function(){redoBox()});//so you can right click to add to map

//this is the box selection thingy
var BoxSelect = L.Map.BoxZoom.extend({
	
	_onMouseUp: function (e) {
		this._pane.removeChild(this._box);
		this._container.style.cursor = '';

L.DomUtil.enableTextSelection();

L.DomEvent
		    .off(document, 'mousemove', this._onMouseMove)
		    .off(document, 'mouseup', this._onMouseUp);

var map = this._map,
		    layerPoint = map.mouseEventToLayerPoint(e);

if (this._startLayerPoint.equals(layerPoint)) { return; }

var bounds = new L.LatLngBounds(
		        map.layerPointToLatLng(this._startLayerPoint),
		        map.layerPointToLatLng(layerPoint));

map.fire("boxselectend", {
			boxSelectBounds: [bounds.getSouthWest().lat,bounds.getSouthWest().lng,bounds.getNorthEast().lat,bounds.getNorthEast().lng]
		});
	}
});
m.boxZoom.disable();//turn off  the defult behavior
var boxSelect = new BoxSelect(m);//new box select
boxSelect.enable();//add it
m.on("boxselectend",function(e){redoBox(e.boxSelectBounds);});//put the behavior in.
</script>

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

Modified http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js to a secure url

Updated missing url https://raw.github.com/mbostock/d3/5348d911938a0d1fdf43d7c86befbd908e431204/lib/colorbrewer/colorbrewer.js to https://cdn.jsdelivr.net/gh/mbostock/d3/5348d911938a0d1fdf43d7c86befbd908e431204/lib/colorbrewer/colorbrewer.js

Updated missing url https://raw.github.com/Caligatio/jsSHA/release-1.42/src/sha1.js to https://cdn.jsdelivr.net/gh/caligatio/jssha/release-1.42/src/sha1.js

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

https://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js

https://raw.github.com/mbostock/d3/5348d911938a0d1fdf43d7c86befbd908e431204/lib/colorbrewer/colorbrewer.js

https://raw.github.com/Caligatio/jsSHA/release-1.42/src/sha1.js