E2D3 を研究で使ってみた感想

Excel 上で D3.js を使うことができる E2D3 を大学の研究活動で使ってみたので、感想を書いてみます.

E2D3 の使い方

[挿入]→[ストア]→E2D3で検索→[追加]

以上の手順で、既存のテンプレートを使うことができます.

Setup E2D3 for development_ja · e2d3/e2d3 Wiki · GitHub

Adding your template to E2D3_ja · e2d3/e2d3 Wiki · GitHub

カスタムテンプレートを使いたい場合は、GitHub のリポジトリから Forkしてカスタムテンプレートを作成できます.

既存のテンプレート使った例

Statistics / scatterplot-matrix-brushing をデータ分析に使ってみました.

このグラフは n個の属性(カラム)が有った場合に、 n * n の組み合わせそれぞれの散布図を表示するものです.

今回の分析では、Time, Lost energy, Convert loss, Air resistance, Regene energy という5つの属性があるため、 5 * 5 = 25 のマトリクスが表示されています.

対角線が y = x となっているのは、自己との相関を取っているためです.

また、ある1つの散布図の中で範囲を設定すると、他の散布図において、設定した範囲のデータセットがどの部分に位置するかを確認できます.

(クリック&ドラッグで範囲を設定できます.)

また、今回は使用していない機能ですが、データセットのラベルを変えることで任意のサブデータセットを作ることができます.

以下がテンプレート既存のデータセットでの表示です.

データ分析において、何かと何かの相関を見るというのは分析の早い段階で取られる手法だと思いますが、これを手間を掛けずさくっと作れるので大変有用だと思います.

Statistics / scatterplot-matrix-brushing のちょっとした TIPS

scatterplot-matrix-brushing の仕様上、同一カラムのデータの中で桁数が違うデータがあると表示が崩れます.

例えば、Time カラムが80~300のようになっている場合、表示が崩れてしまいます.

これを回避するためには桁数を揃えればいいので、Excel 上の Time カラムの表示形式を 3桁0埋めの表示に変更します.

少数でも同一の表示崩れが発生するので、少数桁の桁数を統一しましょう.

カスタムテンプレートを使った例

電気自動車(EV) の移動軌跡とバッテリー残量を地図上にプロットしたカスタムテンプレートです.

バッテリー残量を青から赤(HSL 0°~240°)で表現しています.

もとにしたテンプレートはこちら.

全世界で起こる地震を時間軸で表現したものです.

地図と時間軸というのが今回のカスタムテンプレートにぴったりだったので編集もしやすかったです.

自分は普段 JS をほとんど書きませんし、D3.js に対する知識もありませんが、既存のテンプレート自体があまりコード量が多くないのでなんとなくで編集できると思います.

JS や D3.js をよく知っていらっしゃる方は、より高度で自由なカスタマイズが可能だと思います.

まとめ

データ分析や可視化において重要なのは情報を導き出すことであり、その過程で起こるプログラミング作業はできるだけ負担を軽減したいところです.

E2D3 は有用な既存テンプレートをそのまま用いたり、既存テンプレートをカスタムすることでこの負担を大きく軽減できる可能性があると思います.

特に学術研究においては以下のような利点があると思います.

  • Excel のアドインとして無料で利用できる
  • JS や CSV の編集のみでカスタマイズでき、特殊な実装環境を要求しない

身近な Excel 上で様々なグラフを作ることができるので、ぜひ一度試してみてください.

以上です.

E2D3

Posted by Daiki Kawanuma