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

「エンジニアのためのデータ可視化 実践入門」を読みました

エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus)

エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus)

読みきりました。はぁー学生の時にこの本読みたかった...

この本には以下の3点の要素があります。

  • データ可視化に関しての入門
  • D3.jsの入門
  • D3.jsによる可視化の実践

これらのどれかに興味があれば読んだほうがいいです。それぞれ紹介していきます。

データ可視化に関しての入門

可視化は表現方法の一つであり、コミュニケーションを円滑にするためのツールです。そして各グラフ一つとっても本来の使い方があり、間違った使い方をすると円滑になりにくいです。

一つ僕が大学生時代に誤用していたグラフの例を紹介します。

f:id:yosuke_furukawa:20140518230347p:plain

precision(適合率)とrecall(再現率)という情報検索の領域ではポピュラーな尺度の一つですが、これを比較する時に折れ線グラフを使っています。

折れ線グラフは時系列などの"間隔値"として表現できるものをx軸に置くのが普通ですが、大学生の時の僕は誤用してました。何かで指摘された時に直しましたが、こういうグラフが求める本来の使い方をちゃんと知らないと正しく意図が伝わりませんし、誤解を生みます。

本書では折れ線グラフや棒グラフといったポピュラーなグラフに対してdosとdontsを教えてくれます。学生の時に読んでおけばグラフの使い方で僕が誤用することもなかったわけです。

というわけでこの部分だけでもかなりオススメです。今一度自身が利用しているグラフの活用例は正しいのか、可視化手段としてマッチしているのか、読んでおさらいすると良いでしょう

D3.jsの入門

f:id:yosuke_furukawa:20140519005020p:plain

D3.jsはここ最近かなり利用されている人気が高いライブラリです。
InfluxDBはそのグラフ化にD3.jsを使ってますし、最近流行りのIaaSであるDigitalOceanの管理画面にあるリソースグラフもD3.jsです。

SVG操作ができるため、グラフ化に活用される事が多いですが、実際D3.jsの汎用性は高いです。

本書ではD3.jsのAPIリストやイントロも載っているので、D3.js興味あるけどまだ使ったこと無いって人のためにもなります

D3.jsによる可視化の実践

本書には、D3.jsでの可視化のためのケーススタディが12例載っています。
いわゆる通常の折れ線グラフの表現からリアルタイム性のあるグラフの表現まで幅広く紹介されてます。
この12例はD3.jsを使ってグラフを表現しようと思った時の逆引き辞典にもなります。

自分も昔、dstat + fluentd + websocketでリアルタイム性のあるリソース監視アプリを作ってみましたが、そういうグラフを表現するのもD3.jsなら難しくないです。

f:id:yosuke_furukawa:20120812000230p:plain

エンジニアのためのデータ可視化入門のまとめ

ここまで話したところでわかったかと思いますが、入門者にとってはものすごく良い導入ですが、既に興味を持って進めている人にとっては本書では物足りないかもしれません。とはいえ、逆引き辞典としても使えるので、手元に置いておくのはある程度意味があると思います。

せっかく本書を読んで、D3.jsに触れたので、これを機に同じく最近触ってる、InfluxDBのカスタマイズグラフでも作ってみようかと思ってます。

Enjoy visualizing!!!