Bar Chart Race のテンプレートを追加したい

[HiromuIshikawa]

現在、Bar Chart Race （棒グラフの順位が時系列でグリグリ動くやつ）と言われる visualize 手法のテンプレート追加にトライしています。 D3での実装例である https://observablehq.com/@d3/bar-chart-race-explained を参考に実装を試みていますが、上記例で利用している D3 は v5 となっているので、以下のどの方針にするか、できるか悩んでいます。

1. コアリポジトリ側のv5対応を待つ（ https://github.com/e2d3/e2d3/issues/53 ）
2. テンプレートのフォルダ内で一時的に v5 の d3 を読み込めるようにする。
3. v3 対応コードに書き直す。

理想的には、2 が可能なら一時的に2で対処しておき、1が完了時点で正規のv5利用方法に修正するのが良いのではと考えていますが、一時的に別バージョンのd3を当該テンプレートのみで読み込む方法はあるのでしょうか。。

v5で書かれてるものを、v3にわざわざ書き直すのは筋が悪い and 手間が大きいことから、なるべく避けたいと考えているので、何か知見をいただければと思います。

[hiracky16]

@HiromuIshikawa ちょうど手元に「コアリポジトリ側のv5対応を待つ」の修正版があるのでこれのテストも兼ねて v5 が動くか確認したいのです！ ブランチを push してもらえるとこちらで確認します！

[HiromuIshikawa]

@hiracky16 なるほど！実装例をe2d3用に書き換えたものは、まだちょっとできてないので、出来次第ブランチpushします！！

[JunichiWatanuki]

このグラフは、いろんな人が活用できそうでいいですね♪

[HiromuIshikawa]

@hiracky16 @JunichiWatanuki https://github.com/HiromuIshikawa/e2d3-contrib/tree/bar-chart-race 上記のブランチにbar chart race のテンプレートを追加しました。

ひとまず、v5を読み込めるかどうかの確認には上記ブランチが利用できるかと思います。

ちなみに、当初参考にしていたものとは異なり、下記の実装例を参考にしています。 https://bl.ocks.org/jrzief/70f1f8a5d066a286da3a1e699823470f

ただ、上記例を参考にした現状のコードは何点か改善点があります。

1. data.csv の形式
2. カテゴリごとの色分けを可能にする。

特に1. について、現状最初に読み込む data.csv がすでにかなり前処理されたものとなっており、利用者が同じ形式のデータを用意するのが難しそうです。なので、 e2d3 のテンプレートとして実用する上で前処理部分をテンプレートコード内に組み込む修正は必須かなと考えています。

[JunichiWatanuki]

@HiromuIshikawa v5のテンプレ、ありがとうございます。 csvの形式ですが、非開発者むけなのでjsonが使えないという苦しみ、悩ましいですね。

手間がかかるのですが、csv（表形式）はIT不慣れ者に対する親和性が高くできる（広く使われやすくなる）ので、何か良い案が浮かぶといいですね。

ということで、自分からもアイデアだしということで、下記にCSV提案をしてみます。 (カラム可変方式です）

先頭行（表頭部分）に、複数行を割り当てる＆カラム数を可変にする方式です。 E2D3では下記のグラフなどで複数行の表頭を割り当てています。 https://github.com/JunichiWatanuki/e2d3-contrib/blob/master/bipartite-graph-original/data.csv

name1	name2	…	nameX
category	Beverages	Technology	…	Media
2000-01-01	value	value	…	value
2000-01-02	value	value	…	value
2000-01-03	value	value	…	value
2000-01-04	value	value	…	value
2000-01-05	value	value	…	value
2000-01-06	value	value	…	value
2000-01-07	value	value	…	value

前処理については、例えばvalueがNULLみたいなケースが悩ましいですね。 NULLだったら非表示にするという考えだと 　1)NULLが中抜けしている場合 　2)例えば2000-01-04以降がすべてNULL（その会社が消滅） みたいなものを可視化する際に、利用者側が希望する表現とのギャップが出てしまう可能性が考えらてれ、悩ましい。

動作確認は、週末にチャレンジしてみようと思います。

@hiracky16 今のところ、下記を使って試験するのがよいと理解をしています。 https://github.com/e2d3/e2d3/tree/feature/read-module-from-manifest （もし理解が違っていましたら、ご指摘を頂けるとありがたいです）

[hiracky16]

@JunichiWatanuki 僕も同じ理解でいます！ 週末に自分の実装も含めてテストしたいです。

[hiracky16]

実装方針を以下のように変えてやってみたところ表示されることを確認できました！ https://github.com/e2d3/e2d3/issues/53#issuecomment-623055237

ただ、スタイルが崩れてしまうので要修正。