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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,962

Published on

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

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

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

No Downloads
Views
Total Views
3,962
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
32
Comments
0
Likes
17
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...

×