emeeks · August 29, 2015 14:06
diff --git a/readme.md b/readme.md
diff --git a/all_sites.csv b/all_sites.csv
diff --git a/d3map.css b/d3map.css
 path,circle,rect,polygon,ellipse,line {
    vector-effect: non-scaling-stroke;
 }
 svg, canvas {
    top: 0;
 }
 #d3MapZoomBox {
    position: absolute;
    z-index: 10;
    height: 100px;
    width: 25px;
    top: 10px;
    right: 50px;
 }

 #d3MapZoomBox > button {
    height:25px;
    width: 25px;
    line-height: 25px;
 }


 .d3MapControlsBox > button {
  font-size:22px;
  font-weight:900;
  border: none;
  height:25px;
  width:25px;
  background: rgba(35,31,32,.85);
  color: white;
  padding: 0;
  cursor: pointer;
 }

 .d3MapControlsBox > button:hover {
  background: black;
 }

 #d3MapPanBox {
    position: absolute;
    z-index: 10;
    height: 100px;
    width: 25px;
    top: 60px;
    right: 50px;
 }
 #d3MapPanBox > button {
    height:25px;
    width: 25px;
    line-height: 25px;
 }

 #d3MapPanBox > button#left {
  position: absolute;
  left: -25px;
  top: 10px;
 }

 #d3MapPanBox > button#right {
  position: absolute;
  right: -25px;
  top: 10px;
 }

 #d3MapLayerBox {
    position: relative;
    z-index: 10;
    height: 100px;
    width: 120px;
    top: 10px;
    left: 10px;
    overflow: auto;
    color: white;
    background: rgba(35,31,32,.85);
 }

 #d3MapLayerBox > div {
    margin: 5px;
    border: none;
 }

 #d3MapLayerBox ul {
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
 }
 #d3MapLayerBox li {
    list-style: none;
    padding: 0;
 }

 #d3MapLayerBox li:hover {
    font-weight:700;
 }

 #d3MapLayerBox li input {
    cursor: pointer;
 }

 div.d3MapModal {
    position: absolute;
    z-index: 11;
    background: rgba(35,31,32,.90);
    top: 50px;
    left: 50px;
    color: white;
    max-width: 400px;
 }

 div.d3MapModalContent {
    width:100%;
    height: 100%;
    overflow: auto;
 }

 div.d3MapModalContent > p {
    padding: 0px 20px;
    margin: 5px 0;
 }

 div.d3MapModalContent > h1 {
    padding: 0px 20px;
    font-size: 20px;
 }

 div.d3MapModalArrow {
    content: "";
 	width: 0; 
 	height: 0; 
 	border-left: 20px solid transparent;
 	border-right: 20px solid transparent;
 	border-top: 20px solid rgba(35,31,32,.90);
        position: absolute;
        bottom: -20px;
        left: 33px;
 }


 #d3MapSVG {

 }

 rect.minimap-extent {
    fill: rgba(200,255,255,0.35);
    stroke: black;
    stroke-width: 2px;
    stroke-dasharray: 5 5;
 }

 circle.newpoints {
    fill: black;
    stroke: red;
    stroke-width: 2px;
 }

 path.newfeatures {
    fill: steelblue;
    fill-opacity: .5;
    stroke: pink;
    stroke-width: 2px;
 }
diff --git a/index.html b/index.html
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>d3.carto.map - Improved Circle Pack Clustering</title>
  <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="d3map.css" />
    <link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
 </head>
 <style>
  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

  #map {
    height: 100%;
    width: 100%;
    position: absolute;
  }

 </style>
 <script>
      function makeSomeMaps() {
    map = d3.carto.map();

    d3.select("#map").call(map);
    
    tileLayer = d3.carto.layer();
    tileLayer
    .type("tile")
    .path("elijahmeeks.map-azn21pbi")
    .label("Base")
    
    csvLayer = d3.carto.layer.csv();
    csvLayer
    .path("all_sites.csv")
    .label("CSV Points")
    .cssClass("pinkcircle")
    .renderMode("svg")
    .markerSize(2)
    .x("xcoord")
    .y("ycoord")
    .on("recluster", clusterPack)
    .cluster(true);
    
    map.addCartoLayer(tileLayer).addCartoLayer(csvLayer);
    map.centerOn([100,30],"latlong").setScale(3);
    
    function clusterPack() {
      clusterLayer = csvLayer.clusterLayer();
      clusterLayer.g().selectAll("g.marker").selectAll("*").remove();

      packChart = d3.layout.pack();
      packChart.size([15,15])
      .value(function(d) {return 1});

      clusterLayer.g().selectAll("g.marker")
      .each(function(d) {
        d3.select(this).selectAll("circle")
        .data(packChart(d))
        .enter()
        .append("circle")
        .style("stroke", "black")
        .style("stroke-width", function(p) {return p.leaf ? 0 : 1})
        .attr("cx", function(p) {return p.x - 5})
        .attr("cy", function(p) {return p.y - 5})
        .attr("r", function(p) {return p.r})
        .style("fill", function(p) {return p.leaf ? "darkred" : "#FFE6E6"})

      })

    }

  }
 </script>
 <body onload="makeSomeMaps()">
 <div id="map"></div>
 <footer>
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
 <script src="http://d3js.org/topojson.v1.min.js" type="text/javascript">
 </script>
 <script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
 </script>
 <script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
 </script>
 <script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
 </script>
 <script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript">
 </script>
 <script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
 </script>
 </footer>
 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	path,circle,rect,polygon,ellipse,line {
	vector-effect: non-scaling-stroke;
	}
	svg, canvas {
	top: 0;
	}
	#d3MapZoomBox {
	position: absolute;
	z-index: 10;
	height: 100px;
	width: 25px;
	top: 10px;
	right: 50px;
	}

	#d3MapZoomBox > button {
	height:25px;
	width: 25px;
	line-height: 25px;
	}


	.d3MapControlsBox > button {
	font-size:22px;
	font-weight:900;
	border: none;
	height:25px;
	width:25px;
	background: rgba(35,31,32,.85);
	color: white;
	padding: 0;
	cursor: pointer;
	}

	.d3MapControlsBox > button:hover {
	background: black;
	}

	#d3MapPanBox {
	position: absolute;
	z-index: 10;
	height: 100px;
	width: 25px;
	top: 60px;
	right: 50px;
	}
	#d3MapPanBox > button {
	height:25px;
	width: 25px;
	line-height: 25px;
	}

	#d3MapPanBox > button#left {
	position: absolute;
	left: -25px;
	top: 10px;
	}

	#d3MapPanBox > button#right {
	position: absolute;
	right: -25px;
	top: 10px;
	}

	#d3MapLayerBox {
	position: relative;
	z-index: 10;
	height: 100px;
	width: 120px;
	top: 10px;
	left: 10px;
	overflow: auto;
	color: white;
	background: rgba(35,31,32,.85);
	}

	#d3MapLayerBox > div {
	margin: 5px;
	border: none;
	}

	#d3MapLayerBox ul {
	list-style: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	}
	#d3MapLayerBox li {
	list-style: none;
	padding: 0;
	}

	#d3MapLayerBox li:hover {
	font-weight:700;
	}

	#d3MapLayerBox li input {
	cursor: pointer;
	}

	div.d3MapModal {
	position: absolute;
	z-index: 11;
	background: rgba(35,31,32,.90);
	top: 50px;
	left: 50px;
	color: white;
	max-width: 400px;
	}

	div.d3MapModalContent {
	width:100%;
	height: 100%;
	overflow: auto;
	}

	div.d3MapModalContent > p {
	padding: 0px 20px;
	margin: 5px 0;
	}

	div.d3MapModalContent > h1 {
	padding: 0px 20px;
	font-size: 20px;
	}

	div.d3MapModalArrow {
	content: "";
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid rgba(35,31,32,.90);
	position: absolute;
	bottom: -20px;
	left: 33px;
	}


	#d3MapSVG {

	}

	rect.minimap-extent {
	fill: rgba(200,255,255,0.35);
	stroke: black;
	stroke-width: 2px;
	stroke-dasharray: 5 5;
	}

	circle.newpoints {
	fill: black;
	stroke: red;
	stroke-width: 2px;
	}

	path.newfeatures {
	fill: steelblue;
	fill-opacity: .5;
	stroke: pink;
	stroke-width: 2px;
	}
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>d3.carto.map - Improved Circle Pack Clustering</title>
	<meta charset="utf-8" />
	<link type="text/css" rel="stylesheet" href="d3map.css" />
	<link type="text/css" rel="stylesheet" href="https://raw.githubusercontent.com/emeeks/d3-carto-map/master/examples/example.css" />
	</head>
	<style>
	html,body {
	height: 100%;
	width: 100%;
	margin: 0;
	}

	#map {
	height: 100%;
	width: 100%;
	position: absolute;
	}

	</style>
	<script>
	function makeSomeMaps() {
	map = d3.carto.map();

	d3.select("#map").call(map);

	tileLayer = d3.carto.layer();
	tileLayer
	.type("tile")
	.path("elijahmeeks.map-azn21pbi")
	.label("Base")

	csvLayer = d3.carto.layer.csv();
	csvLayer
	.path("all_sites.csv")
	.label("CSV Points")
	.cssClass("pinkcircle")
	.renderMode("svg")
	.markerSize(2)
	.x("xcoord")
	.y("ycoord")
	.on("recluster", clusterPack)
	.cluster(true);

	map.addCartoLayer(tileLayer).addCartoLayer(csvLayer);
	map.centerOn([100,30],"latlong").setScale(3);

	function clusterPack() {
	clusterLayer = csvLayer.clusterLayer();
	clusterLayer.g().selectAll("g.marker").selectAll("*").remove();

	packChart = d3.layout.pack();
	packChart.size([15,15])
	.value(function(d) {return 1});

	clusterLayer.g().selectAll("g.marker")
	.each(function(d) {
	d3.select(this).selectAll("circle")
	.data(packChart(d))
	.enter()
	.append("circle")
	.style("stroke", "black")
	.style("stroke-width", function(p) {return p.leaf ? 0 : 1})
	.attr("cx", function(p) {return p.x - 5})
	.attr("cy", function(p) {return p.y - 5})
	.attr("r", function(p) {return p.r})
	.style("fill", function(p) {return p.leaf ? "darkred" : "#FFE6E6"})

	})

	}

	}
	</script>
	<body onload="makeSomeMaps()">
	<div id="map"></div>
	<footer>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
	<script src="http://d3js.org/topojson.v1.min.js" type="text/javascript">
	</script>
	<script src="http://d3js.org/d3.geo.projection.v0.min.js" type="text/javascript">
	</script>
	<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
	</script>
	<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
	</script>
	<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript">
	</script>
	<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
	</script>
	</footer>
	</body>
	</html>