地図作成の実験をHabrと共有したいと思います。つまり、
正投影（球）から
等距離 （通常の2次元地図の投影の1つ）への遷移のアニメーションです。 また、この方法は他の投影にも適しています。 実験の結果はそのようなアニメーションでした：
前と同じように、
d3.jsライブラリを使用します。前と同じように、
SVGとCanvasといういくつかの実装を作成します。 両方のオプションは、インタラクティブなインフォグラフィックに効果的に使用できます。 さあ、始めましょうか？
開始する
私はかつてテレビ（Gazpromなど）で広告を見たことがあります。この広告では、地球がただ回転してから地図に展開します。 美しい漫画、私はそれが好きでした、よく、私は似たようなことをするだけで、インタラクティブでインターネットのために決めました。
チャレンジを受け入れました 。
単純なものから複雑なものまで
すでにマップ（
d3.jsを使用したインタラクティブSVGマップ ）とグローブ（
インタラクティブグローブ -SVG 対Canvas ）で作業しているため、ある投影から別の投影への移行からすぐに始めます。 最初に思い浮かぶのは、トランジションアニメーションが既にライブラリに実装されているため、すべてをライブラリに渡すことです。 だから私はやった。 最初の例の完全なコードは、
GitHub ：
Globe to Mapで見ることができ、
bl.ocks.orgで感じることができます：
Globe to Map 。 はい、
bl.ocks.orgで左上隅のブロック番号
をクリックすると、
GitHubの対応する要点に移動するため、将来的にはリンクを1つだけ提供します。
つまり、フォーカスとは国に焦点を当てる指標、
orthoは投影の指標、速度は回転速度、
startは回転の
start 、
corrは回転フェーズを保存する変数です。
endall(transition, callback)関数は、トランジション（アニメーション）が適用される要素の数をカウントし、すべてが終了すると、それに渡された関数（
callback ）を実行します。 原則として、
SetTimeoutに置き換えることができますが、
endall(transition, callback)を使用する方が適切です。
回転は
d3.timerを使用して実装され、
orthoクラスの
pathのみ適用され
path 。
corr変数を使用すると、投影の変更前と同じグローブの回転角度に戻すことができます。 経度
λと緯度
φ 、Wiki記事の
地理座標からの次の図がわかります。
地球から地図への遷移のアニメーション：
ここで、現在の回転角度を保存してから、
orthoクラスを削除して回転を停止し、投影を変更して、組み込みのトランジションアニメーションをオンにします。
逆遷移は、遷移の最後にすべての
orthoクラスを追加し、グローブの回転角度をリセットすることで区別されます（タイマーはこの間ずっと刻々と変化します）。
質問の残りのコードは、理論的には、特に私の以前の記事を読んでいる場合は、引き起こすべきではありません。
最初の例をしばらく試してみた場合、マップが毎回異なるように見えることに気付くはずです。 これは、地球のさまざまな回転角（
λ ）で遷移を開始するため、マップは経度（経線）のさまざまな値にカットされます。 マップの通常の外観（反子午線に沿ったセクション）を取得するには、移行前に地球儀をゼロ子午線に合わせる必要があります。 また、折り目の代わりに、2次元マップの投影パラメーターを変更できますが、最初のオプションを選択しました。 2番目の例では、反時計回りの切断が実装され、グローブがマウスで回転します（ドラッグイベント）。
defaultRotate()関数は
defaultRotate()担当します：
インタラクティブグローブ-SVGとCanvasの記事で同様の機能を既に説明しているので、繰り返しません。 2番目の例のコードは
bl.ocks.org：Globe to Map IIです。
アニメーションを複雑にする時が来ました。最初の2つの例の変形はクールに見え、存在する権利がありますが、もっと美的なものが欲しいです。
美しさが世界を救うなら、なぜそれは常にいくらかの犠牲を必要とするのですか？ ©
この場合、被害者はコードの複雑さを意味します。 そのため、ある投影から別の投影への遷移が最短パスに沿って「愚かに」進まないようにするために、美しく、投影の独自の補間を作成する必要があります。 幸運なことに、Mike：
Orthographic to Equirectangularから適切な例を見つけました。 最小限の修正で、両方向のトランジションに使用できます。必要なものだけです。 最終的な実装は次のとおりです。
一見複雑に見えますが、実際はそうではありません。 ここで何が起こっていますか？
interpolatedProjection(a, b)関数に2つの投影を供給し、それらを正規化（1スケール、ラジアン単位の座標）してから、結合投影が作成されます。これは、係数
α （補間ステップ）を持つ元の投影のパラメーター（中心、オフセット）のペアワイズ和です。 そして、各ステップで、
αに応じて結合投影が与えられます。 ステップ
α大きくすると、最初の投影の重みが小さくなり、2番目の投影の重みが大きくなります。 したがって、美しいアニメーションが得られます。
bl.ocks.orgの最終バージョン：
Globe to Map III 。
最後に、キャンバスを使用してバージョンを作成することも決定しました。 このバージョンは、すべての関数が
ready(error, world, countryData)内に移動するという点で異なり
ready(error, world, countryData)これらはジオデータを直接操作する必要があるためです。それ以外の場合、作業のロジックは同じです。 コメントする特別なものはないので、
bl.ocks.orgのコードは
次のとおりです
。Globe to Map IV結果
インタラクティブなマップに興味深い空白を追加しました。これに情報を固定したり、ループして同じ漫画を作成したりできます。 シャドウ、グラデーション、その他の効果を追加することで、視覚化をより洗練させることもできます。 そのようなホイッスルの例を次に示します。
回路図の上に衛星写真やタイルを追加して、すべてをより現実的にすることができますが、これは別の記事のトピックであり、インフォグラフィックにはほとんど適していません。
これで実験が終了します。 最後まで読んでくれた人に感謝します。 皆さん、おもしろいプロジェクトに幸運を。