Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid

Andrew-Reid/customers.csv

Last active August 12, 2023 22:47
Download ZIP
Map Data Sources - Alternating CSVs - Load on Demand
Raw
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
Raw
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
Raw
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>
Raw
world.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment