Skip to content

Instantly share code, notes, and snippets.

@larsvers

larsvers/.block

Last active February 20, 2017 10:37
Show Gist options
  • Save larsvers/232a575dc5fa9c4f031268ce18ad5167 to your computer and use it in GitHub Desktop.
Save larsvers/232a575dc5fa9c4f031268ce18ad5167 to your computer and use it in GitHub Desktop.
Download ZIP
d3.geoSatellite() plaground
Raw
.block
license: mit
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

Raw
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>
Display the source blob
Display the rendered blob
Raw
world.geojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment