Andrew-Reid/customers.csv

## customers.csv

          
            customers
            long
            lat

            
              Ann
              -157
              21

            
              Bob
              178
              -18

            
              Cathy
              120
              15

            
              Dan
              105
              21

            
              Carlos
              -82
              23

            
              Maria
              -80
              26

            
              Edna
              -75
              10

            
              Jaun
              -80
              8.5

            
              Al
              141
              43

            
              Zhang Wei
              -113
              54

            
              Wang Fang
              -114
              51

            
              Kaito
              151
              -33

            
              Yusof
              144
              -38

            
              Brenda
              174
              -37

            
              Chi
              -134
              58

            
              Alexei
              131
              43

            
              Habibie
              106
              -6

            
              Li Wei
              106
              30

            
              Chin
              77
              29

## employees.csv

          
            employee
            long
            lat

            
              Ann
              -125
              50

            
              Bob
              -118
              34

            
              Cathy
              -122
              38

            
              Dan
              -122
              47

            
              Carlos
              -99
              19

            
              Maria
              -74
              4.7

            
              Edna
              -77
              -12

            
              Jaun
               -70
              -33.4

            
              Al
              -71
              -33

            
              Zhang Wei
              114
              22

            
              Wang Fang
              121
              31

            
              Kaito
              139
              36

            
              Yusof
              104
              1.3

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

	<style>
		.land { fill: #a1d99b; }
		svg { background: #deebf7; }
		.boundary { fill:none; stroke: white; }

	</style>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
	<div id="map"></div>

	<input class="selector" type="button" value="Customers" id="customers.csv"/>
	<input class="selector" type="button" value="Employees" id="employees.csv"/>

	<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');

		// 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 intial data
		d3.csv('customers.csv', function(error,data) {
			g2.selectAll('circle')
				.data(data)
				.enter()
				.append('circle')
				.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');
		});

		d3.selectAll('.selector')
			.on('click', function(d) {
				update(this.id);
			})

		// update function:
		function update(source) {
			d3.csv(source, function(error,data) {

				var circles = g2.selectAll('circle')
				.data(data)

				// append new circles and remove excess circles
				circles.enter()
					.append('circle')
					.attr('cx',function(d) {return projection([d.long,d.lat])[0]; })
					.attr('cy',function(d) {return projection([d.long,d.lat])[1]; })
					.transition()
					.attr('r',4)
					.attr('stroke',function() { if (source == "employees.csv") { return "red"; } else { return "steelblue" } })
					.attr('fill','white')
					.duration(2000);

					circles.exit().transition().attr('r',0).duration(1000).remove();

				// move circles
				circles.transition()
					.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',function() { if (source == "employees.csv") { return "red"; } else { return "steelblue" } })
					.duration(2000);

			});
		}
		</script>


</body>
</html>


## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
customers	long	lat
Ann	-157	21
Bob	178	-18
Cathy	120	15
Dan	105	21
Carlos	-82	23
Maria	-80	26
Edna	-75	10
Jaun	-80	8.5
Al	141	43
Zhang Wei	-113	54
Wang Fang	-114	51
Kaito	151	-33
Yusof	144	-38
Brenda	174	-37
Chi	-134	58
Alexei	131	43
Habibie	106	-6
Li Wei	106	30
Chin	77	29
employee	long	lat
Ann	-125	50
Bob	-118	34
Cathy	-122	38
Dan	-122	47
Carlos	-99	19
Maria	-74	4.7
Edna	-77	-12
Jaun	-70	-33.4
Al	-71	-33
Zhang Wei	114	22
Wang Fang	121	31
Kaito	139	36
Yusof	104	1.3
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<style>
	.land { fill: #a1d99b; }
	svg { background: #deebf7; }
	.boundary { fill:none; stroke: white; }

	</style>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	</head>
	<body>
	<div id="map"></div>

	<input class="selector" type="button" value="Customers" id="customers.csv"/>
	<input class="selector" type="button" value="Employees" id="employees.csv"/>

	<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');

	// 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 intial data
	d3.csv('customers.csv', function(error,data) {
	g2.selectAll('circle')
	.data(data)
	.enter()
	.append('circle')
	.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');
	});

	d3.selectAll('.selector')
	.on('click', function(d) {
	update(this.id);
	})

	// update function:
	function update(source) {
	d3.csv(source, function(error,data) {

	var circles = g2.selectAll('circle')
	.data(data)

	// append new circles and remove excess circles
	circles.enter()
	.append('circle')
	.attr('cx',function(d) {return projection([d.long,d.lat])[0]; })
	.attr('cy',function(d) {return projection([d.long,d.lat])[1]; })
	.transition()
	.attr('r',4)
	.attr('stroke',function() { if (source == "employees.csv") { return "red"; } else { return "steelblue" } })
	.attr('fill','white')
	.duration(2000);

	circles.exit().transition().attr('r',0).duration(1000).remove();

	// move circles
	circles.transition()
	.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',function() { if (source == "employees.csv") { return "red"; } else { return "steelblue" } })
	.duration(2000);

	});
	}
	</script>








	</body>
	</html>