Alireza-Dezfoolian/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Rotating Earth</title>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  color: #333;
  background: radial-gradient(#b0ccfc, #376fcc, #032460);
  margin: 10px;
}

#menu {
  position: absolute;
  top: 20px;
  left: 30px;
}

#menu .item {
  margin-bottom: 12px;
}

#menu .item input {
  width: 100px;
}

#menu select {
  margin-top: 4px;
}

#menu .item .value {
  font-weight: bold;
}

#menu .item span, #menu .item input {
  vertical-align: middle;
}

#menu .item .low {
  display: inline-block;
  width: 30px;
  text-align: right;
}

svg {
  border: 1px solid #eee;
}

.map path {
  opacity: .8;
  fill: #d6830e;
  stroke: #8e5e19;
  stroke-width: 1;
}

.graticule path {
  fill: none;
  stroke: #b5cbff;
  opacity: .8;
}

</style>

<body>

  <svg width="900px" height="500px">
    <g class="graticule"><path></path></g>
    <g class="circles"></g>
    <g class="map"></g>
    <circle class="projection-center" r="4"></circle>
  </svg>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

  <script>
let geojson;
let projection;
let rotation = true;
let interval;
const geoGenerator = d3.geoPath()
  .projection(projection);

const graticule = d3.geoGraticule();

const geoCircle = d3.geoCircle().radius(10).precision(1);

const state = {
  type: 'Orthographic',
  scale: 220,
  translateX: 450,
  translateY: 250,
  centerLon: 0,
  centerLat: 0,
  rotateLambda: 50,
  rotatePhi: 0,
  rotateGamma: 0
}

const svg = d3.select('svg').on('click', start)
 .append('g')
 .attr('x', 600)
 .attr('y', 500)
 .append('text')
 .text('click on the Earth to make it rotating')


function start() {
  if(rotation) interval = setInterval(()=> update(), 10);
  else clearInterval(interval)
  rotation = !rotation;
}

function update() {
  projection = d3.geoOrthographic();
  geoGenerator.projection(projection);
  projection
    .scale(Math.random() > .5 ? state.scale++ : state.scale--)
    .rotate([state.rotateLambda++, state.rotatePhi--, state.rotateGamma--])

  const u = d3.select('g.map')
    .selectAll('path')
    .data(geojson.features)

  u.enter()
    .append('path')
    .merge(u)
    .attr('d', geoGenerator)

  d3.select('.graticule path')
    .datum(graticule())
    .attr('d', geoGenerator);
}

d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
  geojson = json;
  update();
  start();
})

  </script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>Rotating Earth</title>
	</head>

	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	background: radial-gradient(#b0ccfc, #376fcc, #032460);
	margin: 10px;
	}

	#menu {
	position: absolute;
	top: 20px;
	left: 30px;
	}

	#menu .item {
	margin-bottom: 12px;
	}

	#menu .item input {
	width: 100px;
	}

	#menu select {
	margin-top: 4px;
	}

	#menu .item .value {
	font-weight: bold;
	}

	#menu .item span, #menu .item input {
	vertical-align: middle;
	}

	#menu .item .low {
	display: inline-block;
	width: 30px;
	text-align: right;
	}

	svg {
	border: 1px solid #eee;
	}

	.map path {
	opacity: .8;
	fill: #d6830e;
	stroke: #8e5e19;
	stroke-width: 1;
	}

	.graticule path {
	fill: none;
	stroke: #b5cbff;
	opacity: .8;
	}

	</style>

	<body>

	<svg width="900px" height="500px">
	<g class="graticule"><path></path></g>
	<g class="circles"></g>
	<g class="map"></g>
	<circle class="projection-center" r="4"></circle>
	</svg>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

	<script>
	let geojson;
	let projection;
	let rotation = true;
	let interval;
	const geoGenerator = d3.geoPath()
	.projection(projection);

	const graticule = d3.geoGraticule();

	const geoCircle = d3.geoCircle().radius(10).precision(1);

	const state = {
	type: 'Orthographic',
	scale: 220,
	translateX: 450,
	translateY: 250,
	centerLon: 0,
	centerLat: 0,
	rotateLambda: 50,
	rotatePhi: 0,
	rotateGamma: 0
	}

	const svg = d3.select('svg').on('click', start)
	.append('g')
	.attr('x', 600)
	.attr('y', 500)
	.append('text')
	.text('click on the Earth to make it rotating')


	function start() {
	if(rotation) interval = setInterval(()=> update(), 10);
	else clearInterval(interval)
	rotation = !rotation;
	}

	function update() {
	projection = d3.geoOrthographic();
	geoGenerator.projection(projection);
	projection
	.scale(Math.random() > .5 ? state.scale++ : state.scale--)
	.rotate([state.rotateLambda++, state.rotatePhi--, state.rotateGamma--])

	const u = d3.select('g.map')
	.selectAll('path')
	.data(geojson.features)

	u.enter()
	.append('path')
	.merge(u)
	.attr('d', geoGenerator)

	d3.select('.graticule path')
	.datum(graticule())
	.attr('d', geoGenerator);
	}

	d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
	geojson = json;
	update();
	start();
	})

	</script>
	</body>
	</html>