Map Data Sources - Alternating CSVs - Show & Hide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	
	<style>
		.land { fill: #a1d99b; }
		svg { background: #deebf7; }
		.boundary { fill:none; stroke: white; }
	
	</style>

<input class="selector" type="button" value="Customers" id="customer"/>
	<input class="selector" type="button" value="Employees" id="employee"/>
	
	<script>
	
		var width = 960;
		var height = 480;
		
		var svg = d3.select("#map")
		    .append("svg")
			.attr("width",width)
			.attr("height",height);
			
		var projection = d3.geoMercator()
		    .center([0,5])
			.scale(200)
			.rotate([-180,0]);
			
		var path = d3.geoPath().projection(projection);
		
		var g1 = svg.append('g');
		var g2 = svg.append('g');
		var g3 = svg.append('g');
		
		// Append the world:
		d3.json("world.json", function (error, world) {
		
			g1.insert("path", ".land")
		        .datum(topojson.feature(world, world.objects.land))
				.attr("class", "land")
				.attr("d", path);

g1.insert("path", ".boundary")
				.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
				.attr("class", "boundary")
				.attr("d", path);
		});
		
		// append customers data
		d3.csv('customers.csv', function(error,data) {
			g2.selectAll('.customer')
				.data(data)
				.enter()
				.append('circle')
				.attr('class','customer')
				.attr('cx',function(d) {return projection([d.long,d.lat])[0]; })
				.attr('cy',function(d) {return projection([d.long,d.lat])[1]; })
				.attr('r',4)
				.attr('stroke','steelblue')
				.attr('fill','white');
		});
		
		// append employees
		d3.csv('employees.csv', function(error,data) {
			g2.selectAll('.employee')
				.data(data)
				.enter()
				.append('circle')
				.attr('class','employee')
				.attr('cx',function(d) {return projection([d.long,d.lat])[0]; })
				.attr('cy',function(d) {return projection([d.long,d.lat])[1]; })
				.attr('r',0)
				.attr('stroke','steelblue')
				.attr('fill','white')
		});
		
		
		d3.selectAll('.selector')
			.on('click', function(d) {
				update(this.id);
			})
		
		
		// update function:
		function update(source) {
			d3.selectAll('circle').transition().attr('r',0).duration(1000);
			d3.selectAll('.'+source).transition().attr('r',4).duration(1000);
		}
		
		</script>

</body>
</html>

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

https://d3js.org/topojson.v1.min.js