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

1. RとJavaScript
Visualizationを俯瞰しよう
2013年11月期AITCオープンラボ
2013/11/23

2. 軽く自己紹介
菅井康之
Facebook
https://www.facebook.com/yasuyuki.sugai
AITC
クラウド・テクノロジー研究部会
クラウド基盤の活用
OpenData
統計解析
Visualization好き

3. ビジュアライゼーション(可視化)
データを人が認識(認知)出来る
形式で表現
統計処理するにはまずデータの把握
統計処理した結果も人が認識出来るよ
うに
人が認識出来る範囲は広く、三次元や時
間経過、色彩、形状、大きさ等を変える
ことで表現
ストーリー性、美しく
人が理解出来て初めてデータの意味を
成す

4. R言語
統計処理だけでなく、ビ
ジュアライズも得意
統計処理とビジュアライズは一連の
プロセス
パッケージを追加することで様々な
形式で表現が可能に
ggplot2, googlevis, ...etc

5. JavaScript
HTML5によって表現の幅が格段に
広がる
SVG, Canvas, WebGL
グラフ描画系のライブラリも多く
登場
Raphael.js,Chart.js, xCharts.js
Highcharts.js,...etc
一杯!!
Data Visualizationのライブラリ
D3.js
http://d3js.org/

6. R言語とJavaScript比較
サンプルで一つで見比べてみよう
とりあえず手元にあるWordCloudで
Twitter Stream のデータを使用
形態素解析はどちらもR言語で行う
MeCab+RMeCab
(+Wikipediaタイトル一覧
+Hatena単語リスト)
形態素解析の中身の話は割愛、、
大した事はやってません
#WordCloudじゃなくても良いのですが、
たまたま手掛けていたものがあったので・・・

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. 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();
見せる気０
//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. R言語とJavaScript比較
どちらも目的に合ったビジュアライズが可能
豊富なライブラリ・プラグイン
R言語は統計解析したデータとビジュアライ
ズをセットで扱える
自己完結
R言語の方が簡潔かつ直感的な記述で表現可
能
D3.jsは癖があり、やや複雑
学習コストも余計にかかる
表現力、柔軟性はJavaScriptの方が高い

10. R言語とJavaScript比較
R言語では静的な表現
D3.jsではインタラクション
を加える事が可能
←デモ
フィルタリング、
時間軸の変化
データに含まれている多くの
要素、関連をストーリーとし
て語るためにインタラクティ
ブな表現が必須となってきた

11. R言語の最近の動き
R言語のビジュアライゼー
ションをWebで表現する
ニーズが増えてきている
パラメータ値の変更、データのリ
アルタイム性
専門の人が見る時代から、誰でも
見れる時代に
そのために分かりやすく

12. R言語(Shiny)
Shiny
http://www.rstudio.com/shiny/
R言語だけでインタラクティブなWebアプ
リが作れる(Node.js風)
パラメータを変えてグラフの変化を確認
Webで一般公開には向いていない
(最近はRStudioでホスティング
も・・・)
色々操作性とか制約とか気になる所があ
るけど、R言語をWebで、という考え方は
魅力的

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. 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. R言語+JavaScript
ビジュアライゼーションの
適用範囲が増えてきている
よりインタラクティブに、
審美的に、リアルタイムに
どんどんJavaScript化が進
んでいきそう
特にD3.jsを中心に

16. Enjoy
Visualization!
個人的にはGephiが気になってます