forked from mbostock's block: Satellite Projection
xxxxxxxxxx
<meta charset="utf-8">
<style>
.graticule {
fill: none;
stroke: #777;
}
.country {
fill: #e8eee8;
stroke: #fff;
stroke-width: 2px;
}
.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 = 0,
longitude = 0
var mouseInteraction = false
var distance = 2.0
var projection = d3.geoSatellite()
.distance(distance)
.scale(450)
.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 += 1
}
projection.rotate([longitude, latitude, 0])
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>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.0/d3.min.js
https://d3js.org/topojson.v1.min.js
https://d3js.org/d3-geo-projection.v1.min.js