データビジュアライゼーション 毎月もくもく会 vol. 6
E2D3関連のもくもく会に行ってきました!
もくもく会自体も初参加だったのですが、とても良くして頂き、楽しんで作業ができました.
開催場所は大久保にある株式会社リジョブ様でした.
芝(人工)が敷き詰められていて、とても開放感あふれるスペースでした.
E2D3について
E2D3 を主催されている五十嵐さんに直接質問にお答え頂くことができました.
(以下、自分の解釈が混ざっている部分もありますのでご了承ください)
エンドユーザと開発者(Contributor)の2つ.
現在はContributor向けの活動が主であるが、エンドユーザ向けのプロダクトが目指す姿.
グラフのテンプレートに依存する.
いくつかの設定ができるテンプレートも存在するが、できないテンプレートも存在する.
要望があれば GitHub に issue を出して欲しい.
現状はできない.
E2D3 の活用法は大きく2つ考えられ、Web 上での公開と Power Point での利用.
開発上、前者を優先している.
今後、Power Point 上で E2D3 を利用できるようになるかもしれないが、それには時間が掛かる.
Webページを見ると、既に熟成されたプロダクトでプログラミングを全く知らないエンドユーザにも使いやすいツールに見えるかもしれませんが、細かなカスタマイズをするためには自前でJSなどを書く必要があります.
しかしながら、既に優れたテンプレートが多数存在するので、ピンポイントで合うテンプレートが見つかればそのまま利用することもできると思います.
今回のもくもく会でやったこと
e2d3/e2d3-contrib/scatter はExcelのセル上にラベル名が埋め込まれてるので編集可能、e2d3/e2d3-contrib/barchart-javascript は埋め込まれていないので編集不可能と、テンプレートごとに変わりますか?
— Daiki Kawanuma (@Santea3173) 2016年5月29日
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 を拡張するという点で恩恵を受ける人の数が計り知れない、ものすごいポテンシャルを秘めたプロダクトだと思うので開発が推進されれば嬉しいです.
また、ほんの少しでも何か貢献ができればと思いますので、ぜひ今後ともよろしくお願いします!
ディスカッション
コメント一覧
まだ、コメントがありません