Skip to content

Instantly share code, notes, and snippets.

@basilesimon

basilesimon/.block

Last active April 29, 2019 16:46
Show Gist options
  • Save basilesimon/599946ebb8847cf54db21e605d02b28d to your computer and use it in GitHub Desktop.
Save basilesimon/599946ebb8847cf54db21e605d02b28d to your computer and use it in GitHub Desktop.
Download ZIP
Satellite Projection
Raw
.block
license: gpl-3.0
Raw
index.html
<!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="//unpkg.com/[email protected]/build/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 });
const draw = (error, land, circle, camp) => {
svg
.append('path')
.datum(topojson.feature(land, land.objects.ne_10m_admin_0_countries2))
.at({ class: 'boundary', d: path });
svg
.append('path')
.datum(topojson.feature(circle, circle.objects.Circle_Measure))
.at({ class: 'circle', d: path });
//console.log(topojson.feature(camp, camp.objects.Rukban_Structures_20190121))
svg.selectAll('.tent')
.data(topojson.feature(camp, camp.objects.Rukban_Structures_20190121).features)
.enter().append('circle')
.at({ class: 'tent',
cx: d => projection(d.geometry.coordinates)[0],
cy: d => projection(d.geometry.coordinates)[1],
r: 1,
opacity: 0.1});
}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment