Satellite Projection Hebrides by fil

index.html

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

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

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

.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 = 53,
    longitude = -4.5,
    angle = 235;

var mouseInteraction = false
var distance = 1.10;
var projection = d3.geoSatellite()
    .distance(distance)
    .scale(1900)
.tilt(25)
    .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)    

  var countryPaths = this.svg.selectAll('.country')
      .data(countries.features)
      .enter().insert('path')
      .attr('class', 'country')
      .attr('d', path); 
  
  var riverPaths = this.svg.selectAll('.river')
      .data(rivers.features)
      .enter().insert('path')
      .attr('class', 'river')
      .attr('d', path); 
  
  var lakePaths = this.svg.selectAll('.lake')
      .data(lakes.features)
      .enter().insert('path')
      .attr('class', 'lake')
      .attr('d', path); 
  
  svg.on('mousemove', function() {
    var position = d3.mouse(this)
    latitude = 90 - (position[1] / 480 * 180)
    longitude = position[0] / 960 * 360
  })
  
  
  function render () {
    if (!mouseInteraction) {
      longitude += .00
    }
    
    projection.rotate([-longitude, -latitude, -angle])
    countryPaths.attr('d', path)
    riverPaths.attr('d', path)
    lakePaths.attr('d', path)
    //window.requestAnimationFrame(render)
  }
  
  render()
});

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