index.html
<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; }
var geojson = topojson.feature(data, data.objects.land);
var div = d3.select('#map-container'),
svg = div.selectAll('#map-container').data([geojson]);
svg.enter().append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geo.orthographic()
.scale(width / 2)
.translate([width / 2, height / 2])
.clipAngle(90);
var path = d3.geo.path()
.projection(projection);
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>
Makefile
URL = http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/50m/physical/ne_50m_land.zip
ne_50m_land.zip:
curl -LO $(URL)
ne_50m_land.shp: ne_50m_land.zip
unzip ne_50m_land.zip
touch ne_50m_land.shp
land.json: ne_50m_land.shp
ogr2ogr -f GeoJSON land.json ne_50m_land.shp
land.topojson: land.json
topojson -o land.topojson land.json
clean:
rm ne_50m_land*
rm land.json