読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

D3.jsがとっつきにくい理由

D3.js RWD WebDev

 D3.jsに取り組むことを再開した。理由は、以前書いた記事( 自分のウェブ制作のパッションがあるとすれば - Birth of the Fool)を参照してください。D3.jsについて言われるのは、「学習コストが高い」ということなので、再び本格的に取り掛かるにあったってその辺のことを書いてみたい(太字の部分だけ連続して読むと鉄拳の昔のネタみたいなリズムで読めます)。

D3やろうとしてるのにSVGが邪魔する

 D3を書こうとしたらまず引っかかるのが、SVGへの理解だ。特に、CSSと違うスタイル属性名が多いこと、タグとそのプロパティを形ごとに覚えなくてはいけないこと、最後に、gタグの扱いが少し特殊なことが挙げられる。ここ(SVG Tutorial)とか、充実しているチュートリアルサイトはあるけれど、新しく学ぶのは骨が折れる。

なんかこれ、エクセルでも良いんじゃね?ってなっちゃう

 イベントが絡むようになって、データビジュアリゼーションをUXとして提供できるようになるまでは、エクセルのグラフ化ツールで作ったのと変わらない(あるいはそれよりも劣る)グラフしか作れないという状況が続く。ここで、どうモチベーションを維持するかが難しい。

D3.js固有のメソッド(の組み合わせ)が理解しにくい

 例えば、enter()やdata()、あるいはdomain()とrange()のコンビ。他にもrangeRoundBands()というような関数のこと。少しでもかじったことがある人ならばわかるはず。

元のデータの扱いが厄介だ

 入門書(あるいはチュートリアル)は扱うデータをたいてい配列で済ませてしまう。data()メソッドの説明がそもそもややこしいので、そこを煩雑にしないためには必要な措置だ。けれど、実際のプロジェクトでは、ただの配列をそのまま扱うということは無く、最低でもCSVからデータを引っ張ってくることくらいは必要だ。
 このcsv()メソッドやtsv()メソッドですら厄介なのに、さらに、サーバサイドとの連携を考えると、結構頭が痛くなってくる。
 全然関係ないことだけれど、入門ということで関連していうと、「最初はCSSをd3.jsでいじってみることから始めましょう」という導入をするものがある。この後にSVGがでてくることになるのだけれど、いち入門者としてここで非常に混乱したので、できれば最初からSVGで教えて欲しいと思う。

やっとのことでグラフかけても、RWD対応について考える必要がある

 RWD対応サイトの場合。SVGで絶対値で指定してしまった場合、その領域だけがはみ出てしまうことになって見っともない。これは自分自身も解決できていない問題。けれど、ここ(javascript - Whats the best way to make a d3.js visualisation layout responsive? - Stack Overflow)を見ると、resizeイベントに関連付ければ意外と簡単に解決できそうなのだが、どうなのだろうか。

D3以前にデータビジュアリゼーションの基礎について知らなくちゃいけない

 これは主に、統計学の基礎的な知識とプレゼンテーションのノウハウのことを言っている。例えば「中央値と平均値の違いについて」とか「散布図が有効なケースはどのようなものか」などについて知らないと、頓珍漢なデータ可視化になってしまう。ちなみに、この辺のことはエンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus)が割と詳しい。

ただ描いて終わりじゃなくて、ユーザビリティの考慮も忘れちゃいけない

 入門のチュートリアルなどで、お題のグラフを描くことができたとしても、それがそのまま公開に値することは少ない。グラフが見る人の理解を促すためには、わかりやすいものではないといけない。このためには、例えば折れ線グラフなら、目盛り(このaxis関連もまた厄介)、凡例を示す領域、x軸とy軸のラベルなどが必要になってくる。データが多いものになれば、拡大機能や線上の値の部分に点を打って、そこをhoverしたらツールチップが表示される機能を追加するとさらに良いものになる。