GUI -- countries topojson data and sample code extracting South America.
Change-Id: I61dbaf5a28b9a74d6700bc611019886c5b60a880
diff --git a/web/gui/src/main/webapp/_sdh/topojson/samerica.html b/web/gui/src/main/webapp/_sdh/topojson/samerica.html
new file mode 100644
index 0000000..15bb331
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/topojson/samerica.html
@@ -0,0 +1,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>
\ No newline at end of file