larsvers/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    ...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

  
## index.html
<!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 id="wrap">

    <div id="container"></div>

      <div id="control-container">

      <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 class="controls">
        <div id="description"></div>
      </div>

    </div>

  </div>

  <script>

    var width = 600;
    var height = 600;

    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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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 id="wrap">

	<div id="container"></div>

	<div id="control-container">

	<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° 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° 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° 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° rotate-roll</div>
	</div>

	<div class="controls">
	<div id="description"></div>
	</div>

	</div>

	</div>

	<script>

	var width = 600;
	var height = 600;

	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 + '° tilt');
	text = "Angle of the view perspective. A 0° 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° 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 + '° 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 + '° 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 + '° rotate-roll');
	text = "Gamma or Roll - rotate around the longitudinal axis";
	d3.select('#description').html(text);
	projection = projection.rotate([λ, φ, γ]);

	build(countries);
	});

	} // build()


	</script>

	</body>