RとJavaScript
Visualizationを俯瞰しよう

2013年11月期AITCオープンラボ
2013/11/23
軽く自己紹介
菅井康之
Facebook

https://www.facebook.com/yasuyuki.sugai

AITC
クラウド・テクノロジー研究部会
クラウド基盤の活用
OpenData
統計解析

Visualization...
ビジュアライゼーション(可視化)

データを人が認識(認知)出来る
形式で表現
統計処理するにはまずデータの把握
統計処理した結果も人が認識出来るよ
うに
人が認識出来る範囲は広く、三次元や時
間経過、色彩、形状、大きさ等を変える
ことで表現
...
R言語
統計処理だけでなく、ビ
ジュアライズも得意
統計処理とビジュアライズは一連の
プロセス
パッケージを追加することで様々な
形式で表現が可能に
ggplot2, googlevis, ...etc
JavaScript
HTML5によって表現の幅が格段に
広がる
SVG, Canvas, WebGL

グラフ描画系のライブラリも多く
登場
Raphael.js,Chart.js, xCharts.js
Highcharts.js,...e...
R言語とJavaScript比較
サンプルで一つで見比べてみよう
とりあえず手元にあるWordCloudで
Twitter Stream のデータを使用
形態素解析はどちらもR言語で行う
MeCab+RMeCab
(+Wikipediaタイトル...
R言語とJavaScript比較
library(Wordcloud)を使用

library("wordcount")
wordcloud(
+ data$Term, data$Freq,
+ scale=c(5,2),
+ max.word...
R言語とJavaScript比較
D3.js+d3-cloud
d3.csv('resources/data/out.csv', function(data){
var h = 600;
var w = 800;
var random = d3...
R言語とJavaScript比較
どちらも目的に合ったビジュアライズが可能
豊富なライブラリ・プラグイン
R言語は統計解析したデータとビジュアライ
ズをセットで扱える
自己完結
R言語の方が簡潔かつ直感的な記述で表現可
能
D3.jsは癖があり...
R言語とJavaScript比較
R言語では静的な表現
D3.jsではインタラクション
を加える事が可能

←デモ

フィルタリング、
時間軸の変化

データに含まれている多くの
要素、関連をストーリーとし
て語るためにインタラクティ
ブな表現...
R言語の最近の動き
R言語のビジュアライゼー
ションをWebで表現する
ニーズが増えてきている
パラメータ値の変更、データのリ
アルタイム性
専門の人が見る時代から、誰でも
見れる時代に
そのために分かりやすく
R言語(Shiny)
Shiny

http://www.rstudio.com/shiny/

R言語だけでインタラクティブなWebアプ
リが作れる(Node.js風)
パラメータを変えてグラフの変化を確認
Webで一般公開には向いていない
...
R言語+JavaScript
最近ではR言語+JavaScriptが増えてきてい
る
rCharts
グラフを描画するHTMLを生成
JavaScriptの描画ライブラリを利用
Highcharts,xCharts,
NVD3(D3.js ba...
R言語+JavaScript
rChartsが最近注目されてる
ハンス・ロスリング博士が一躍有名と
なったTEDのMotionChart
http://www.youtube.com/watch?v=QpdyCJi3Ib4

ギャップマインダー...
R言語+JavaScript
ビジュアライゼーションの
適用範囲が増えてきている
よりインタラクティブに、
審美的に、リアルタイムに
どんどんJavaScript化が進
んでいきそう
特にD3.jsを中心に
Enjoy
Visualization!
個人的にはGephiが気になってます
Upcoming SlideShare
Loading in...5
×

RとJavaScript Visualizationを俯瞰しよう

5,883

Published on

AITCオープンラボ
R言語ハンズオン勉強会の第二部です

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

No Downloads
Views
Total Views
5,883
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
79
Comments
0
Likes
35
Embeds 0
No embeds

No notes for slide

RとJavaScript Visualizationを俯瞰しよう

  1. 1. RとJavaScript Visualizationを俯瞰しよう 2013年11月期AITCオープンラボ 2013/11/23
  2. 2. 軽く自己紹介 菅井康之 Facebook https://www.facebook.com/yasuyuki.sugai AITC クラウド・テクノロジー研究部会 クラウド基盤の活用 OpenData 統計解析 Visualization好き
  3. 3. ビジュアライゼーション(可視化) データを人が認識(認知)出来る 形式で表現 統計処理するにはまずデータの把握 統計処理した結果も人が認識出来るよ うに 人が認識出来る範囲は広く、三次元や時 間経過、色彩、形状、大きさ等を変える ことで表現 ストーリー性、美しく 人が理解出来て初めてデータの意味を 成す
  4. 4. R言語 統計処理だけでなく、ビ ジュアライズも得意 統計処理とビジュアライズは一連の プロセス パッケージを追加することで様々な 形式で表現が可能に ggplot2, googlevis, ...etc
  5. 5. JavaScript HTML5によって表現の幅が格段に 広がる SVG, Canvas, WebGL グラフ描画系のライブラリも多く 登場 Raphael.js,Chart.js, xCharts.js Highcharts.js,...etc 一杯!! Data Visualizationのライブラリ D3.js http://d3js.org/
  6. 6. R言語とJavaScript比較 サンプルで一つで見比べてみよう とりあえず手元にあるWordCloudで Twitter Stream のデータを使用 形態素解析はどちらもR言語で行う MeCab+RMeCab (+Wikipediaタイトル一覧 +Hatena単語リスト) 形態素解析の中身の話は割愛、、 大した事はやってません #WordCloudじゃなくても良いのですが、 たまたま手掛けていたものがあったので・・・
  7. 7. R言語とJavaScript比較 library(Wordcloud)を使用 library("wordcount") wordcloud( + data$Term, data$Freq, + scale=c(5,2), + max.words=Inf, + random.order=T, + random.color=T) 変化があまり見れないのはこ のとき使ったデータが悪かっ たので・・・
  8. 8. R言語とJavaScript比較 D3.js+d3-cloud d3.csv('resources/data/out.csv', function(data){ var h = 600; var w = 800; var random = d3.random.irwinHall(2) var countMax = d3.max(data, function(d){ return d.Freq / 5} ); var sizeScale = d3.scale.linear().domain([0, countMax]).range([10, 100]) var colorScale = d3.scale.category20(); var words = data.map(function(d) { return { text: d.Term, size: sizeScale(d.Freq / 5) }; }); d3.layout.cloud().size([w, h]) .words(words) .rotate(function() { return Math.round(1-random()) *90; }) .font("Impact") .fontSize(function(d) { return d.size; }) .on("end", draw) .start(); 見せる気0 //wordcloud 描画 function draw(words) { var svg = d3.select("#result_area") .append("svg") .attr("id", "svg_wordcloud") .attr("width", w) .attr("height", h); } }); svg.append("g") .attr("transform", "translate(400,300)") .selectAll("text") .data(words) .enter() .append("text") .style({ "font-family": "Impact", "font-size":function(d) { return d.size + "px"; }, "fill": function(d, i) { return colorScale(i); } }) .attr({ "text-anchor":"middle", "transform": function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; } }) .text(function(d) { return d.text; });
  9. 9. R言語とJavaScript比較 どちらも目的に合ったビジュアライズが可能 豊富なライブラリ・プラグイン R言語は統計解析したデータとビジュアライ ズをセットで扱える 自己完結 R言語の方が簡潔かつ直感的な記述で表現可 能 D3.jsは癖があり、やや複雑 学習コストも余計にかかる 表現力、柔軟性はJavaScriptの方が高い
  10. 10. R言語とJavaScript比較 R言語では静的な表現 D3.jsではインタラクション を加える事が可能 ←デモ フィルタリング、 時間軸の変化 データに含まれている多くの 要素、関連をストーリーとし て語るためにインタラクティ ブな表現が必須となってきた
  11. 11. R言語の最近の動き R言語のビジュアライゼー ションをWebで表現する ニーズが増えてきている パラメータ値の変更、データのリ アルタイム性 専門の人が見る時代から、誰でも 見れる時代に そのために分かりやすく
  12. 12. R言語(Shiny) Shiny http://www.rstudio.com/shiny/ R言語だけでインタラクティブなWebアプ リが作れる(Node.js風) パラメータを変えてグラフの変化を確認 Webで一般公開には向いていない (最近はRStudioでホスティング も・・・) 色々操作性とか制約とか気になる所があ るけど、R言語をWebで、という考え方は 魅力的
  13. 13. R言語+JavaScript 最近ではR言語+JavaScriptが増えてきてい る rCharts グラフを描画するHTMLを生成 JavaScriptの描画ライブラリを利用 Highcharts,xCharts, NVD3(D3.js base),...etc http://ramnathv.github.io/rCharts/ ggplot2+gridSVG+D3.js ggplot2をSVG化し、D3.jsで操作 http://timelyportfolio.blogspot.jp/2013/08/ggplot2-meet-d3.html
  14. 14. R言語+JavaScript rChartsが最近注目されてる ハンス・ロスリング博士が一躍有名と なったTEDのMotionChart http://www.youtube.com/watch?v=QpdyCJi3Ib4 ギャップマインダー財団のデータが基 となっているが、このデータを使って rChartsでMotionChartを作成する動き http://blog.ouseful.info/2013/11/04/generating-d3jsmotion-charts-from-rcharts/ http://bl.ocks.org/psychemedia/raw/7199905/ 国別にX軸:収入(一人当たり)、Y軸:平均寿命、半径:人口
  15. 15. R言語+JavaScript ビジュアライゼーションの 適用範囲が増えてきている よりインタラクティブに、 審美的に、リアルタイムに どんどんJavaScript化が進 んでいきそう 特にD3.jsを中心に
  16. 16. Enjoy Visualization! 個人的にはGephiが気になってます
  1. A particular slide catching your eye?

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

×