samerica.html
2.44 KB
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!--
-- Sample code to show extracting country data from a countries TopoJSON
-- file and projecting it into an SVG layer.
--
-- See: http://bl.ocks.org/pnavarrc/62047b5638d624cfa9cb
-->
<html>
<head>
<title>S America</title>
<script charset="utf-8" src="../../tp/d3.min.js"></script>
<script charset="utf-8" src="../../tp/topojson.v1.min.js"></script>
<style>
svg {
border: 1px solid #888;
}
.country {
fill: #bcd1ff;
stroke: #7c79e6;
stroke-width: 1;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var datapath = '../../data/map/countries.topojson',
height = 500,
width = 500;
// create geographic projection
var projection = d3.geo.mercator()
.translate([width/2, height/2]);
// configure path generator
var pathGenerator = d3.geo.path()
.projection(projection);
var div = d3.select('#map'),
svg = div.append('svg'),
grp = svg.append('g');
svg.attr('width', width).attr('height', height);
d3.json(datapath, function (error, data) {
if (error) {
console.error(error);
throw error;
}
var features = topojson.feature(data, data.objects.countries).features;
// S.America
var southAmerica = features.filter(function (country) {
return country.properties.continent === 'South America';
});
var southAmericaFeature = {
type: 'FeatureCollection',
features: southAmerica
};
// compute bounds and centroid
var bounds = d3.geo.bounds(southAmericaFeature),
center = d3.geo.centroid(southAmericaFeature);
// compute angular distance between bound corners
var distance = d3.geo.distance(bounds[0], bounds[1]),
scale = height / distance / Math.sqrt(2);
// update projection
projection.scale(scale).center(center);
// draw
var countries = grp.selectAll('path.country')
.data([southAmericaFeature]);
countries.enter().append('path').classed('country', true);
countries.attr('d', pathGenerator);
countries.exit().remove();
});
</script>
</body>
</html>