【D3.js】サーマーウォーズのワールドクロックを作る

最終更新日

アノ時計っぽいものを作ってみました。
Summer Wars - WorldClock

example

解説

基本的には下記事のコードをちょこちょこっと改良しただけです。

【D3.js】 SVGで地球儀を描く
地軸を傾けながらSVGで地球儀を表示する

ポイントとしては地形を裏用(グレー)と表用(ピンク)に2重に描画しているところでしょうか。
clipAngleメソッドを使って描画される範囲を変えています。

・裏用地形描画

・表用地形描画

SVGでは後から追加された要素の方が上になるので、裏→表の順番で描画します。
テキスト(時計)表示部分はサイズ決め打ちでだいぶ手を抜いています。
ほんとはウインドサイズに応じて自働調整したかったのですが、うまくいきませんでした。
テキスト等はHTMLのDIV要素などを使った方が画面中央に揃えるのが簡単そうですね。

続き

夏戦世界時計をFx0(FirefoxOS)の待ち受けアプリにしてみた。