d3jsを使ってみた@wcan lt大会

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

たぶん、これしかない！