Cameron Beccario／地球を作り上げる：世界天気のアニメーション地図

Tue, 26 Dec 2017 00:00:00 +0000

Data Visualization meetup 2017（2017年12月26日・Indeed Tokyo 目黒オフィス開催）における、Cameron Beccario さんの講演です。世界の気象データをリアルタイムに可視化する earth の作者が、その動機・構築・反響・そこから得た教訓を語ります。

本セッションは英語で行われました。以下は日本語に翻訳・整文したものです。なお**末尾の質疑応答は、質問者が日本語で話しているにもかかわらず自動字幕が英語として認識してしまっているため、質問文を復元できませんでした。**回答から推測できる範囲で構成しています。

こんにちは。Cameron Beccario と申します。お招きいただきありがとうございます。

最初にお断りしておくと、今日は Indeed の社員としてではなく、Indeed に入る前に個人で作ったプロジェクトについてお話しします。それから、英語で失礼します。Twitter は @cambecc です。

earth というのが私のプロジェクトの名前です。Web の技術を学ぶために作った風の地図（wind map） です。今夜は4つのトピックについてお話しします——動機・構築・反響・教訓です。

自己紹介

私はもともとアメリカ中西部、アイオワ州シーダーラピッズの出身です。何もありません。トウモロコシと豚だけです。

アイオワ州立大学でコンピュータ工学の学位を取り、その後シアトルに移ってマイクロソフトで5年間働きました。少し飽きてきたので、日本に来て日本語を勉強することにしました——**いまこうして英語で話しているわけですが。**その後いくつかの会社を経て、最終的に Indeed でソフトウェアエンジニアとして働いています。

動機 ― 無職の夏

2013年の夏、私は無職でした。

**切手を集めていました。**エンジニアが切手を集めている——あまり良い兆候ではありません。

何か新しいスキルを学ぶためのプロジェクトが必要でした。HTML5 と JavaScript をやりたいと思っていた。**JavaScript は知りませんでした。**そしてデータ可視化。でも何を作るか。

インスピレーション

そこで素敵なインスピレーションを見つけました。2012年に見つけた hint.fm/wind というサイトです。Google の（当時はまだ別の場所にいた）二人の研究者が作ったものです。

これを見たとき、私は思いました。「これは本当にクールだ。ブラウザでこんなことができるのか。すごい。」しかも基本的にリアルタイムです。最終更新の時刻が出ている。

「これを参考にして、自分でも何か作れるんじゃないか」と思いました。それに——**私は天気が好きなんです。**大きな嵐、澄み切った空、雪。恐ろしくて、同時に美しい。

「よし、風の地図を作ろう。良いプロジェクトになりそうだ」と。

道具とデータ

何を使うか調べ始めて、D3 を見つけました。今日も先ほど話に出ていましたね。D3 で綺麗な地図を作る方法を説明した良いチュートリアルがありました。長いチュートリアルでしたが。地図は問題なし。

ではデータはどこから取るのか。そもそもそんなデータは存在するのか。どうやって見つけるのか。

調べると、アメリカ国立気象局（US National Weather Service） が GFS という気象モデルを持っていることが分かりました。スーパーコンピュータ上で3時間ごとに走るシミュレーションで、**そのデータが無料で公開されている。**FTP サイトがあって、ファイルをすぐにダウンロードできる。非常に奇妙なフォーマットですが、とにかく無料でダウンロードできる。

構築 ― 4つの段階

どこから始めるか。

最初の勝利は、ブラウザに世界地図を表示できたことでした。D3 を使って。「これはすごい。地図さえ出せるなら、このプロジェクトはやれる」と思いました。

次のステップは、それを球体にすること。これも D3 がサポートしています。とても良くできている。

そして気象データを使って、緯度経度グリッドの個々の点に色を付ける。色を塗り始めると、それらしく見えてきます。さらにデータ点と点の間をバイリニア補間で埋めると、滑らかな球体になります。

しかしこれは色だけです。私が欲しかったのは動くアニメーションでした。そしてそれが難しかった。本当に難しかった。

どうやればいいのか理解するために、たくさんのことを試しました。そして最終的に分かった。デモをお見せします。

デモ

これがサイトです。3時間ごとに更新される、ほぼライブのデータです。地球を回転させたり、ズームインしたりできます。いま通り過ぎた気象システムが見えますね。

メニューから他の種類のデータも見られます。

ジェット気流 ——南極上空のジェット気流が見えます。なかなか面白い
波（ocean waves） ——先ほどの嵐のシステムが大きな波を作っているのが分かります
海流（ocean currents） ——これも綺麗ですね

時間を前後に動かせるので、過去に遡ってどう変化したかも見られます。D3 なので投影法も変えられます。こんな変わったものにもできる。ちょっと楽しい。

そして PM2.5。……ええ、**中国、ありがとう。**ひどいですね。

ただ PM2.5 は汚染物質だけではありません。砂や埃、海からの塩分も PM2.5 に分類されます。ですから汚染源がどこなのかを理解することが重要です。

4つのレイヤー

地球は4つのレイヤーでできています。

SVG の地球
HTML5 canvas ——アニメーションが起きる場所
WebGL ——色。最初は canvas でしたが、性能のために WebGL に切り替えました
もう一枚の SVG ——縁を綺麗に整えるため

アニメーションの仕組み

気象データをダウンロードすると、ベクトル場が得られます。この場の上に粒子を描きたい。

やり方はこうです。

一度に短いセグメントを1本だけ描く
毎フレーム、そのベクトルが指す方向を見て、その方向に描く
前のフレームで描いたセグメントをフェードさせる
速度を上げる
粒子を増やす。もっと増やす。もっと増やす

それであの効果になります。

球体の歪みという難題

先ほど「球体の歪みが難題だった」と言いました。なぜ難しいか。

気象データは風を「北向き」「東向き」で示します。しかし画面上の「北」は、場所によって上だったり、右だったり、下だったりする。「東」も同じです。

ですからすべての点について、ベクトルをどう変換するかという歪みを求めなければならない。

東だけを見てみましょう。同じことをします——場を描いて、粒子を1ステップずつ動かして、速度を上げる。……そう、これがこのプロジェクトで一番大変な部分でした。

GPU の arcsine が壊れている

色は最初 canvas で実装しましたが、WebGL に切り替えました。

**最初の実装はこうでした。地球を回転させると、色が消えてしまう。**良くないですね。

そこでフラグメントシェーダを書きます。フラグメントシェーダとは、要するにピクセルの色を作る小さなプログラムで、GPU 上で走ります。GLSL で書きます。すべてのブラウザがサポートしています。

これが最も単純なフラグメントシェーダです。「このピクセルの RGB はこれ」を返すだけ。

風の地図では、すべてのピクセルについて、それがどの緯度経度に当たるかを求め、その緯度経度の風速を調べ、色にマッピングする。

そして、この「XY から緯度経度へ」の部分が難しいのです。

正射図法（orthographic projection） ——地球を眺めるような投影法の洒落た名前です——を使っていて、これには X と Y から緯度経度を計算する公式があります。それを GLSL で、フラグメントシェーダで書ける。素晴らしい。動く。しかも猛烈に速い。

バグ報告

しかし**バグがありました。**あるユーザーがこの画像をメールで送ってきました。

どこがおかしいか分かりますか？

すべてが南にずれているのです。しかも奇妙なことに、**画面上で下にずれているのではなく、「南に」ずれている。**経度は問題なさそうで、ちゃんと合っている。南にずれているのに、**イタリアは大丈夫そう、アフリカも大丈夫そう。**本当に奇妙でした。

そこでフラグメントシェーダを見始めました。この緯度の値に何か問題がある。

項を見ていきます。**問題はここではありえない。経度は正しいし、経度も同じ項を使っている。**同じ、同じ、基本的に全部同じ項です。では、なぜ緯度だけがおかしいのか。

**緯度は arcsine を使っている。**これはユーザーのマシンの GPU のハードウェアに組み込まれた関数です。

「arcsine が間違っているなんてありえるのか」と思いました。そこで小さなプログラムを作って、そのユーザーに走らせてもらいました。

これが、そのユーザーのコンピュータでの arcsine の出力です。CPU で動く JavaScript と、GPU で動く WebGL。一致しません。arcsine が間違っている。

対処

どうするか。**arcsine を近似すればいい。**簡単です。誰かがすでに書いてくれています。掛け算と足し算だけで arcsine を近似する式があります。

それを追加して、自前の arcsine を作りました。

そのユーザーは「ありがとう、これでサイトが使えるようになった。私は地球温暖化を信じていないけどね」と。

……地球温暖化を信じていない人のために、あれだけの作業をしたとは。

教訓

**GPU はゲームのために設計されていて、計算のために設計されているわけではありません。**高価な GPU なら別ですが。そのユーザーの arcsine のハードウェア実装には、ゲームの世界では問題ないが計算では問題になる最適化が入っていたのです。7年落ちの GPU でした。

ただ、**サイトに小さなテストを仕込んで、arcsine が壊れているユーザーがどれくらいいるか調べてみました。約3％です。**訪問者の3％。理由は分かりません。とても奇妙です。

アーキテクチャ ― 月50ドル

サイトの構成についても少しお話しします。

すべて静的です。Amazon S3 に置いて、その前に CloudFlare。CloudFlare は無料の CDN、S3 は安い。サイトの運用コストは月50ドルほどです。

気象データは国立気象局から自前のサーバーが取ってきて、JSON ファイルに変換して S3 にアップロードするだけ。**S3 は狂ったようにスケールするし、維持すべきサーバーが無い。**これが本当に素晴らしい。

反響 ― 4,800万人

スケールする。ではローンチだ。誰か見に来てくれるだろうか。

Twitter と Facebook で、友人に向けて公開しました。これが Google Analytics です。

ローンチ当日：64訪問。そして何も起きない。

「あれだけ作業して、これか」と思いました。

翌日：3万訪問。

そして次の週、その次の週と、バイラルに広がっていきました。

2013年から2017年まで、累計4,800万ユーザー、1億3,800万セッション。

グラフのピークは台風、嵐、熱波です。地球上で何も起きていないときは、トラフィックはごくわずか。ほとんどゼロ。でも何かが起きると、人が来る。

最も忙しかったのは、イギリスを直撃したハリケーンのとき。1日で200万セッションでした。

NASA、アル・ゴア、Forbes などが Twitter で言及してくれました。**テレビでもかなり使われています。**BBC、それから NHK も時々使っています。The Weather Channel も。

学術誌でもアートワークとして使われました。Nature Climate Change など。

**誰かがビールを作りました。**私には教えてくれませんでしたが。そのビールが本当に欲しかった。

そして、とても興味深いアートワークを作った人もいます。これは布です。カナダのアーティストが作った刺繍作品で、彼女は20点を制作して、あの投影法をもとにした個展を開きました。

教訓

① ユーザビリティ ― 誰もメニューの場所を知らない

誰もメニューがどこにあるか分かりません。

自分では気が利いていると思ったのです。綺麗で良いデザインだと。でも**一度いじったことがある人以外、誰もメニューに気づかない。**これは直さないといけません。

② この可視化は、厳密には正しくない

この可視化は間違っています。「間違い」は言い過ぎかもしれません。**誤解を招く、正確でない。**理由を説明します。

これはある時点のスナップショットをアニメーションさせたものです。時計は動いていません。

では、あの動きは何なのか。あれは時間の中の動きではありません。ベクトル場の中の動きです。

粒子を1つ取って軌跡を描くと、流線（streamline） が得られます。流線とは、ある瞬間における線です。

**しかし天気はそう動きません。ベクトル場は時間とともに変化する。**この嵐は右に移動していきます。時計が動いている状態で同じ粒子を描くと、まったく違う軌跡になります。こちらの方が現実に近い。

しかし私の風の地図で見えているのは、最初の方——流線です。

ですから、**これは誤解を招くし、厳密には正しくない。**ただ、人々はそれをあまり気にしません。

でも、**私たちがデータ可視化を作るときには、正直でなければなりません。**ユーザーに対して正直であり、その可視化が何を意味しているのかを正確に説明しなければならない。

私はまだ、これをサイトの訪問者にうまく説明する方法を見つけられていません。

なお、このサイトのローンチ以降、**粒子アニメーションはあちこちで使われるようになりました。**気象局、CNN、The Weather Channel、NHK。よく似たものが出てきています。

③ データが無料であることの意味

地理データは無料。フレームワークは無料。帯域も（実質）無料。Twitter で受けた助けもすべて無料。そして気象データが無料。

無料のデータは、私のような人間——職がなくて、ただ何かを作りたいだけの人間——に、途方もない可能性を開きます。

**これは何十億ドルもの代物です。ロケット、衛星、スーパーコンピュータ。それを私が無料で使える。私たち全員が無料で使える。**これは非常に大きな教訓です。

ただし——**ヨーロッパ気象局、そして日本の気象庁のデータは無料ではありません。**月に数万円かかります。日本の気象庁のデータをぜひ使いたいのですが、手に入れられません。

以上です。ありがとうございました。

質疑応答

以下は、日本語での質問に対する Cameron さんの回答です。**自動字幕が日本語の質問を英語として誤認識しているため、質問文そのものは復元できませんでした。**回答の内容から質問を推測して見出しを付けています。

——このプロジェクトは一人で作ったのですか。制作期間はどのくらいですか。

はい、一人です。7月に始めて、12月に公開しました。

最初に東京だけのプロトタイプを作りました。これがそのプロトタイプですが、ほとんど何もできません。これを見た人たちが「埼玉に住んでいるんだけど」「沖縄に住んでいるんだけど、自分の場所の天気はどう見るの」と言ってきた。それで地球全体を作ることにしたのです。5か月かかりました。

職がないと、時間はいくらでも使えます。

——サイトを作っていて発見した、面白い場所はありますか。

たくさんあります。

南極周辺の風です。気づきにくいのですが、**この海には風を遮る陸地がまったくない。**だから風はひたすら加速していく。「吠える40度（roaring 40s）」と呼ばれていて、常に非常に荒れています。風を減速させる陸地が無いからです。

そして——**南極を見せてくれる天気サイトが、他にどれだけありますか。**たいていは決まった窓しか見せてくれない。でもこれはおもちゃなので、探索して発見できるのです。

もう一つ面白いのが極渦（polar vortex） です。これは成層圏で、いまは北半球の冬なので北極上空に非常に強い渦があります。夏になるとこれが南極側に移ります。探索して面白い場所は、本当にたくさんあります。

——データフォーマットについて教えてください。

差分符号化をするフォーマットです。**PNG に少し似ていて、3点から平面を予測して、その差分（デルタ）を符号化する。**これが非常によくできています。

アーキテクチャ全体にもたくさんの工夫があります。S3 と CloudFlare でサーバー無し、すべて静的。ロジックはすべてブラウザにある。つまり私のではなく訪問者の CPU を使っている。

最後にもう一つ。S3 が非常に安いので、私はデータを消していません。2013年から3時間ごとのデータがすべて残っていて、いま数年分あります。

ありがとうございました。

2017 on Data Visualization Japan