View
5.416
Download
0
Category
Preview:
DESCRIPTION
AITCオープンラボ R言語ハンズオン勉強会の第二部です
Citation preview
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が気になってます
Recommended