D3 Orthographic Projection with TopoJSON

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

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js