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.jsHighcharts.js,...etc 一杯!!

Data Visualizationのライブラリ

D3.js http://d3js.org/

R言語とJavaScript比較

サンプルで一つで見比べてみよう

とりあえず手元にあるWordCloudで

Twitter Stream のデータを使用

形態素解析はどちらもR言語で行う

MeCab+RMeCab(+Wikipediaタイトル一覧 +Hatena単語リスト)

形態素解析の中身の話は割愛、、大した事はやってません

#WordCloudじゃなくても良いのですが、たまたま手掛けていたものがあったので・・・

R言語とJavaScript比較

library(Wordcloud)を使用

library("wordcount")wordcloud( + data$Term, data$Freq, + scale=c(5,2), + max.words=Inf, + random.order=T, + random.color=T)

変化があまり見れないのはこのとき使ったデータが悪かったので・・・

R言語とJavaScript比較

D3.js+d3-cloudd3.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; }); } });

見せる気０

R言語とJavaScript比較

どちらも目的に合ったビジュアライズが可能

豊富なライブラリ・プラグイン

R言語は統計解析したデータとビジュアライズをセットで扱える

自己完結

R言語の方が簡潔かつ直感的な記述で表現可能

D3.jsは癖があり、やや複雑学習コストも余計にかかる

表現力、柔軟性はJavaScriptの方が高い

R言語とJavaScript比較

R言語では静的な表現

D3.jsではインタラクションを加える事が可能

←デモ

データに含まれている多くの要素、関連をストーリーとして語るためにインタラクティブな表現が必須となってきた

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

R言語の最近の動き

R言語のビジュアライゼーションをWebで表現するニーズが増えてきているパラメータ値の変更、データのリアルタイム性

専門の人が見る時代から、誰でも見れる時代に

そのために分かりやすく

R言語(Shiny)

Shiny http://www.rstudio.com/shiny/R言語だけでインタラクティブなWebアプリが作れる(Node.js風)

パラメータを変えてグラフの変化を確認

Webで一般公開には向いていない(最近はRStudioでホスティングも・・・)

色々操作性とか制約とか気になる所があるけど、R言語をWebで、という考え方は魅力的

R言語+JavaScript最近ではR言語+JavaScriptが増えてきている

rCharts

グラフを描画するHTMLを生成

JavaScriptの描画ライブラリを利用

Highcharts,xCharts,NVD3(D3.js base),...etchttp://ramnathv.github.io/rCharts/

ggplot2+gridSVG+D3.js

ggplot2をSVG化し、D3.jsで操作http://timelyportfolio.blogspot.jp/2013/08/ggplot2-meet-d3.html

R言語+JavaScript

rChartsが最近注目されてる

ハンス・ロスリング博士が一躍有名となったTEDのMotionChart

http://www.youtube.com/watch?v=QpdyCJi3Ib4

ギャップマインダー財団のデータが基となっているが、このデータを使ってrChartsでMotionChartを作成する動き

http://blog.ouseful.info/2013/11/04/generating-d3js-motion-charts-from-rcharts/

http://bl.ocks.org/psychemedia/raw/7199905/

国別にX軸：収入（一人当たり）、Y軸：平均寿命、半径：人口

R言語+JavaScript

ビジュアライゼーションの適用範囲が増えてきている

よりインタラクティブに、審美的に、リアルタイムに

どんどんJavaScript化が進んでいきそう

特にD3.jsを中心に

EnjoyVisualization!

個人的にはGephiが気になってます