編集データビジュアルセンターでエンジニアをしている東條です。2020 年に新卒入社しました。私が所属している戦略コンテンツグループでは「日経ビジュアルデータ」というビジュアルに特化したコンテンツを制作しています。

2023 年の 3 月にはオンラインイベントの「【NIKKEI Tech Talk #5】メディア企業のデータ可視化開発　～コンテンツ制作事例～」でコンテンツ制作の裏側について発表しました。この記事では「WebGL や Canvas を使ったデータ可視化コンテンツ開発」のセクションについて、内容を簡単にまとめてご紹介します。

どんなコンテンツを作っているのか

日経ビジュアルデータでは

• チャートを使った読み物系のコンテンツ
• データをインタラクティブに見せるダッシュボード形式のコンテンツ
• 選択肢を選びながら進んでいくクイズ形式のコンテンツ

など、さまざまな種類のコンテンツを公開しています。

これらのコンテンツは主に React や Vue などの UI ライブラリと、データ可視化によく使われる D3.js というライブラリを組み合わせて作っています。

一方で地図や 3D などのリッチな表現を用いたコンテンツも制作しています。Web ならではのビジュアルを使った見せ方をすることで、紙面だけでは伝えきれない情報をわかりやすく伝えることができます。ここでは WebGL や Canvas を使ったこれらのコンテンツについて詳しくご説明します。

日経ビジュアルデータの制作フロー

日経ビジュアルデータのコンテンツ制作にはいろいろな職種の人が関わっています。プロジェクトチームは主に

• 編集者
• 記者
• ディレクター
• デザイナー
• エンジニア

から成り立っており、現場では以下のように役割分担して仕事をしています。

タスク	担当者
データの前処理	記者 or エンジニア
デザイン	デザイナー
HTML, CSS の実装	デザイナー or エンジニア
JavaScript の実装	エンジニア

フロントエンドでのデータ可視化に使う技術

Web のフロントエンドでデータを可視化する際には、要件に合わせて

• SVG
• Canvas
• WebGL

の 3 種類から技術を選定します。

SVG はシンプルな図形の描画に適している一方、Canvas や WebGL は複雑なグラフィックスの描画に適しているなど、それぞれに特徴があります。コンテンツごとに技術を使い分けることで、見せたいものに対して最適な実装ができるようにしています。

WebGL (Three.js) を使ったコンテンツ事例

2022 年の 12 月に公開した「地球を覆う小型衛星 3 万基　 3D で描く新時代」（英語版、日本語版）という記事で Three.js を使ったデータの可視化をおこないました。

このコンテンツは近年小型化している人工衛星のしくみや打ち上げ数の増加について解説した記事です。その中の 2 つ目のセクションで、衛星データベースの軌道データをもとに約 9000 基の衛星の 2022 年 12 月時点の位置を地球の周りに可視化しました。

コンテンツは画面のスクロールに連動してアニメーションする形式をとっており、1959 年以降の衛星数の増加を時系列で表現しています。スクロールしていくと衛星を表す緑の点が徐々に増えていき、2020 年代に特に増えていることが分かります。

また人工衛星の軌道ごとに色を塗り分けることで、軌道の種類による高度の違いを可視化しました。地球の近くを回る緑色の「低軌道衛星」や高い位置を回る水色の「静止衛星」などがあることが分かります。

衛星軌道データの前処理

衛星軌道のデータは TLE というデータ形式で格納されています。Python のライブラリを使い 2022 年 12 月時点の衛星の緯度、経度、高度を算出しました。

次に衛星の座標を (緯度, 経度, 高度) から (x, y, z) で表される形式へと変換しました。こうすることで Three.js の空間内で衛星をプロットできるようになります。

Three.js で地球を表示する

地球の描画と衛星のプロットには Three.js を使いました。Three.js は WebGL の API を簡単に扱えるようにしたライブラリです。

Three.js では形状を定義する「ジオメトリ」と外観を定義する「マテリアル」を組み合わせて 3D オブジェクトを作ります。

地球の 3D オブジェクトを作るためにまずは球体のジオメトリを作りました。Three.js には SphereGeometry という球体のジオメトリが最初から用意されているため簡単に球体を作れます。つづいてその表面に地球の画像を貼り付けました。

次に雲の球体を作り、地球の球体と重ね合わせました。うっすらと雲がかかるようにすることで地球がよりリアルに見えるようにしました。

衛星のパーティクルもジオメトリとマテリアルから構成されます。球体の頂点の座標は SphereGeometry を使うことで自動的に設定できますが、パーティクルは自分で設定する必要があります。パーティクルの頂点を定義するために BufferGeometry というベーシックなジオメトリを作り、そこに衛星の座標を属性として登録しました。マテリアルにはシェーダーという 3D グラフィックスのレンダリング用プログラムを使い色などを設定しました。

これで地球の 3D オブジェクトと人工衛星のパーティクルを描画することができました。

Canvas (p5.js) を使ったコンテンツ事例

次に Canvas を使ったコンテンツの事例をご紹介します。

2022 年の 4 月に公開した「ロシア、口実捏造の軌跡」（英語版、日本語版）というコンテンツで p5.js を使ったデータの可視化をおこないました。

このコンテンツはウクライナ侵攻で拡散された偽情報について、テレグラムという SNS 上での拡散の様子をネットワーク図に可視化したコンテンツです。テレグラムはロシアをはじめとする旧ソ連圏で広く使われている SNS で、投稿を引用したり転送したりすることで情報を拡散できます。

ネットワークはアカウントどうしの関係を表しており、あるアカウントが別のアカウントの投稿を引用・転送した場合にその 2 つのアカウントを線で結びます。どのような種類のアカウントが偽情報の拡散に寄与していたのかを明らかにするために、投稿内容に基づいてアカウントの属性を分類し、色分けしてネットワーク図に表示しました。

またネットワークをスクロールに連動した時系列のアニメーションにすることで、偽情報の拡散の様子を追えるようにしました。最初はロシア政府系のアカウントが偽情報を投稿し次第に拡散工作用とみられるアカウントなどが大量転送して拡散していることが分かります。

テレグラムのデータの収集

投稿のデータはテレグラムのデータを提供しているサービスの API を使って収集しました。まず記者がテレグラムに投稿されているいくつかの偽情報を特定し、次にその投稿を引用・転送した投稿を収集、さらにその収集した投稿を引用・転送した投稿を収集、......という処理を繰り返すことで拡散のデータを取得しました。

ネットワークの可視化

ネットワーク図は「エッジ」と「ノード」から構成されます。アカウントどうしを結ぶ線をエッジ、アカウント自体をノードといいます。ノードに属性を与えて色分けなどをすることで、どのようなアカウントが拡散に寄与していたのかを可視化できます。

ネットワーク図を描画する際にはノードが重なったり離れすぎたりしないように配置の計算をする必要があります。グラフ配置の計算ライブラリとして JavaScript だと d3-force、Python だと NetworkX などがありますが、今回はフロントエンドでの計算の負荷を減らすために Python で事前にグラフ配置を計算しました。

p5.js でネットワーク図を描画する

ネットワーク図の描画には p5.js を使いました。p5.js はクリエイティブコーディングなどに使われる JavaScript のライブラリで、Canvas の API を簡単に扱えるのが特徴です。

p5.js には最初に 1 度だけ実行される setup 関数と毎フレーム繰り返し実行される draw 関数があります。draw 関数の中で図形の描画などのアニメーションに関わる処理を書いていきます。

ellipse という関数で円を描画し、line という関数で線を描画します。引数にはノードの座標を指定します。

エッジの見栄えがよくなるように色のグラデーションをつけました。グラデーションは p5.js では実現できなかったため、Canvas API を直接利用しました。

さらにスクロールに連動してエッジが伸びていくようなアニメーションをつけました。エッジの先端の座標は始点と終点の位置をスクロール率で補間することで求めました。p5.js には座標の x, y をベクトルとして扱える機能があり、2 つのベクトルの座標を補間する関数を使うことで簡単に位置を計算できます。

以上の処理を組み合わせることでネットワーク図が完成します。

まとめ

日経ビジュアルデータではシンプルなチャートを使ったコンテンツだけでなく、WebGL や Canvas を使ったビジュアルに特化したコンテンツも作っています。Three.js や p5.js などのライブラリを使うことで、比較的低い学習コストでこれらの表現を実現できます。

日経のビジュアルコンテンツに興味を持っていただけたらぜひ「日経ビジュアルデータ」のページをご覧ください。今回の内容のスライド資料はこちらでご覧いただけます。