D3 Examples - D3 Orthographic Projection with TopoJSON

xxxxxxxxxx
 
<html>
<head>
    <title>D3 Orthographic Projection with TopoJSON</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js" charset="utf-8"></script>
</head>
<body>
​
    <div id="map-container"></div>
​
    <script>
​
        var width = 500,
            height = 500;
​
        d3.json('land.topojson', function(error, data) {
​
            if (error) { return error; }
​
            // Transform the TopoJSON data to GeoJSON
            var geojson = topojson.feature(data, data.objects.land);
​
            var div = d3.select('#map-container'),
                svg = div.selectAll('#map-container').data([geojson]);
​
            // Create the SVG container
            svg.enter().append('svg')
                .attr('width', width)
                .attr('height', height);
​
            // Create and configure the projection
             var projection = d3.geo.orthographic()
                .scale(width / 2)
                .translate([width / 2, height / 2])
                .clipAngle(90);
​
            // Create and configure the geo path generator
            var path = d3.geo.path()
                .projection(projection);
​
            // Globe
            var globe = svg.append('path').datum({type: 'Sphere'})
                .attr('d', path)
                .attr('class', 'globe')
                .attr('fill', '#6D9BB9');
​
            var land = svg.selectAll('path.feature').data([geojson])
                .enter()
                .append('path')
                .attr('d', path)
                .attr('class', 'feature')
                .attr('fill', '#DEE1CB');
        });
    </script>
</body>
</html>
    