about D3.js

by Yosiya Hinosawa
スライドの URL: http://kt3k.github.com/d3intro/

D3.js?

D3.js とは・・・

  • ブラウザ向け javascript のライブラリ
  • Data Visualization 用途 (グラフ、チャート etc...)
  • minify して 140+KB

D3.js

どういうことができるの？

examples

streamgraph

word cloud

Forced Directed Graph

統計地図

production な例

github.com

calendar view

NYTimes.com

The Facebook Offering: How It Compares - NYTimes.com

背景

作者

Mike Bostock

  • もともと Protovis という別な Data Viz Lib 作ってた。(js)
  • 2010年から d3.js を作ってる。
  • 今はNY Times がスポンサーになっている。($$$)

特徴

(ライブラリとしての)

  • all in namespace d3
  • 学習曲線は急坂型
  • 宣言的に書ける
    • = not 手続き的
    • = if とか for が(ほぼ)無い。
    • = コード量が増えてもコードの複雑さがあがりにくい。

コード

(雰囲気のみ)

Selection

css 互換セレクターで DOM を選択

d3.select('body').selectAll('div')

上の式の返り値が Selection オブジェクト

Data Binding

Selection に対して data を bind する。


array = [4, 3, 5, 6, 10, 14]

d3.select('body').selectAll('div')
    .data(array) // selection に data を bind

Data-Driven Update

data を使って Selection (DOM) を update する


array = [4, 3, 5, 6, 10, 14]

d3.select('body').selectAll('div')
    .data(array)
    .style('width', (d) -> d * 10)
    .style('height', 20)
    .attr('class', 'bar')

.style メソッドは css 属性
.attr メソッドはタグの属性を更新する。

属性の値に関数を入れた場合は、bind されたデータを引数としてその関数が呼ばれ、その返り値がセットされる。

Enter と Exit

Selection の dom の数と data の数が合わない場合

data が余ってる分 = enter

dom が余ってる分 = exit

Enter と Exit

d3.select('body').selectAll('div').data([1..100])
    .enter().append('div')
    # data にあう分の div が生成される。

d3.select('body').selectAll('div').data([1..10])
    .exit().remove()
    # data にあわない分は .remove する。

dom と data の差分への操作がメソッドチェインだけで書ける。

Transitions

アニメーションの記述

selection
    .style('width', 100)
    .transition()
    .style('width', (d) -> d * 10)

.transition()にチェインさせた内容がアニメーションする。

ここまでの知識で作ってみたデモ

Library Overview

(私見)

  • Core 　　　← Selection, Transition など
  • Layout 　　　← 各種レイアウト (大技系)
  • Geo 　　　← 地図関連
  • Utils 　　　← その他便利なの

Layouts

 
d3.layout

  • core だけだと実現の難しいレイアウトをつくるためのモジュール

Cluster layout

Pack layout

Partition layout

Treemap layout

Bundle layout

Chord layout

Geo

d3.geo

地図データを表示するためのモジュール

TopoJSON という独自形式を使う。

Geo

(私見)

地図データ自体が結構ややこしい。

お手軽感は無い印象

まとめ

デモがすごい！

人気がすごい！

文法がイケテル！

Resources

O'Reilly

        

Slides available at:

http://kt3k.github.com/d3intro/