RとJavaScript Visualizationを俯瞰しよう

8,100 views

Published on

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

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

No Downloads
Views
Total views
8,100
On SlideShare
0
From Embeds
0
Number of Embeds
195
Actions
Shares
0
Downloads
97
Comments
0
Likes
37
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が気になってます

×