Satellite Projection

forked from mbostock's block: Satellite Projection

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.graticule {
  fill: aliceblue;
  stroke: #777;
  stroke-opacity: 0.5;
}

.boundary {
  fill: #fff;
  fill-opacity: 1;
  stroke: #ccc;
}
.circle {
  fill: #ff0000;
  fill-opacity: 0.1;
  stroke: #ff0000;
  stroke-width: 2px;
  stroke-opacity: 0.3;
}
svg { background-color: aliceblue }
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="//d3js.org/topojson.v2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-jetpack@1.0.2/d3-jetpack.js"></script>
  <button onclick="zoom()">click to zoom</button>
<script>
function zoom() {
  projection = d3.geoSatellite()
  .distance(1.1)
  .scale(300000)
  // .rotate([76.0, -34.5, 32.12])
  .rotate([-39.75, -31.7, -30])
  .center([0, 2])
  .tilt(30)
  .precision(0.1);
  
  path = d3.geoPath().projection(projection);
  
  const duration = 500;
  d3.selectAll('.graticule')
  .transition().duration(duration)
  .at({d: path});
  d3.selectAll('.boundary')
  .transition().duration(duration)
  .at({d: path});
  d3.selectAll('.circle')
  .transition().duration(duration)
  .at({d: path});
  d3.selectAll('.tent')
  .transition().duration(duration)
  .at({
    cx: d =>  projection(d.geometry.coordinates)[0],
    cy: d => projection(d.geometry.coordinates)[1],
  	opacity: 0.2})
    ;
}
  
const width = 900;
const height = 900;

let projection = d3.geoSatellite()
  .distance(1.1)
  .scale(5000)
  // .rotate([76.0, -34.5, 32.12])
  .rotate([-38, -33, -30])
  .center([0, 2])
  .tilt(30)
  .precision(0.1);

const graticule = d3.geoGraticule()
  .extent([[-10,30], [80, 80]])
  .step([3, 3]);

let path = d3.geoPath().projection(projection);

const svg = d3
  .select('body')
  .append('svg')
  .at({ width: width, height: height });

svg
  .append('path')
  .datum(graticule)
  .at({ class: 'graticule', d: path });

d3.queue()
	.defer(d3.json, "https://gist.githubusercontent.com/basilesimon/e15cc6647a5ecc3c2c9b961215e8bf6b/raw/5733bff346be28f61ca2e2dcb982a82a48733bcd/sat.json")
	.defer(d3.json, "https://gist.githubusercontent.com/basilesimon/20178b9d63dbda0fb8ed14590fcca036/raw/3214d4c452f83f7538d0b2c20e30d535711e8a80/circle.json")
	.defer(d3.json, "https://gist.githubusercontent.com/basilesimon/614713d27f4c55d0392d77501f12b420/raw/8443dc30bb5f9b129a8e67e658c8c901a154f8fc/rukban.json")
	.await(draw);

d3.select(self.frameElement).style('height', height + 'px');

</script>

Modified //unpkg.com/d3-jetpack@2.0.20/build/d3-jetpack.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo-projection.v2.min.js

https://d3js.org/topojson.v2.js

https://unpkg.com/d3-jetpack@2.0.20/build/d3-jetpack.js