d3-fuse Map

readme.md

This is a second demonstration of d3-fuse, a clustering library that allows the visual fusion of nodes that are overlapping.

See also this example.

Zooming will recalculate clusters while panning will simply move existing clusters.

The tile map is based on an as of yet experimental slippy map library for D3.

d3-fuse.js

/*v0.0.1*/
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree')) :
	typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree'], factory) :
	(factory((global.d3 = global.d3 || {}),global.d3)); }(this, (function (exports,d3Quadtree) { 'use strict';
	
var c = function(f) { return (typeof f == "function") ? f : (function() { return f; }) }
	
var fuse = function(n) {
  var nodes = n || [], padding = 0, pi = Math.PI;
  var x = function(d) { return d.x; }, 
    y = function(d) { return d.y; }, 
	r = function(d) { return d.r; },
	a = function(d) { return r(d) * r(d) * Math.PI; }

  function fuse() { initializeNodes(), step(); return nodes; }

  function cluster() {
    var tree = d3Quadtree.quadtree(nodes, function(d) { return d.layout.x; }, function(d) { return d.layout.y; }).visitAfter(prepare);
    var n0;  		// Current Node, n1 = comparison node.
    var count = 0;  // Number of merges for a given cycle
    for (var i = 0; i < nodes.length; ++i) n0 = nodes[i], tree.visit(apply);
	
	function apply(qn, x0, y0, x1, y1) {
      var n1 = qn.data;
      var r = qn.r + n0.layout.r;
      if (n1 && n1.index > n0.index && n1.layout.a && n0.layout.a) {    
          var x = n0.layout.x - n1.layout.x || 1e-6;
          var y = n0.layout.y - n1.layout.y || 1e-6;
          var l = Math.sqrt(x * x + y * y);
          if (l < r + padding) {							// If merge required
            l = (r - l) / l;
			count++;
			// Merge logic				
			var a,b;
			if(n1.layout.a > n0.layout.a) a = n1, b = n0;  	// Node1 absorbs Node0
			else a = n0, b = n1; 			 				// Node0 absorbs Node1
			// Merge nodes:
			a.layout.x = (a.layout.x * a.layout.a + b.layout.x * b.layout.a)/(a.layout.a + b.layout.a);
			a.layout.y = (a.layout.y * a.layout.a + b.layout.y * b.layout.a)/(b.layout.a + a.layout.a);
			a.layout.count += b.layout.count;
			a.layout.a += b.layout.a;
			a.layout.r = Math.sqrt(a.layout.a/pi);
			b.layout.r = b.layout.a = 0;
			a.layout.children.push(b), b.layout.parent = a;
        }
        return;
      }
     return x0 > n0.layout.x + r || x1 < n0.layout.x - r || y0 > n0.layout.y + r || y1 < n0.layout.y - r;
    }
	return count;
  }

  function prepare(n) {
    if (n.data) return n.r = n.data.layout.r;
    for (var i = n.r = 0; i < 4; ++i) {	
      if (n[i] && n[i].r > n.r) {  
        n.r = n[i].r;
      }
    }
  }

  function step() { if(cluster()) step(); }	

  function initializeNodes() {
    for (var i = 0, n = nodes.length, node; i < n; ++i) {
      node = nodes[i], node.index = i;
	  node.layout =  { x:x(node), y:y(node), a: a(node), r: r(node), count: 1, children: [], parent: {} } 
    }
  }
  
  fuse.nodes = function(_) { return arguments.length ? (nodes = _, fuse) : nodes; }
  fuse.padding = function(_) { return arguments.length ? (padding = _, fuse) : padding; }
  fuse.radius = function(_) { return arguments.length ? (radius = c(_), fuse) : radius; }
  fuse.area = function(_) { return arguments.length ? (area = c(_), fuse) : area;  }
  fuse.x = function(_) { x = c(_); return fuse;  }
  fuse.y = function(_) { y = c(_); return fuse;  } 
  fuse.defuse = function() { nodes.forEach(function(n) { delete n.layout; }); return fuse; }  
  fuse.step = function() { initializeNodes(); cluster(); return fuse; }
  fuse.fuse = function() { fuse(); return fuse; }
  return fuse;
};

exports.fuse = fuse;
Object.defineProperty(exports, '__esModule', { value: true });
})));

d3-slippy.js

//
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (factory((global.d3 = global.d3 || {}),global.d3));
}(this, function (exports) { 'use strict';
	
	
function geoTile() {
	
	// Basic Constants
	const tau = Math.PI * 2;
	const lim = 85.05113;

	// Map Properties:
	var w = 960;
	var h = 500;
	
	// Projection Values:
	var pk = w/tau; // projection scale k
	var px = w/2;   // projection translate x
	var py = h/2;   // projection translate y
	var pc = [0,0]  // projection geographic center
	
	// Zoom Transform Values:
	var tk = 1;	// zoom transform scale k
	var tx = 0; // zoom transform translate x
	var ty = 0; // zoom transform translate y
		
	// The Projection:
	var p = d3.geoMercator()
	  .scale(pk)
	  .translate([px,py])
      .center(pc);
	  
	// Tile wrapping:
	var W = true;
	
	// Tile source & attribution
	var source = function(d) {
		return "http://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
	}
	var a = "Tiles © OpenStreetMap contributors";
	  
	function geoTile(_) {
		return p(_);
	}
	
	// General Methods
	geoTile.width = function(_) {
		return arguments.length ? (w = _, geoTile) : w;
	}
	geoTile.height = function(_) {
		return arguments.length ? (h = _, geoTile) : h;
	}
	geoTile.size = function(_) {
		if(arguments.length) {
			(_ instanceof d3.selection) ? (w = _.attr("width"), h = _.attr("height")) : (w = _[0], h = _[1]);
			return geoTile;
		}
		else return [w,h]
	}
	geoTile.source = function(_) {
		return arguments.length ? (source = _, geoTile) : source;
	}
	geoTile.projection = function() {
		return p;
	}
	geoTile.attribution = function(_) {
		return arguments.length ? (a = _, geoTile) : a;
	}
	geoTile.wrap = function(_) {
		return arguments.length ? (W = _, geoTile) : W;
	}
	
	
	// Standard Projection methods:
	geoTile.invert = function(_) {
		return p.invert(_);
	}
	geoTile.center = function(_) {
		return arguments.length ? (pc = _, p.center(pc), geoTile): pc;
	}	
	geoTile.scale = function(_) {
		return arguments.length ? (pk = _, p.scale(pk), geoTile) : pk;
	}	
	geoTile.translate = function(_) {
		return arguments.length ? (px = _[0], py = _[1], p.translate([px,py]), geoTile) : [px,py]
	}
	geoTile.fit = function(_) {
		return arguments.length ? (p.fitSize([w,h],_),px = p.translate()[0],py = p.translate()[1],pk = p.scale(), geoTile) : "n/a";
	}
	geoTile.fitExtent = function(e,f) {
		return arguments.length > 1 ? (p.fitExtent(e,f),px = p.translate()[0],py = p.translate()[1],pk = p.scale(), geoTile) : "n/a";
	}
	geoTile.fitMargin = function(m,f) {
		return arguments.length > 1 ? (p.fitExtent([[m,m],[w-m,h-m]],f), px = p.translate()[0],py = p.translate()[1],pk = p.scale(), geoTile) : "n/a";
	}
		
	// Zoom Methods:
	geoTile.zoomScale = function(_) {
		return arguments.length ? (tk = _, p.scale(pk*tk), geoTile) : tk;
	}
	geoTile.zoomTranslate = function(_) {	
		return arguments.length ? (tx = _[0], ty = _[1], p.translate([tx, ty]), geoTile): [tx,ty] 
	}
	geoTile.zoomIdentity = function() {
		return d3.zoomIdentity.translate(px,py).scale(tk).translate(0,0);
	}
	geoTile.zoomTransform = function(t) {
		tx = t.x, ty = t.y, tk = t.k; p.translate([tx,ty]); p.scale(pk*tk); return geoTile;
	}

	// Tile Methods:	
	// Calculate Tiles:
	geoTile.tiles = function() {
		var size = pk * tk * tau;
		var z = Math.max(Math.log(size) / Math.LN2 - 8, 0); // z, assuming image size of 256.  
		var s = Math.pow(2, z - Math.round(z) + 8);
		
		var y0 = p([-180,lim])[1];
		var x0 = p([-180,lim])[0];

		var set = [];
		var cStart = Math.max(0, Math.floor((0 - x0) / s));
		var cEnd = Math.max(0, Math.ceil((w - x0) / s));
		var rStart = Math.max(0,Math.floor((0 - y0) / s));
		var rEnd = Math.max(0, Math.ceil((h - y0) / s));
	
		for(var i = cStart; i < cEnd; i++) {
			for(var j = rStart; j < rEnd; j++) {
				set.push({x:i,y:j,z:Math.round(z),id:i+"-"+j+"-"+z}) 
			}
		}
		
		set.translate = [x0 / s, y0 / s];
		set.scale = s;

		return set;
	
	}
	// Assign Tiles to a Selection:
	geoTile.tile = function(g) {
		
		var set = geoTile.tiles();
		var images = g.attr("transform", stringify(set.scale, set.translate))
			.selectAll("image")
			.data(set, function(d) { return d.id; })
			
		images.exit().remove();
		images.enter().append("image").merge(images)
			.attr("xlink:href", source )
			.attr("x", function(d) { return d.x * 256; })
			.attr("y", function(d) { return d.y * 256; })
			.attr("width", 256)
			.attr("height", 256);	
	}
	
	// Helper stringify	
	function stringify(scale, translate) {
		var k = scale / 256, r = scale % 1 ? Number : Math.round;
		return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")";
	}
	
	// To break out in the future, at least use switch ?:
	geoTile.tileSet = function(_) {
		// CartoDB:
		if(_ == "CartoDB_Positron") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_all/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		}		
		else if(_ == "CartoDB_PositronNoLabels") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_nolabels/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		}			
		else if(_ == "CartoDB_PositronOnlyLabels") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/light_only_labels/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		}	
		else if(_ == "CartoDB_DarkMatter") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_all/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		}
		else if(_ == "CartoDB_DarkMatterNoLabels") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_nolabels/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		}
		else if(_ == "CartoDB_DarkMatterOnlyLabels") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/dark_only_labels/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		}
		else if(_ == "CartoDB_Voyager") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/rastertiles/voyager/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		}
		/* else if(_ == "CartoDB_VoyagerNoLabels") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/rastertiles/voyager-nolabels/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		} 
		else if(_ == "CartoDB_VoyagerOnlyLabels") {
			a = "© OpenStreetMap © CartoDB";
			source = function(d) {
				return "https://cartodb-basemaps-b.global.ssl.fastly.net/rastertiles/voyager-only_labels/"+d.z+"/"+d.x+"/"+d.y+".png";
			}
		} */
		
		// ESRI
		else if(_ == "ESRI_WorldTerrain") {
			a = "Tiles © Esri - Source: USGS, Esri, TANA, DeLorme, and NPS"
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}
		}
		else if (_ == "ESRI_WorldShadedRelief") {
			a = "Tiles © Esri - Source: Esri";
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}			
		}
		else if (_ == "ESRI_WorldPhysical") {
			a = "Tiles © Esri - Source: US National Park Service";
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}			
		}
		else if (_ == "ESRI_WorldStreetMap") {
			a = "Tiles © Esri - Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom";
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}			
		}		
		else if (_ == "ESRI_WorldTopoMap") {
			a = "Tiles © Esri - Source: Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community";
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}			
		}		
		else if (_ == "ESRI_WorldImagery") {
			a = "Tiles © Esri - Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community";
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}		
		}
		else if (_ == "ESRI_OceanBasemap") {
			a = "Tiles © Esri - Source: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri";
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}		
		}		
		else if (_ == "ESRI_NGWorld") {
			a = "Tiles © Esri - Source:  National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC";
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}		
		}
		else if (_ == "ESRI_Gray") {
			a = "Tiles © Esri - Source:  Esri, DeLorme, NAVTEQ";
			source = function(d) {
				return "https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/"+d.z+"/"+d.y+"/"+d.x+".png";
			}			
		}
				
		// OSM
		else if (_ == "OSM_Topo") {
			a = "Tiles © OpenStreetMap contributors";
			source = function(d) {
				return "https://tile.opentopomap.org/"+d.z+"/"+d.x+"/"+d.y+".png"; 
			}
		}
		else if (_ == "OSM") {
			a = "Tiles © OpenStreetMap contributors";
			source = function(d) {
				return "https://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}		
		}
		
		
		// STAMEN
		else if (_ == "Stamen_Toner") {
			a = "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."			
			source = function(d) {
				return "https://stamen-tiles.a.ssl.fastly.net/toner/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}			
		}
		else if (_ == "Stamen_TonerBackground") {
			a = "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."			
			source = function(d) {
				return "https://stamen-tiles.a.ssl.fastly.net/toner-background/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}			
		}
		else if (_ == "Stamen_TonerLines") {
			a = "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."			
			source = function(d) {
				return "https://stamen-tiles.a.ssl.fastly.net/toner-lines/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}			
		}
		else if (_ == "Stamen_TonerLite") {
			a = "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."			
			source = function(d) {
				return "https://stamen-tiles.a.ssl.fastly.net/toner-lite/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}			
		}
		else if (_ == "Stamen_Terrain") {
			a = "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."			
			source = function(d) {
				return "https://stamen-tiles.a.ssl.fastly.net/terrain/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}			
		}		
		else if (_ == "Stamen_TerrainBackground") {
			a = "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."			
			source = function(d) {
				return "https://stamen-tiles.a.ssl.fastly.net/terrain-background/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}			
		}	
		else if (_ == "Stamen_TerrainLines") {
			a = "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."			
			source = function(d) {
				return "https://stamen-tiles.a.ssl.fastly.net/terrain-lines/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}			
		}		
		else if (_ == "Stamen_Watercolor") {
			a = "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA."			
			source = function(d) {
				return "https://stamen-tiles.a.ssl.fastly.net/watercolor/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}			
		}			
		
		else {
			// Default:
			console.log("Unknown Tileset, using OSM");
			a = "Tiles © OpenStreetMap contributors";
			source = function(d) {
				return "http://" + "abc"[d.y % 3] + ".tile.openstreetmap.org/" + d.z + "/" + d.x + "/" + d.y + ".png"; 
			}
		}
		
		return geoTile;
	}

	return geoTile;

}

  exports.geoTile = geoTile;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  svg, canvas {
    position: absolute;
    top: 0px;
    left: 0px;
  }
</style>
<svg width="960" height="500"></svg>
<canvas width="960" height="500"></canvas>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-tile.v0.0.min.js"></script>
<script src="d3-fuse.js"></script>
<script src="d3-slippy.js"></script>
<script>
// Canvas and SVG:
var canvas = d3.select("canvas");
var ctx = canvas.node().getContext("2d");
var svg = d3.select("svg");

// Basic parameters:
var width = +canvas.attr("width");
var height = +canvas.attr("height");
var center = [-75.5, 38];
var slippy = d3.geoTile()
 .tileSet("ESRI_OceanBasemap")
 .size(svg)
 .center(center)
 .scale(32768/Math.PI/2)
 .zoomTranslate([0,0])
 
// Create a g for the tiles:
var raster = svg.append("g");  

d3.csv("shipwrecks.csv").then(function(data) {
  // Set up nodes:
  data.forEach(place)
  
  // Set up cluster
  var cluster = d3.fuse()
    .nodes(data)
	.fuse(); // calculate clusters for initial load.
			
  // Set up zoom.
  var zoom = d3.zoom()
    .on("zoom",zoomed);
	
  // Call the zoom:
  canvas.call(zoom)
    .call(zoom.transform, slippy.zoomIdentity());

	
  function zoomed() {
    var k = d3.event.transform.k; 
	// Redraw clusters if scale changes
	if(slippy.zoomScale() != k) {
		slippy.zoomTransform(d3.event.transform)
		data.forEach(place);
		draw(cluster());
	}
	// Only translate the clusters if scale doesn't change:
	else {
      var t0 = slippy.zoomTranslate();
      var t1 = [d3.event.transform.x,d3.event.transform.y];	
	  
	  data.forEach(function(d) {
        d.layout.x += t1[0] - t0[0];
        d.layout.y += t1[1] - t0[1];
      })	
	  
	  draw(data);	  
	  slippy.zoomTranslate(t1)
	}
	raster.call(slippy.tile);		
  }
})
  
// Helper functions:
function place(node) {
	var p = slippy([+node.long,+node.lat]);
	node.x = p[0];
	node.y = p[1];
	node.r = 2;
	node.a = Math.PI * node.r * node.r;	
	node.count = 1;				
}
// Drawing functions:
function draw(nodes) {
  ctx.clearRect(0,0,width,height);
  nodes.filter(function(d) { return d.layout.r; }).forEach(drawCircle);
  nodes.filter(function(d) { return d.layout.r > 20; }).forEach(drawText);
  attribute();
}
function drawCircle(d) {
  d = d.layout;
  ctx.fillStyle = d.r ? ( d.r > 20 ? "#a8ddb5" : "#43a2ca"  ) : "#0868ac";
  ctx.beginPath();
  ctx.moveTo(d.x, d.y);
  ctx.arc(d.x, d.y, d.r, 0, 2 * Math.PI);
  ctx.fill();
}
function drawText(d) {
  d = d.layout;
  ctx.font = d.r / 3 + "px Arial";
  ctx.textAlign = "center";
  ctx.fillStyle = "white";
  ctx.fillText(d.count,d.x,d.y+d.r/9); 
}
function attribute() {
	ctx.font = "10px Arial";
	ctx.textAlign = "left";
	ctx.fillStyle = "black";
	ctx.fillText("Tiles \u00A9 Esri - Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri", 4, height-4);
}
</script>

shipwrecks.csv