RとJavaScript Visualizationを俯瞰しよう

RとJavaScript Visualizationを俯瞰しよう

• 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が気になってます