block by pnavarrc 9843638

D3 Orthographic Projection with TopoJSON

Full Screen

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

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

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