d3 geographic tile sets

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="d3-slippy.js"></script> 
<script>
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
  if (error) throw error;

// svg
	var svg = d3.select("svg");

// Get list of tilesets:
	var tilesets = d3.geoSlippy().tileSet(); 
	  
	// Drop down menu for tilesets:
	var select = d3.select("body")
	  .append("select")
	  .attr("style","position: absolute; top: 0; left: 0; z-index: 0");
	
	var options = select.selectAll("option")
	  .data(tilesets)
	  .enter()
	  .append("option")
	  .text(function(d) { return d; })
	  .attr("style","position: absolute; top: 10px; left 10px; z-index: 999");
	
	// Set up slippy map initially:
	var slippy = d3.geoSlippy()
	  .size(svg)
	  .tileSet("CartoDB_Positron")
	  .wrap(true);
	
	// Set up zoom:
	var zoom = d3.zoom()
	  .on("zoom",zoomed)		
	  
	// Create g elements for tiles and vectors:
	var tiles = svg.append("g");
	var vector = svg.append("g");
	
	// Append attribution:
	var text = svg.append("text")
	  .attr("x", 10)
	  .attr("y", 490);
	
	// Add features:
	var path = d3.geoPath().projection(slippy.projection());
	var features = vector.selectAll("path")
	  .data(topojson.feature(world,world.objects.land).features)
	  .enter()
	  .append("path")
	  .attr("fill","none")
	  .attr("stroke","black")
	  .attr("stroke-width",1)
  
	svg
	  .call(zoom)
	  .call(zoom.transform, slippy.zoomIdentity());

// Apply zoom
	function zoomed() {
	  // Update projection.
	  slippy.zoomTransform(d3.event.transform)
  
	  // Update raster tiles:
	  tiles.call(slippy.tile);
	  path = d3.geoPath().projection(slippy.projection());
	  features.attr("d",path);
	  
	  text.text(slippy.attribution());
	}

// Cycle through tilesets:
	setInterval(showcase, 16000);
	
	var index = 0;
	function showcase( ) {
		index++;
		var tileset = options
		  .property("selected",false)
		  .filter(function(d,i) { return i == index%tilesets.length })
		  .property("selected",true)
		  .text();
		
		slippy.tileSet(tileset);
		svg.call(zoom.transform, slippy.zoomIdentity());	 
	}	
	
	select.on("change", function(d) {
		// assign new tileset and redraw:
		slippy.tileSet(this.value);
		svg.call(zoom.transform, slippy.zoomIdentity());	  
	})
	
	
	
});

</script>

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

https://unpkg.com/topojson-client@3