basilesimon/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    forked from mbostock's block: Satellite Projection

  
## 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/d3-jetpack@2.0.20/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>
	<!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/d3-jetpack@2.0.20/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>