Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

rChartsによるインタラクティブな可視化表現

9,852 views

Published on

第37回R勉強会@東京(#TokyoR)で発表したネタです

Published in: Technology
  • Be the first to comment

rChartsによるインタラクティブな可視化表現

  1. 1. rChartsによるインタラクティブな 可視化表現 -RとJavaScript 夢の共演編- 第37回R勉強会@東京(#TokyoR) 2014/03/29
  2. 2. 自己紹介 •菅井康之 @y_sugawi •       •趣味:テクノロジー的な事ならなんでも •   酒席での与太話 •   勉強会等でのお友達作り https://www.facebook.com/yasuyuki.sugai
  3. 3. そもそもrChartsって・・・何? •Rで処理したデータをJavaScriptの ライブラリを利用して可視化するR ライブラリ ★JavaScriptとRのデータを組み込ん だHTMLファイルを出力する ★(基本的には)描画は JavaScriptのライブラリ任せ http://ramnathv.github.io/rCharts/
  4. 4. 何が嬉しいの? •Web技術を利用したインタラクティブな 可視化表現が行える ★HTML5によって、Web上での表現力が 格段にアップ!(SVG/CANVAS/WebGL) ★いつでもどこでも誰でも参照可能(ブ ラウザさえあれば)※一部IEを除く ★静的な画像ではなく、人の操作 によってデータを探索的に扱える
  5. 5. サポートするJavaScriptライブラリ •Highcharts(              ) •NVD3(        ) •Polychart(              ) •Morris(                  ) •Rickshaw(                   ) •xCharts(               ) •Vega(              ) •Leaflet(          ) •Dimple(          ) http://www.highcharts.com/ http://nvd3.org/ http://www.polychartjs.com/ http://www.oesmith.co.uk/morris.js/ http://code.shutterstock.com/rickshaw/ http://tenxer.github.io/xcharts/ http://trifacta.github.io/vega/ http://leafletjs.com/ http://dimplejs.org/ ※ライセンスに注意!!
  6. 6. どれを使えばいいの?? •用途によってJavaScriptのライブラリの特性を踏 まえて使い分ける ★ rChartsの呼び出す関数によってJavaScript のライブラリが振り分けられる •どのJavaScriptライブラリも基本的なグラフ(散布 図、折れ線、棒、積み上げ、円、ヒストグラム、 etc...)は描画可能(何が出来るかは個別に参照) •個人的に良く使うのは。。。 ★ Highcharts ★ NVD3(D3.jsをベース)
  7. 7. rChartsデモ準備 ★rChartsのインストール&ロード if (!require(rCharts)) { if (!require(devtools)) { install.packages("devtools") require(devtools) } install_github("rCharts", "ramnathv") require(rCharts) }
  8. 8. Highchartsデモ • Highchartsで可視化してみる ★irisの散布図をプロット デフォルトでグループのフィルタが可能 ★ hPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatter", group = "Species")
  9. 9. Highchartsデモ • Highchartsの機能を使ってみる • JavaScriptのライブラリへのパラメータ値を 変更する事が可能 ★irisの散布図をプロット +マウスで選択した範囲を拡大 +画像形式でダウンロード • p<-hPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatter", group = "Species") p$chart(zoomType="xy") p$exporting(enabled = T) p
  10. 10. NVD3デモ • NVD3で可視化してみる ★irisの散布図をプロット デフォルトでグループのフィルタが可能 ★ nPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatterChart", group = "Species")
  11. 11. NVD3デモ • NVD3の機能を使ってみる JavaScriptのライブラリへのパラメータ 値を変更する事が可能 ★irisの散布図をプロット +軸の出力形式を変更 • p<-nPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatterChart", group = "Species") p$chart(showDistX = TRUE, showDistY = TRUE) p$xAxis(axisLabel="Petal.Length") p$yAxis(axisLabel="Petal.Width") p
  12. 12. HighChartsとNVD3比較 •HighChartsの方が安定して動作 •NVD3は挙動が不安定・・・ •ライセンス面ではHighChartsは営 利目的の場合は有償 •NVD3はApache2ライセンス、 d3.jsはBSDライセンスで あり、商用利用可能
  13. 13. HighChartsとNVD3比較 •実はもっと大事な所が・・・
  14. 14. HighChartsとNVD3比較 •出力されたソースを見比べると・・・ "yAxis": [ { "title": { "text": "Petal.Length" } } ], "series": [ { "data": [ [ 0.1, 1.1 ], :(省略) [ 0.6, 1.6 ] ], "name": "setosa", "type": "scatter", "marker": { "radius": 3 } }, data = [ { "Sepal.Length": 5.1, "Sepal.Width": 3.5, "Petal.Length": 1.4, "Petal.Width": 0.2, "Species": "setosa" }, { "Sepal.Length": 4.9, "Sepal.Width": 3, "Petal.Length": 1.4, "Petal.Width": 0.2, "Species": "setosa" }, { "Sepal.Length": 4.7, "Sepal.Width": 3.2, "Petal.Length": 1.3, "Petal.Width": 0.2, "Species": "setosa" },Highcharts NVD3
  15. 15. HighChartsとNVD3比較 •HighChartsはグラフ描画に特化してデータ を保持するため、最低限グラフ 描画に必要なデータ以外は破棄 されてしまう •NVD3はd3.jsをベースとしているため、データド リブンの思想によりデータとグラフ描画は切 り離されている Rから渡した基のデータをそのまま保持してい る
  16. 16. HighChartsとNVD3比較 •NVD3ならこんなことが可能 •散布図のあるポイントに対して、付加情報を 表示することでより情報量を増やす • p<-nPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatterChart", group = "Species") p$chart(showDistX = TRUE, showDistY = TRUE) p$xAxis(axisLabel="Petal.Length") p$yAxis(axisLabel="Petal.Width") p$chart(tooltipContent = "#! function(key, x, y, e, graph){ return 'Sepal.Length: ' + e.point['Sepal.Length'] + ', Sepal.Width: ' + e.point['Sepal.Width']; } !#") p
  17. 17. HighChartsとNVD3比較 •かなり不安定だけど個人的には NVD3がおすすめ(用途にもよるけど)
  18. 18. NVD3編 •インタラクティブ感をもっと味わって みましょ
  19. 19. NVD3 時系列データ編 •いい感じのデータが無かったので、 •ちょっと前処理 •#東京電力が公開している2013年の電力使用量を取得 tmp<-readLines("http://www.tepco.co.jp/forecast/html/images/juyo-2013.csv") electric<-read.csv(textConnection(tmp), header=F, skip=3) names(electric) <- c("date", "time", "value") electric<-transform(electric, date=as.Date(date)) #1時間毎のデータから日のピーク値を算出 electric2<-aggregate(electric$value, list(electric$date), max) names(electric2)<-c("date", "value")
  20. 20. NVD3 時系列データ編 •1年のデータを折れ線でプロット •NVD3の機能を利用して日付範 囲を任意に変更可能に • p <- nPlot(value ~ date, data = electric2, type = 'lineWithFocusChart') p$xAxis( tickFormat="#!function(d) { return d3.time.format('%m/%d')(new Date( d * 86400000 )); }!#" ) p$x2Axis( tickFormat="#!function(d) { return d3.time.format('%b')(new Date( d * 86400000 )); }!#" ) p$chart(tooltipContent = "#! function(key, x, y, e, graph){ return 'date: ' + d3.time.format('%Y/%m/%d')(new Date( e.point.date * 86400000 )); } !#") p$set(width=1000, height=500) p
  21. 21. NVD3 時系列データ編 •プロットしただけだと・・・ やたらと変動しているのは何故だろう?
  22. 22. NVD3 時系列データ編 •日付範囲を絞り込んでみると・・・ 平日と土日の違いということが判明 この例だと、土日は企業や工場がお休みだから 平日と土日は分けて考えないといけないな∼とか。
  23. 23. NVD3 相関分析編 •(時間も無いので割愛。。。) • 回帰直線も(ちょっと頑張ったけど...)
  24. 24. rCharts Tips •rChartsでプロットしているファイル をそのままGISTに投稿可能 •投稿するとURLがプロンプトに出 力されるので、そのまま共有 •R Markdownにも組み込み可能 p<-nPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatterChart", group = "Species") p$publish('title', host='gist')
  25. 25. rCharts Tips •テンプレートとなるHTMLやJavaScriptを自分で実 装する事でより柔軟な表現、インタラクションを加 えることが可能 •アメリカ大統領選における勝利までの512のシ ナリオ •ギャップマインダー財団データのモーションチャート •国別にX軸:収入(一人当たり),Y軸:平均寿命 •円の大きさ:人口 • http://timelyportfolio.github.io/rCharts_512paths/ http://bl.ocks.org/psychemedia/raw/7199905/
  26. 26. rCharts Tips •困ったら・・・ •出力されるソースを見て何がいけ てないのか調べる •JavaScriptのライブラリのサイト を見てお勉強しましょ
  27. 27. •Let’s have Fun!! :) •
  28. 28. •fin...Zzz...zzz...

×