d3.geoSatellite() plaground

...allows to play with tilt and distance settings of the d3.geoSatellite() projection as well as scale and rotation angles in order to facilitate understanding of the projection. The extents are set reasonably.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>

<style>

body { 
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0; 
      font-family: 'Open Sans', sans-serif; 
    }
  
    #wrap {
      display: flex;
      flex-direction: row;
    }

#container {
      display: inline-block;
      border: 1px solid #aaa;
    }

#control-container {
      display: flex;
      flex-direction: column;
    }

.controls {
      display: flex;
      flex-direction: row;

font-size: 0.8em;
      padding: 0.5em;
      border-bottom: 1px dotted #ccc;
      border-top: 1px dotted #ccc;
    }

.controls:first-child {
      font-size: 1.2em;
      padding-top: 2em;
      padding-bottom: 2em;
      border-bottom: none;
    }

.controls:last-child {
      padding-top: 2em;
      padding-bottom: 2em;
      border: none;
    }
  </style>

</head>

<body>

<div class="controls">
        <div id="text">Little d3.geoSatellite() <br> key settings playground</div>
      </div>

<div class="controls" id="distance">
        <div id="distance-text"></div>
        <input type="range" id="distance" min="1" max="20" step="0.01" value="2">
        <div id="distance-output">2 r distance</div>
      </div>
    
      <div class="controls" id="tilt">
        <div id="tilt-text"></div>
        <input type="range" id="tilt" min="0" max="200" step="1" value="0">
        <div id="tilt-output">0&#176; tilt</div>
      </div>

<div class="controls" id="scale">
        <div id="scale-text"></div>
        <input type="range" id="scale" min="100" max="2000" step="10" value="250">
        <div id="scale-output">250 x scale</div>
      </div>

<div class="controls" id="rotate-yaw">
        <div id="rotate-yaw-text"></div>
        <input type="range" id="rotate-yaw" min="0" max="360" step="0" value="0">
        <div id="rotate-yaw-output">0&#176; rotate-yaw</div>
      </div>

<div class="controls" id="rotate-pitch">
        <div id="rotate-pitch-text"></div>
        <input type="range" id="rotate-pitch" min="0" max="360" step="0" value="0">
        <div id="rotate-pitch-output">0&#176; rotate-pitch</div>
      </div>

<div class="controls" id="rotate-roll">
        <div id="rotate-roll-text"></div>
        <input type="range" id="rotate-roll" min="0" max="360" step="0" value="0">
        <div id="rotate-roll-output">0&#176; rotate-roll</div>
      </div>

</div>

var canvas = d3.select('#container').append('canvas').attr('width', width).attr('height', height);
    var context = canvas.node().getContext('2d');

var projection = d3.geoSatellite()
      .scale(250)
      .translate([width/2, height/2]);
    var geoPath = d3.geoPath(projection);

var λ = 0, φ = 0, γ = 0;
    var globe = {type: 'Sphere'};
    var text;

var controlWidth = d3.select('input').node().clientWidth * 2;
    d3.select('#control-container').style('width', controlWidth + 'px');

d3.json('world.geojson', function(err, data) { if (err) throw err; build(data); });

function build(countries) {

context.clearRect(0,0,width,height);
      geoPath.context(context);

context.fillStyle = '#FFFAFA';
      context.lineWidth = '0.5px';

for (var x in countries.features) {

context.beginPath();
        geoPath(globe);
        context.strokeStyle = '#ccc';
        context.stroke();

context.beginPath();
        geoPath(countries.features[x]);
        context.strokeStyle = '#333';
        context.stroke();
        context.fill();

} // render countries

d3.select('input#distance').on('input', function() {

d3.select('#distance-output').html(this.value + ' r distance');
        text = "Distance from the center of the sphere to the point of view, as a proportion of the sphere’s radius; defaults to 2.0. Just imagine flying off from earth to space. Never being able to see the full earth of course, you will at least see more of the earth at a declining rate the further you travel...";
        d3.select('#description').html(text);
        projection = projection.distance(this.value);

build(countries);
      });

d3.select('input#tilt').on('input', function() {
        d3.select('#tilt-output').html(this.value + '&#176; tilt');
        text = "Angle of the view perspective. A 0&#176; tilt angle describes a perspective orthogonal to the earth's surface (so of a person out in space looking right down onto the earth). Hence, 90&#176; descibes a perspective of a person standing on the earth looking towards the horizon.";
        d3.select('#description').html(text);
        projection = projection.tilt(this.value);

build(countries);
      });

d3.select('input#scale').on('input', function() {
        d3.select('#scale-output').html(this.value + ' x scale');
        text = "Scale of the earth";
        d3.select('#description').html(text);
        projection = projection.scale(this.value);

build(countries);
      });

d3.select('input#rotate-yaw').on('input', function() {

λ = this.value;
        d3.select('#rotate-yaw-output').html(this.value + '&#176; rotate-yaw');
        text = "Lambda or Yaw - rotate around the vertical axis";
        d3.select('#description').html(text);

projection = projection.rotate([λ, φ, γ]);

build(countries);
      });

d3.select('input#rotate-pitch').on('input', function() {

φ = this.value;
        d3.select('#rotate-pitch-output').html(this.value + '&#176; rotate-pitch');
        text = "Phi or Pitch - rotate around the horizontal (or lateral) axis";
        d3.select('#description').html(text);

projection = projection.rotate([λ, φ, γ]);

build(countries);
      });

d3.select('input#rotate-roll').on('input', function() {

γ = this.value;

d3.select('#rotate-roll-output').html(this.value + '&#176; rotate-roll');
        text = "Gamma or Roll - rotate around the longitudinal axis";
        d3.select('#description').html(text);
        projection = projection.rotate([λ, φ, γ]);

build(countries);
      });

} // build()

</script>

</body>

https://d3js.org/d3.v4.min.js

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