• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
D3.js と SVG によるデータビジュアライゼーション
 

D3.js と SVG によるデータビジュアライゼーション

on

  • 9,804 views

2013/03/23 大阪にて開催された「第6回 HTML5など勉強会」で使用したプレゼン資料です。

2013/03/23 大阪にて開催された「第6回 HTML5など勉強会」で使用したプレゼン資料です。

Statistics

Views

Total Views
9,804
Views on SlideShare
7,949
Embed Views
1,855

Actions

Likes
31
Downloads
54
Comments
0

10 Embeds 1,855

http://kadoppe.com 1567
https://twitter.com 114
http://share-wis.dev 105
http://myroom.dev 30
http://localhost 27
https://local.sopra.jp 6
https://shanon-panoplaza.herokuapp.com 3
http://59.106.184.82 1
http://feedproxy.google.com 1
http://cc.bingj.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    D3.js と SVG によるデータビジュアライゼーション D3.js と SVG によるデータビジュアライゼーション Presentation Transcript

    • D3.jsとSVGによるデータビジュアライゼーション2013/3/23 第6回 HTML5など勉強会 - kadoppe
    • 自己紹介名前:門脇 恒平 @kadoppe職業:ソフトウェアエンジニア所属:HTML5-West.jp コアメンバShareWis Inc. CTO
    • スライド:http://www.slideshare.net/kadoppeサンプルコード:https://github.com/kadoppe/html5etc-6
    • データビジュアライゼーション?
    • データビジュアライゼーション? そのまんまの意味
    • データビジュアライゼーション? 可視化
    • データを可視化すること
    • 何のために?
    • 身近な例
    • http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
    • どんな駅・路線が存在してどう繋がっているのか複雑なデータをわかりやすく伝えている http://www.kotsu.city.osaka.lg.jp/general/eigyou/top.html
    • Web上の例
    • Before
    • Before誰が/いつ/どれくらい貢献してるのか知りたいでもわかりづらい
    • After
    • After
    • 目的:わかりにくいデータをわかりやすく整形
    • もっと勉強したい人は
    • http://www.ted.com/talks/lang/ja/david_mccandless_the_beauty_of_data_visualization.html
    • 1年前の僕:僕もWeb上でこんなの作ってみたい
    • 1年前の僕:でも難しそうどう作ればいいの?
    • D3.jsとSVG を使えばできるよ
    • D3.js http://d3js.org/
    • D3 =Data-DrivenDocument
    • データにもとづいてHTMLドキュメントを構築するJavaScriptライブラリ
    • 特徴1:豊富なドキュメントサンプルコード
    • http://bl.ocks.org/mbostock/4061961
    • http://bost.ocks.org/mike/fisheye/
    • 特徴2:HTML要素やSVG要素を同じように扱える
    • SVG =Scalable VectorGraphics
    • XML形式のベクター画像フォーマット
    • 特徴1:HTML文書に埋め込める(インラインSVG)
    • <html><head></head><body> <h1>SVG画像</h1> <svg> <circle cx=50 cy=50 r=50 /> </svg></body></html>
    • 特徴2:JavaScriptやCSSから操作できる
    • 実際に触ってみよう
    • Twitterのデータを可視化してみる
    • ライブコーディングその1:ツイートリストを表示する https://github.com/kadoppe/html5etc-6/tree/master/sample1
    • おさらい
    • d3: jQueryの$にあたるものvar li = d3
    • select(): ツイートリストを格納する要素を指定var li = d3.select(#tweets)
    • selectAll(): 個々のツイートを格納する要素を指定var li = d3.select(#tweets).selectAll("li")
    • data(): データの配列とキーとなる属性を指定var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });
    • enter(): ここから先は追加されたデータの処理var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter()
    • append(): 追加データに要素を割り当てるvar li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li)
    • text(): 要素内のテキストを指定するvar li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li) .text(function(data) { return data.text; });
    • exit(): ここから先は削除されたデータの処理var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li) .text(function(data) { return data.text; });li.exit()
    • remove(): データに割り当てられた要素を削除var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li) .text(function(data) { return data.text; });li.exit().remove();
    • 完成!var li = d3.select(#tweets).selectAll("li") .data(results, function(data) { return data.id });li.enter().append(li) .text(function(data) { return data.text; });li.exit().remove();
    • 次はもうすこしビジュアライゼーション()っぽいことを
    • ライブコーディングその2:SVGをつかう https://github.com/kadoppe/html5etc-6/tree/master/sample2
    • おさらい
    • SVG要素が使えるvar svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });
    • attr(): 要素の属性値を指定var svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });svg.enter().append(circle) .attr(r, 10)
    • データの内容から属性値を計算できるvar svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });svg.enter().append(circle) .attr(r, 10) .attr(cx, function(data) { return data.text.length * 3 })
    • もちろん複雑な計算も可能var svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });svg.enter().append(circle) .attr(r, 10) .attr(cx, function(data) { return data.text.length * 3 }) .attr(cy, function(data) { var d = new Date(); d.setTime(Date.parse(data.created_at)); return d.getHours() * 20; });
    • 完成!var svg = d3.select(#tweets).selectAll("circle") .data(results, function(data) { return data.id });svg.enter().append(circle) .attr(r, 10) .attr(cx, function(data) { return data.text.length * 3 }) .attr(cy, function(data) { var d = new Date(); d.setTime(Date.parse(data.created_at)); return d.getHours() * 20; });
    • まだ時間ある?
    • ライブコーディングその3:Layoutモジュールをつかう https://github.com/kadoppe/html5etc-6/tree/master/sample3
    • カンタンに見栄えが良くなる
    • Bundle ChordForce Cluster
    • Bundle ChordForce Cluster
    • おさらい
    • layout.force():forceレイアウトを使う準備var force = d3.layout.force()
    • nodes():表示するノードを設定var force = d3.layout.force() .nodes(nodes)
    • links():ノード間の接続を設定var force = d3.layout.force() .nodes(nodes) .links(links)
    • .on(“tick”, function):周期的に実行する処理を指定var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick)
    • .size(): 表示する領域のサイズを指定var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500])
    • .start(): ノード位置の自動計算をスタートvar force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500]) .start();
    • 完成!var force = d3.layout.force() .nodes(nodes) .links(links) .on("tick", tick) .size([500, 500]) .start();
    • まとめ
    • データビジュアライゼーション
    • データをわかりやすく可視化すること
    • D3.js
    • データにもとづいてHTMLを組み立てられる
    • HTMLとSVGが使える
    • カンタンに見栄え良くできる
    • こんな僕でも・・
    • こんなの作れるようになったよ! http://share-wis.com
    • Let s Try !!
    • おしまい