0
d3jsを使ってみた             2012/11/18(Mon)      WCAN mini Markup vol.12         「ライトニングトーク大会      HTML5、CSS3、JavaScript」
自己紹介上田拓也豊橋技術科学大学大学院電子・情報工学専攻博士後期課程3年twitter : @tenntenn                              Golang                              J...
d3jsとは?
DataDriven         D3Document=データを中心としてドキュメントを扱う?
d3js● データをうまいこと視覚化/ 可視化するためのJSのライブ ラリ
○ JQueryライク● 形式いろいろ ○ HTML5/CSS3/SVG● データ読み込 ○ JSONなど
具体的には何がで きるのか?
お決まりの例:棒グラフ
<div id="chart"></div>​     HTMLvar chart = d3.select(#chart);var data = [10, 20, 30, 40];chart.selectAll("div")     .data...
おもしろくない...
もっとおもしろい奴を!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"}​                 ...
データの変更を自動 で通知するライブラリ     を作った作ってるhttps://github.com/tenntenn/d3binding
{     x: 100,     y: 100,     width: 50,             視覚化     height: 50,     angle: 0,     color: "red"}​                 ...
DEMOhttp://jsfiddle.net/uedatakuya/89UsU/
参考サイト● d3js  ○ https://github.    com/mbostock/d3/wiki● d3jsではじめるデータビジュアライゼー  ション入門  ○ http://www.slideshare.    net/kadop...
参考書オライリー(英語)Getting Started with D3http://shop.oreilly.com/product/0636920025429.do  たぶん、これしかない!
Upcoming SlideShare
Loading in...5
×

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

1,035

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,035
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "D3jsを使ってみた@wcan lt大会"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×