See Arthur Geddes, The ‘Outer’ Hebrides, 1948.
forked from mbostock's block: Satellite Projection
forked from k9's block: Satellite Projection Test
license: gpl-3.0 |
See Arthur Geddes, The ‘Outer’ Hebrides, 1948.
forked from mbostock's block: Satellite Projection
forked from k9's block: Satellite Projection Test
<!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> |