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

7,312 views
7,389 views

Published on

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

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

No Downloads
Views
Total views
7,312
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
43
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

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...

×