Summer Wars - World Clock -

サマーウォーズのアレです。

<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
	margin: 0px;
	padding: 0px;	
	width: 100%;
	height: 100%;
}

svg {
	width: 960px;
	height: 500px;
}
</style>

<body>
<svg></svg>	
	
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js"></script>
<script>
(function(){
	"use strict";
	
	var windowWidht = 960;
	var windowHeight = 500;
	
				
	var svg = d3.select("svg");
		 
	var projection90 = d3.geo.orthographic() 
		.scale(windowWidht/4)	
		.rotate([0,0,0])	
		.translate([windowWidht / 2, windowHeight / 2])
		.clipAngle(90);	
		
	var projection180 = d3.geo.orthographic() 
		.scale(windowWidht/4)	
		.rotate([0,0,0])	
		.translate([windowWidht / 2, windowHeight / 2])
		.clipAngle(180);	
			
		
	var frontPath = d3.geo.path().projection(projection90);
	var backPath = d3.geo.path().projection(projection180);
			
		d3.json("https://gist.githubusercontent.com/shimizu/97c156f7f9137586f784/raw/4be1053346fa88d448c2290c49689634c8102b0a/Landmasses.geojson", function(geojson){ 
			
			
			/*************************************************************
			 * 地球儀表示
			 *************************************************************/	
			var stage = svg.append("svg:g"); 
			
			//ステージを右23.4度傾ける
			stage.attr("transform", "rotate(23.4, "+windowWidht/2+",  "+windowHeight/2+")") ;
	
			//地形(裏)
			var backMap = stage.append("svg:path")
				.attr({
				"d":function(){ return backPath(geojson)},
					"fill-opacity":1,
					"fill":"#EDE9F1",
					"stroke":"none",
				});
	
			//地形(表)
			var frontMap = stage.append("svg:path")
				.attr({
				"d":function(){ return frontPath(geojson)},
					"fill-opacity":1,
					"fill":"#FD81DB",
					"stroke":"none",
				});
				
	 
			//地形を回転させる
			var update = function(){
				var i = 0;
				return function(){
					i = i+0.2;
					projection90.rotate([i,0,0]);  
					projection180.rotate([i,0,0]);  
	
					frontPath = d3.geo.path().projection(projection90);
					backPath = d3.geo.path().projection(projection180);
	
					backMap.attr("d", backPath(geojson)); 
					frontMap.attr("d", frontPath(geojson)); 
					
				}
			}		
			setInterval(update(), 100); 
			
			
			/*************************************************************
			 * 時計表示
			 *************************************************************/
			var marginLeft = windowWidht/8;
			var marginTop = windowHeight/3 + windowHeight/6;
			var textY = 10;
			
			
			var clockGroup = svg.append("g")
				.attr("transform", "translate("+[marginLeft, marginTop]+")") ;
			
			//テキスト背景描画
			var clockRect = clockGroup.append("rect")
				.attr({
					"width":"70%",
					"height":windowWidht/10,
					"fill":"EDE9F1",
					"fill-opacity": 0.2
				})
			
			//テキスト描画
			var clockText = clockGroup.append("text")
				.attr({
					"x":"10",
					"y":windowWidht/11,
					"font-size": 110,
					"font-weight":"bold",
					"font-family":"arial",
					"line-height": 1.5,
					"letter-spacing": 5,
					"word-spacing": 5
				});
				
			//テキスト更新
			setInterval(function(){
				clockText.text(moment().format('H:mm:ss:SS'));	
			}, 1)
	});

})();
</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js