d3jsを使ってみた@wcan lt大会
TRANSCRIPT
d3jsを使ってみた
2012/11/18(Mon)WCAN mini Markup vol.12
「ライトニングトーク大会HTML5、CSS3、JavaScript」
自己紹介
上田拓也豊橋技術科学大学大学院電子・情報工学専攻博士後期課程3年
twitter : @tenntennblog: http://u.hinoichi.net
GolangJavaScript
HTML5Java
SVG
d3jsとは?
DataDrivenDocument
=データを中心としてドキュメントを扱
う?
D3
● データをうまいこと視覚化/
可視化するためのJSのライブ
ラリ
d3js
● 操作が簡単
○ JQueryライク
● 形式いろいろ
○ HTML5/CSS3/SVG● データ読み込
○ JSONなど
具体的には何がで
きるのか?
お決まりの例:
棒グラフ
<div id="chart"></div> HTML
var chart = d3.select('#chart');var data = [10, 20, 30, 40];chart.selectAll("div") .data(data) .enter() .append("div") .style("width", function(d){ return d * 10 + "px"; }).text(function(d) {
return d; }); JavaScript
※CSSは省略
http://jsfiddle.net/uedatakuya/r8s2B/
おもしろくない...
もっとおもしろい奴を!
https://github.com/mbostock/d3/wiki/Gallery
http://bl.ocks.org/1256572
色んな見せ方をするチャート
動的にチャートが変化する
http://mbostock.github.com/d3/talk/20111018/collision.html
衝突判定
四分木を使った衝突判定
http://www.jasondavies.com/animated-bezier/
ベジェ曲線のアニメーション
ベジェ曲線の仕組みが良くわかる
結局なんで使うの?
複雑なデータ
グラフ,チャート...
視覚化可視化 より分かり易く!
視覚に訴える!
SVGのライブラリとし
ても便利!
● svgとHTMLで名前空間が違う
● 要素の生成めんどくさい
○ 名前空間指定して生成
● knockoutJSとかちゃんと動かない
○ テンプレートエンジンを改造しなきゃダメ
データと視覚効果の
バインディング
データの変更を自動
的に反映させたい
● d3jsではデータが変わっても見た目は連動しな
い
● データが更新される度にd3.selectしてstyleとかし
て変更する
めどい!見通し悪い!
でも...
{ x: 100, y: 100, width: 50, height: 50, angle: 0, color: "red"}
{ x: 100, y: 100, width: 50, height: 50, angle: 45, color: "blue"}
変更...
連動しない!
視覚化
データの変更を自動
で通知するライブラリ
を作った作ってる
https://github.com/tenntenn/d3binding
{ x: 100, y: 100, width: 50, height: 50, angle: 0, color: "red"}
{ x: 100, y: 100, width: 50, height: 50, angle: 45, color: "blue"}
変更...
通知!
視覚化
監視... ライブラリ
http://jsfiddle.net/uedatakuya/89UsU/
DEMO
参考サイト
● d3js○ https://github.com/mbostock/d3/wiki
● d3jsではじめるデータビジュアライゼー
ション入門
○ http://www.slideshare.net/kadoppe/d3js
参考書
オライリー(英語)Getting Started with D3http://shop.oreilly.com/product/0636920025429.do
たぶん、これしかない!