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

-RとJavaScript 夢の共演編-第37回R勉強会@東京(#TokyoR)

2014/03/29

自己紹介

•菅井康之 @y_sugawi• 　　　　　

•趣味：テクノロジー的な事ならなんでも

•　　　酒席での与太話

•　　　勉強会等でのお友達作り

https://www.facebook.com/yasuyuki.sugai

そもそもrChartsって・・・何？

•Rで処理したデータをJavaScriptのライブラリを利用して可視化するRライブラリ

★JavaScriptとRのデータを組み込んだHTMLファイルを出力する

★(基本的には)描画はJavaScriptのライブラリ任せ

http://ramnathv.github.io/rCharts/

何が嬉しいの？

•Web技術を利用したインタラクティブな可視化表現が行える

★HTML5によって、Web上での表現力が格段にアップ！(SVG/CANVAS/WebGL)

★いつでもどこでも誰でも参照可能(ブラウザさえあれば)※一部IEを除く

★静的な画像ではなく、人の操作によってデータを探索的に扱える

サポートする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/ ※ライセンスに注意！！

どれを使えばいいの？？

•用途によってJavaScriptのライブラリの特性を踏まえて使い分ける

★ rChartsの呼び出す関数によってJavaScriptのライブラリが振り分けられる

•どのJavaScriptライブラリも基本的なグラフ(散布図、折れ線、棒、積み上げ、円、ヒストグラム、etc...)は描画可能(何が出来るかは個別に参照)

•個人的に良く使うのは。。。

★ Highcharts

★ NVD3(D3.jsをベース)

rChartsデモ準備

★rChartsのインストール&ロードif (!require(rCharts)) { if (!require(devtools)) { install.packages("devtools") require(devtools) } install_github("rCharts", "ramnathv") require(rCharts)}

Highchartsデモ• Highchartsで可視化してみる

★irisの散布図をプロットデフォルトでグループのフィルタが可能

★

hPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatter", group = "Species")

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

NVD3デモ• NVD3で可視化してみる

★irisの散布図をプロットデフォルトでグループのフィルタが可能

★

nPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatterChart", group = "Species")

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

HighChartsとNVD3比較

•HighChartsの方が安定して動作

•NVD3は挙動が不安定・・・

•ライセンス面ではHighChartsは営利目的の場合は有償

•NVD3はApache2ライセンス、d3.jsはBSDライセンスであり、商用利用可能

HighChartsとNVD3比較

•実はもっと大事な所が・・・

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

HighChartsとNVD3比較

•HighChartsはグラフ描画に特化してデータを保持するため、最低限グラフ描画に必要なデータ以外は破棄されてしまう

•NVD3はd3.jsをベースとしているため、データドリブンの思想によりデータとグラフ描画は切り離されているRから渡した基のデータをそのまま保持している

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

HighChartsとNVD3比較

•かなり不安定だけど個人的にはNVD3がおすすめ(用途にもよるけど)

NVD3編

•インタラクティブ感をもっと味わってみましょ

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

#１時間毎のデータから日のピーク値を算出electric2<-aggregate(electric$value, list(electric$date), max)names(electric2)<-c("date", "value")

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

NVD3 時系列データ編

•プロットしただけだと・・・

やたらと変動しているのは何故だろう？

NVD3 時系列データ編

•日付範囲を絞り込んでみると・・・

平日と土日の違いということが判明この例だと、土日は企業や工場がお休みだから平日と土日は分けて考えないといけないな～とか。

NVD3 相関分析編

•(時間も無いので割愛。。。)

•

回帰直線も(ちょっと頑張ったけど...)

rCharts Tips

•rChartsでプロットしているファイルをそのままGISTに投稿可能

•投稿するとURLがプロンプトに出力されるので、そのまま共有

•R Markdownにも組み込み可能

p<-nPlot(Petal.Length ~ Petal.Width, data = iris, type = "scatterChart", group = "Species")p$publish('title', host='gist')

rCharts Tips

•テンプレートとなるHTMLやJavaScriptを自分で実装する事でより柔軟な表現、インタラクションを加えることが可能

•アメリカ大統領選における勝利までの512のシナリオ

•ギャップマインダー財団データのモーションチャート

•国別にX軸：収入(一人当たり),Y軸：平均寿命

•円の大きさ：人口

•

http://timelyportfolio.github.io/rCharts_512paths/

http://bl.ocks.org/psychemedia/raw/7199905/

rCharts Tips

•困ったら・・・

•出力されるソースを見て何がいけてないのか調べる

•JavaScriptのライブラリのサイトを見てお勉強しましょ

•Let’s have Fun!! :)

•

•fin...Zzz...zzz...