JavaScriptの可能性

JavaScriptライブラリ「D3.js」について

・自己紹介

・発表の目的と経緯

・D3.jsとは

・Gallery

・参考文献また参考サイト

・まとめ

もくじ

2

発表の目的と経緯

【目的】

・画面上で動くJavaScriptの1つの方法として紹介をしたいと思います。

こんなものもあるんだと知って頂けたらと思います。

3

【経緯】

現場で「AngularJS」というJavaScriptフレームワークを使用しています。「AngularJS」の「angular-dc」(angular-dcはディレクティブ)で使えるグラフ描画ライブラリに、「dc.js」というものがあり、それが「d3.js」のラッパーライブラリで、細かいオプションを指定する際に「d3.js」の記述方法の知識が必要になったのがきっかけです。

発表の目的と経緯

4

発表の目的と経緯

JavaScript

AngularJS(フレームワーク) dc.js(ライブラリ)

angular-dc

(ディレクティブ)

D3.js(ライブラリ)

5

6

D3.jsとは

D3.jsとは

正式にはデータ・ドリブン・ドキュメントと言い、その頭文字をとってD3と呼ばれているものです。

D3: Data Driven Document

データに基づいてドキュメントを操作するための JavaScript

ライブラリでHTMLやSVG、CSSを使ってグラフを描画します。

7

・jQueryと書き方が似ている。

・他のChartライブラリより柔軟性が高い。

・JSON、GeoJSON、XML、CSV、TSV(タブ区切りテキス

ト)、JavaScriptの配列などの様々な形式のデータに対応。

D3.jsとは

8

・jQueryと書き方が似ている。

・他のChartライブラリより柔軟性が高い。

・JSON、GeoJSON、XML、CSV、TSV(タブ区切りテキス

ト)、JavaScriptの配列などの様々な形式のデータに対応。

D3.jsとは

9

なぜ他のChartライブラリより柔軟性が高い？

そもそもD3.jsはChartライブラリではありません。

一般的なChartライブラリと呼ばれるものはデータを用意し、

グラフの種類や色をオプションで指定すれば描画してくれま

す。

(テンプレートが用意されているということ。)

10

なぜ他のChartライブラリより柔軟性が高い？

D3.jsにはテンプレートのようなものがないので、

自分で全て指定する必要があります。

つまり他のChartライブラリにはできない自由度の高いカス

タマイズが可能になります。

11

Gallery

・Gallery

https://github.com/mbostock/d3/wiki/Gallery

・実際に使えそうな例

http://d3pie.org/website/examples/refresh.html

http://bl.ocks.org/mbostock/3750941

http://www.findtheconversation.com/concept-map/

http://ggruiz.me/explosions/ 12

・出来すぎていて気持ち悪いやつ

http://mbostock.github.io/d3/talk/20111116/force-

collapsible.html

http://christophermanning.org/gists/1734663/

http://bl.ocks.org/nswamy14/df13d67b6efeb19eb640

http://bl.ocks.org/peterlozano/480f90947c6e08be6b95

Gallery

13

・さらに出来すぎていて気持ち悪いやつ

http://d3shooter.herokuapp.com/

http://bl.ocks.org/mbostock/1123639

http://earth.nullschool.net/jp/#current/ocean/primary/waves/ov

erlay=significant_wave_height/orthographic

http://nbremer.github.io/exoplanets/

http://d3.artzub.com/wbca/

Gallery

14

◼参考文献

●インタラクティブ・データビジュアライゼーション

D3.jsによるデータの可視化

著 Scott Murray(スコット・マレイ)

＊参考文献また参考サイト＊

15

◼参考文献

データビジュアライゼーションのための

D3.js徹底入門

著 古籏 一浩(ふるはた かずひろ)

＊参考文献また参考サイト＊

16

◼参考サイト

●公式ドキュメントhttps://d3js.org/

●Galleryhttps://github.com/mbostock/d3/wiki/Gallery

●日本語ドキュメントhttp://ja.d3js.node.ws/

＊参考文献また参考サイト＊

17

◼参考サイト

●GUNMA GEEKhttp://shimz.me/blog/d3-js/2977

●D3.jsにあてはまらないことhttp://postd.cc/what-d3js-

is-not/

●D3.jsの使い方とグラフを作成するサンプル

http://www.tam-

tam.co.jp/tipsnote/javascript/post4913.html

＊参考文献また参考サイト＊

18

前述した通り、D3.jsは柔軟性が高いため、学習コストがものすごく高いです。

しかし、Chartライブラリに比べるとできることの幅が広がります。

どういうグラフを描きたいかによってChartライブラリを使うか、D3.jsを使うか選択するといいと思います。

まとめ

19

D3.jsの公式ドキュメントには、サンプルが豊富にあるので、眺めているだけでも楽しいです。

またJavaScriptでここまでできてしまうのかと個人的に感動してしまいました。

まとめ

20

私の好きな名言にこんなものがあります。

『人が空想できる全ての出来事は起こりうる現実である』

D3.jsもやりたいことを可能にする素敵なツールだと思うので、少しづつ学習したいと思います。

まとめ

21

Imagination means nothing without doing.

おわり

22