Skip to content

Instantly share code, notes, and snippets.

@piwodlaiwo

piwodlaiwo/.block

Created January 31, 2018 17:39
Show Gist options
  • Save piwodlaiwo/927dcb71a0f922f77de22c169e3407fb to your computer and use it in GitHub Desktop.
Save piwodlaiwo/927dcb71a0f922f77de22c169e3407fb to your computer and use it in GitHub Desktop.
Download ZIP
Satellite Projection in D3v4
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.graticule {
fill: none;
stroke: #777;
}
.boundary {
fill: #ccc;
fill-opacity: .8;
stroke: #000;
}
</style>
<body>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/d3-geo-projection@2"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>
var width = 960,
height = 960;
var projection = d3.geoSatellite()
.distance(1.1999999999999997)
.scale(1515.4164785519242)
.rotate([-10.080000000000013,-35.999999999999986,9.999999999999982])
.center([-2, 5])
.tilt(24.999999999999993)
.clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6)
.precision(.1);
var graticule = d3.geoGraticule()
.extent([[-93, 27], [-47 + 1e-6, 57 + 1e-6]])
.step([3, 3]);
var path = d3.geoPath()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) {
//world-50m.json
if (error) throw error;
svg.append("path")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "boundary")
.attr("d", path);
});
d3.select(self.frameElement).style("height", height + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment