Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
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