Last active
February 19, 2017 04:58
-
-
Save Andrew-Reid/4ba4f84a7a94dd83684910be0992f411 to your computer and use it in GitHub Desktop.
Map Data Sources - Alternating CSVs - Show & Hide
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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="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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment