• Like
rChartsによるインタラクティブな可視化表現
Upcoming SlideShare
Loading in...5
×

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

  • 2,390 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,390
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
23
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. rChartsによるインタラクティブな 可視化表現 -RとJavaScript 夢の共演編- 第37回R勉強会@東京(#TokyoR) 2014/03/29
  • 2. 自己紹介 •菅井康之 @y_sugawi •       •趣味:テクノロジー的な事ならなんでも •   酒席での与太話 •   勉強会等でのお友達作り https://www.facebook.com/yasuyuki.sugai
  • 3. そもそもrChartsって・・・何? •Rで処理したデータをJavaScriptの ライブラリを利用して可視化するR ライブラリ ★JavaScriptとRのデータを組み込ん だHTMLファイルを出力する ★(基本的には)描画は JavaScriptのライブラリ任せ http://ramnathv.github.io/rCharts/
  • 4. 何が嬉しいの? •Web技術を利用したインタラクティブな 可視化表現が行える ★HTML5によって、Web上での表現力が 格段にアップ!(SVG/CANVAS/WebGL) ★いつでもどこでも誰でも参照可能(ブ ラウザさえあれば)※一部IEを除く ★静的な画像ではなく、人の操作 によってデータを探索的に扱える
  • 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. どれを使えばいいの?? •用途によってJavaScriptのライブラリの特性を踏 まえて使い分ける ★ rChartsの呼び出す関数によってJavaScript のライブラリが振り分けられる •どのJavaScriptライブラリも基本的なグラフ(散布 図、折れ線、棒、積み上げ、円、ヒストグラム、 etc...)は描画可能(何が出来るかは個別に参照) •個人的に良く使うのは。。。 ★ Highcharts ★ NVD3(D3.jsをベース)
  • 7. rChartsデモ準備 ★rChartsのインストール&ロード if (!require(rCharts)) { if (!require(devtools)) { install.packages("devtools") require(devtools) } install_github("rCharts", "ramnathv") require(rCharts) }
  • 8. Highchartsデモ • Highchartsで可視化してみる ★irisの散布図をプロット デフォルトでグループのフィルタが可能 ★ hPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatter", group = "Species")
  • 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. NVD3デモ • NVD3で可視化してみる ★irisの散布図をプロット デフォルトでグループのフィルタが可能 ★ nPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatterChart", group = "Species")
  • 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. HighChartsとNVD3比較 •HighChartsの方が安定して動作 •NVD3は挙動が不安定・・・ •ライセンス面ではHighChartsは営 利目的の場合は有償 •NVD3はApache2ライセンス、 d3.jsはBSDライセンスで あり、商用利用可能
  • 13. HighChartsとNVD3比較 •実はもっと大事な所が・・・
  • 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. HighChartsとNVD3比較 •HighChartsはグラフ描画に特化してデータ を保持するため、最低限グラフ 描画に必要なデータ以外は破棄 されてしまう •NVD3はd3.jsをベースとしているため、データド リブンの思想によりデータとグラフ描画は切 り離されている Rから渡した基のデータをそのまま保持してい る
  • 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. HighChartsとNVD3比較 •かなり不安定だけど個人的には NVD3がおすすめ(用途にもよるけど)
  • 18. NVD3編 •インタラクティブ感をもっと味わって みましょ
  • 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. 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. NVD3 時系列データ編 •プロットしただけだと・・・ やたらと変動しているのは何故だろう?
  • 22. NVD3 時系列データ編 •日付範囲を絞り込んでみると・・・ 平日と土日の違いということが判明 この例だと、土日は企業や工場がお休みだから 平日と土日は分けて考えないといけないな∼とか。
  • 23. NVD3 相関分析編 •(時間も無いので割愛。。。) • 回帰直線も(ちょっと頑張ったけど...)
  • 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. rCharts Tips •テンプレートとなるHTMLやJavaScriptを自分で実 装する事でより柔軟な表現、インタラクションを加 えることが可能 •アメリカ大統領選における勝利までの512のシ ナリオ •ギャップマインダー財団データのモーションチャート •国別にX軸:収入(一人当たり),Y軸:平均寿命 •円の大きさ:人口 • http://timelyportfolio.github.io/rCharts_512paths/ http://bl.ocks.org/psychemedia/raw/7199905/
  • 26. rCharts Tips •困ったら・・・ •出力されるソースを見て何がいけ てないのか調べる •JavaScriptのライブラリのサイト を見てお勉強しましょ
  • 27. •Let’s have Fun!! :) •
  • 28. •fin...Zzz...zzz...