Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active October 23, 2019 22:25
Show Gist options
  • Save shimizu/fde15aa8cf734f1219f8 to your computer and use it in GitHub Desktop.
Save shimizu/fde15aa8cf734f1219f8 to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment