データビジュアライゼーション 毎月もくもく会 vol. 6

E2D3関連のもくもく会に行ってきました！

もくもく会自体も初参加だったのですが、とても良くして頂き、楽しんで作業ができました．

開催場所は大久保にある株式会社リジョブ様でした．

芝(人工)が敷き詰められていて、とても開放感あふれるスペースでした．

E2D3について

E2D3 を主催されている五十嵐さんに直接質問にお答え頂くことができました．
(以下、自分の解釈が混ざっている部分もありますのでご了承ください)

E2D3が対象とするユーザ層は？

エンドユーザと開発者(Contributor)の２つ．
現在はContributor向けの活動が主であるが、エンドユーザ向けのプロダクトが目指す姿．

グラフごとに細かくカスタマイズ(軸やラベルなど)を行えるか？

グラフのテンプレートに依存する．
いくつかの設定ができるテンプレートも存在するが、できないテンプレートも存在する．
要望があれば GitHub に issue を出して欲しい．

Excel 上で作成した E2D3 のグラフを Power Point で利用(画像としてでなくJSで埋め込み)できるか？

現状はできない．
E2D3 の活用法は大きく２つ考えられ、Web 上での公開と Power Point での利用．
開発上、前者を優先している．
今後、Power Point 上で E2D3 を利用できるようになるかもしれないが、それには時間が掛かる．

Webページを見ると、既に熟成されたプロダクトでプログラミングを全く知らないエンドユーザにも使いやすいツールに見えるかもしれませんが、細かなカスタマイズをするためには自前でJSなどを書く必要があります．

しかしながら、既に優れたテンプレートが多数存在するので、ピンポイントで合うテンプレートが見つかればそのまま利用することもできると思います．

今回のもくもく会でやったこと

Example/Simple Bar Chart の軸ラベルが変更できないことが不満だったため、その編集をやらせて頂きました．

普段JSを触らない自分ですが、小副川さんに手取り足取り教えて頂きながらなんとか完成させることができました．

富士通データキュレーター小副川氏が目指す「『E2D3』がデータ探索的な会話のハブになる未来」

小副川さんは、de:codeで戸倉さんがデモをなさっていたE2D3のテンプレートを作成されていたりと、まさにガチな方です！
(長い間お時間を頂きありがとうございましたorz)

こちらが元のテンプレートです．
Y軸のラベルが”age”で埋め込んであり、編集することができません．

また、X軸にはラベルが存在しません．

なので、X軸、Y軸にラベルを追加し編集可能にすることを目標としました．

coloses #192 · e2d3/e2d3-contrib@a22cd2f · GitHub

編集したコードは上記になります．

データフォーマットを変えたり、X軸にラベルを追加したりしています．

改変後のグラフが上記になります．

X軸、Y軸のラベルが編集可能になりました．

この程度のコード量でも3時間以上掛かってしまいました…；

(小副川さんはものの数分で方針を決めて書き上げていらっしゃいました)

JS、難しかったです…

今後作りたいもの

これは自分が WPF で作った可視化システムのヒートマップなのですが、こんな感じのヒートマップを実装できたらなと思っています．

Excel にもヒートマップはあるのですが、カクカクした感じで全然ヒートマップっぽくないのですよ．

もう少しかっこいい目のやつを D3 なら実現できるはずです、たぶん．

X, Yの系列を渡せばスタージェスの公式を使って適切な階級数に分割して良しなにヒートマップにしてくれる、的なのがいいかなと思っています．

あとはシリーズを入れ替えてアニメーションできるとかできれば最高だなって感じです．

だいぶ長い道のりな気がしますが、まずはJSに慣れなくては…！

まとめ

初もくもく会でしたが実質、超絶講師によるE2D3ハンズオンのようで大変ありがたく、光栄でした．

特に、一つ一つ質問に答えて頂いた五十嵐さん、手取り足取り教えて頂いた小副川さんのお二方には感謝感激です．

E2D3 は Excel を拡張するという点で恩恵を受ける人の数が計り知れない、ものすごいポテンシャルを秘めたプロダクトだと思うので開発が推進されれば嬉しいです．

また、ほんの少しでも何か貢献ができればと思いますので、ぜひ今後ともよろしくお願いします！

E2D3

Posted by Daiki Kawanuma