Data Visualization

1. Data Visualizationしてみた
[ D3.js編 ]
LT会 2016/03/17
Wedding Park
東

2. 自己紹介
呼称：あずまん とか あずめん
サイトのパフォーマンスチューニング
↑
ウエディングパーク 新卒4期生
メディア開発本部所属エンジニア1年目
2

3. 気になっていること
Data Visualization
人間が目で見て、データの中身を理解する
→ データを何らかの手段で可視化する必要がある
→ そのための手法
3

4. やり方はいろいろある
4

5. D3.jsでやってみた
5

6. http://engineer-blog.cyber-
z.co.jp/entry/2014/03/12/112616
「D3.js 使ってみた」って…需要あるのか？
と思ったら、むしろ専門の方ですやん・・・
でも、めげずに話をしたいと思います
6

7. データをブラウザで
可視化するためのライブラリ
Data-drivenなDOM操作
＋ ビジュアライズ用のコンポーネント
7

8. やったこと
D3.jsを使って、動的にグラフを描画してみた
可視化対象
人口動態調査_人口動態統計_確定数_婚姻_年次_2014年
8

9. HTMLはSimple
9

10. cssはsvgとかの装飾くらい
10

11. JSは後ほど
11

12. Demonstration
12

13. あれ？簡単じゃない…面倒くさい・・・
13

14. Javascriptの処理(1) 描画位置
14

15. Javascriptの処理(2) 軸設定
15

16. Javascriptの処理(3) 描画
16

17. 実装してみて感じたこと
実装前イメージ
データを渡したらきれいな形で簡単に描画してくれる
実装して感じたこと
データを加工
→ データのためにDOM操作
→ データドリブンって大変・・・
17

18. D3.jsって簡単…じゃないのか！？
ビジュアライズ用のコンポーネント
「データ」と「チャートの種類」から
「どこに描画すればいいか」を計算する機能だけ
Data-drivenなDOM操作
情報をどう画面に落とし込むかは実装側に任されている
でも、１から実装よりは全然簡単に描画できる！
インタラクティブなものにするには工夫が必要
⇒ D3.jsはSVGを生成して描画する点が楽！
18

19. まとめ
D3.jsで可視化してみた
・データドリブンにDOM操作をして
・ブラウザにデータを可視化できる
⇒インタラクティブなものが表現できる！！
19

20. ご静聴ありがとうございました
20