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