-
Notifications
You must be signed in to change notification settings - Fork 40
/
africa_map.html
46 lines (33 loc) · 901 Bytes
/
africa_map.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.countries {
fill: #e5e5e5;
stroke: #fff;
stroke-width:2px;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 1000,
height = 600;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geo.mercator()
.scale(400) // mess with this if you want
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
d3.json('data/topojson/africa.topojson', function(error, africa) {
console.log(africa);
svg.append('path')
.datum(topojson.feature(africa, africa.objects.collection))
.attr('class', 'countries')
.attr('d', path);
});
</script>
</body>
</html>