logo header
logo header
logo header
logo header
  • 2017.05.17
  • 技術ブログ開発

D3.jsを使ってみよう(初心者向け)

D3.jsというJavaScriptのライブラリについて話をしたいと思います。

「D3.js」とは?

「D3.js」はWebブラウザーでSVG・CSS・HTML5のスタンダードの整合性を破らないで、動的・対話的なデータ可視化を簡単に実現させるJavaScriptライブラリです。
「D3」は「Data-Driven Documents」の省略で、「データ駆動ドキュメント」を意味しています。
「.js」の部分は他のJavaScriptのライブラリと同じく、JavaScriptのライブラリである事を意味しています。

「D3.js」を直接触ってみよう!

「D3.js」は、すごく便利で柔軟性が高いライブラリのため、「D3.js」をベースにして開発された、簡単で使いやすいライブラリも山ほどあります。特に一般的なグラフを生成できるものはとても多いですし(c3nvd3plotly・等)、他にも色々なものがあります。

ただ、それらの既存のライブラリでカバーされてない何かを作りたい場合には、「D3.js」そのものを知らないとどうにもなりません。
できれば「D3.js」を直接触ってみて・使えることを目指してみましょう!

簡単な例

まず、適当なHTMLファイルを作って、下記のコードを実行しましょう:

(..は下記の画像と同じ結果になります:)

jQuery等、他のJavaScriptのライブラリと似ていて、割と簡単ですね。
body要素を捕まえて、そこにdivを追加して、そのdivを赤背景で20x20pxにしますね。
jQuery等と同じく、DOM操作用のfunctionは色々あって、でもその部分だけを紹介してしまうと「jQuery等」とのものと大した変わらないものの印象になってしまうので、「D3.js」ならではの魅力的なところをさらに紹介したいと思います。

動的プロパティ

上記の例をもう少し動的にしましょう。HTMLファイルを下記に更新して下さい:

(..は下記の画像のような結果になるかも知れない:)

はい、そのまさかです。style(と他のDOM操作用のfunction)にfunctionを入れる事ができます。
ページをリロードすると、widthとheightが(ほぼ)randomに変わります(上記は画像なので変わらないけどね)。

動的なデータを使う

動的プロパティをデータと一緒に使わないと実はそれ程意味はありません(全く意味がない訳ではないのですが)。
今回、3つのdivを追加して、divSizesという数値を配列をD3.jsのdataのfunctionに食わせましょう:

(..は下記の画像と同じ結果になります:)

selectAllで全部のdivを捕まえて、divSizesのデータを順番で3つのdivに適用されます。
(最後の「100」は、4番目のdivがない為、どこにも適用されません)
ちょっと試してみるだけでも面白いですね。
もっと実用的に使えるユースケースに近づける為、数値とか文字列ではなく、オブジェクトを食わせるようにしてみましょう:

(..は下記の画像と同じ結果になります:)

少し長くなってしまいましたが、今itemsのデータを変更する事によって、四角の位置とサイズを簡単に変更できる状態になりました。
ただ、事前にdivを用意しないといけないのが面倒くさいですね。これはenterとappendの組み合わせによって解決できます(ついでに、色のプロパティを追加して・divを丸くしましょう):

(..は下記の画像と同じ結果になります:)

やっと意味があるユースケースに近づきました(border-radiusを使って円を作るのはハック臭いですが、それを置いておいて)。これだと、例えば、CSVデータをitemsに読み込んで、バブルチャートのバブルをこんな感じで書き出すということに活用できそうですね。
ただ、
* CSVはどうやって読み込む?
* 上記のenter().appendは具体的にどういう意味?
* ここから素敵なバブルチャートにするはどうやってすれば良い?

そんな疑問も沸いてきたかと思いますが、それはまた後日ご紹介したいと思います。

ひとまず今回は、「D3.js」の基本的な扱い方や「Data-Driven Documents」(データ駆動ドキュメント)というのがどういう動作をするものなのかといった部分について、さらっとご理解いただければ幸いです。

ともに世界をアップグレードできる、そんな日を夢見て。
Upgrade the World!