Satellite Projection Test

forked from mbostock's block: Satellite Projection

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.graticule {
  fill: none;
  stroke: #777;
}

.country {
  fill: #e8eee8;
  stroke: #fff;
  stroke-width: 2px;
}

.river {
  fill: none;
  stroke: #aac;
  stroke-width: 0.5px;
}
  
.lake {
  fill: #aac; 
}
</style>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.0/d3.min.js'></script>
<script src='https://d3js.org/topojson.v1.min.js'></script>
<script src='https://d3js.org/d3-geo-projection.v1.min.js'></script>
<script>

var width = 960,
    height = 480

var latitude = 0,
    longitude = 0

var mouseInteraction = false
var distance = 2.0
var projection = d3.geoSatellite()
    .distance(distance)
    .scale(450)
    .clipAngle(Math.acos(1 / distance) * 180 / Math.PI - 1e-6)
    .precision(.1);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mouseover", function () { mouseInteraction = true })
    .on("mouseout", function () { mouseInteraction = false })

d3.json("vectors.json", function(error, vectors) {
  if (error) throw error;

var countries = topojson.feature(vectors, vectors.objects.countries)  
  var rivers = topojson.feature(vectors, vectors.objects.rivers)  
  var lakes = topojson.feature(vectors, vectors.objects.lakes)

d3.select(self.frameElement).style("height", height + "px");
</script>

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

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3-geo-projection.v1.min.js