<!--
  -- 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>