europe.topo.json

## europe.topo.json

      
        
            
              
              
            

          Raw
        
        
          
            
          
          
            
              europe.topo.json
            
          
        
      
    

  
      
  
    
      
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
  

  

  

## index.html
<!DOCTYPE html>
<head>
<style>

.land {
  fill: #ccc;
	fill-opacity: 0.8;
	stroke: #3b3b3b;
	stroke-width: 0.3px;
}

.graticule {
    fill: none;
    stroke: #777;
	stroke-width: 0.3px;
}

</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>

var width = 960,
	height = 500;

var projection = d3.geo.satellite()
	.translate([width/2,0])
	.distance(1.1)
	.scale(3250)
	.center([30, 50])
	.rotate([3, -51.3849401, -45])
	.tilt(20)
	.clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6);

var path = d3.geo.path()
	.projection(projection);

var graticule = d3.geo.graticule()
    .step([5, 5]);

var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

svg.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

var land = svg.append("g");

d3.json('europe.topo.json', function(err, data) {
	land.append("path")
		.datum(topojson.object(data, data.objects.europe))
		.attr("class", "land")
		.attr("d", path);
});

</script>
</body>
</html>