xxxxxxxxxx
<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/empo0270/0ca0fe40965f42110d7f26080ca97ae8/raw/decdff6f054075973e4715dbd857e29f914a5c43/Landmasses.geojson", function(geojson){
/*************************************************************
* 地球儀表示
*************************************************************/
var stage = svg.append("svg:g");
//ステージを右23.4度傾ける
stage.attr("transform", "rotate(-3.4, "+windowWidht/2+", "+windowHeight/2+")") ;
//地形(裏)
var backMap = stage.append("svg:path")
.attr({
"d":function(){ return backPath(geojson)},
"fill-opacity":1,
"fill":"#e0e2f4",
"stroke":"none",
});
//地形(表)
var frontMap = stage.append("svg:path")
.attr({
"d":function(){ return frontPath(geojson)},
"fill-opacity":1,
"fill":"#000000",
"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/6;
var marginTop = windowHeight/3 + windowHeight/2.5;
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":"#C0C0C0",
"fill-opacity": 0.8
})
//テキスト描画
var clockText = clockGroup.append("text")
.attr({
"x":"10",
"y":windowWidht/11,
"font-size": 110,
"fill":"#ffffff",
"stroke":"#000000",
"stroke-width": 3,
"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