Dimension Planet Adventure 最終章 最終話『栄光なる未来』

魔神ベベカル!!もうこの世界を貴様の好きにはさせん!!ここで俺が倒す!!!

Shinyで作った確率分布を動かせるページを, NVD3.jsでヌルヌルでインタラクティブなグラフにしました。そしてShinyでD3.jsを使う方法3つ。


今回のブログの内容を、TokyoR#45で発表しました。 上は、その時の発表資料です。

先日、Shinyを使った確率分布を動かせるページを作りました。

Shinyで確率分布を動かして遊べるページ作った - Dimension Planet Adventure 最終章 最終話『栄光なる未来』

そのときはggplot2を使ってグラフを書いていましたが、 それを全てNVD3.jsで作りなおしました!! 少し動作に時間がかかるのが難点ですが、 ヌルヌル動くインタラクティブな操作ができるようになって、 見た目的にちょっと面白いものになっています。

果たしてどれくらいヌルヌルなのか!?
以下のgifをご覧ください!!

f:id:ksmzn:20150114193524g:plain

......あんまりヌルヌルじゃないですが、
これは僕が持っているスクリーンショットアプリのgifがしょぼいだけであり、 実際はもっとヌルヌルです!!

↓ 直接アプリでご覧になって、ヌルヌル動かしてください!!

https://ksmzn.shinyapps.io/statdist/

いろいろな確率分布のパラメータをいじくるアプリ @ksmzn #Shiny

ShinyでD3.jsを使う方法。

軽く調べたところ、3つほど方法がありました。

1. rChartsを使う

これがおそらく最もカンタンな方法です。
rChartsはRで手軽にインタラクティブなグラフを描画できるパッケージで、JavaScript の可視化ライブラリを用いています。

rChartsのクイックスタートのページにも ShinyでrChartsを用いる方法が書いてあり、 それをカスタマイズするのが最もラクです。

僕も最初はこの方法で書いていたのですが、 すごく重くてなかなかグラフが描画されないという問題があり、断念しました。
この方法は、単純なシングルページで使う分には全く問題がないのですが、 僕のアプリのようなnavbarPageを使った複数のページにグラフを載せるようなアプリの場合には 辛かったです。

とはいえ、ほとんどのパターンではこの方法で良いと思われます。

2. d3Networkを使う

ネットワーク図やデンドログラムなどを描画したい場合は、 d3Networkパッケージを使う方法もあるようです。

ただ、今回の目的には適していないため、僕は試しておりません。
このページ↓を見る限り、なかなか便利そうです。

Shinyでもd3.jsを容易に使えるd3Networkパッケージを試した - でたぁっ 感動と失敗の備忘録

追記 TokyoRの会場で、上記ブログ著者のid:mitsunori さんからnetworkD3というパッケージを教えて頂きました。
名前が似てますが、d3Networkの後継っぽいです。
詳細はid:mitsunori さんの記事をご覧ください

networkD3 - でたぁっ 感動と失敗の備忘録

3. 直接D3.jsを使う

結局、この方法を採用しました。
正確に言えば、僕のアプリで直接使ったのは(NVD3.js)http://nvd3.org/です。

この方法を使う場合、とても参考になるサンプルコードがShinyのGalleryにありました。

Shiny - NVD3 line chart output

Shiny - NVD3 line chart output

これは、僕が理解している範囲で言えば、独自のoutputオブジェクトを定義してDataframeをjsに渡し、 nvd3.jsでグラフを記述するというやり方です。

なかなか面倒くさいですが、僕のアプリの場合rChartsよりサクサクとグラフが描画されましたし、 まぁ、こういうやり方とサンプルがあるよ、ということで。
詳しくは、上記コードをご覧ください。

繰り返しになりますが、基本的にはrChartsを使うのが最もカンタンだと思います。

参考文献

夕空のクライフイズム 1 (ビッグコミックス)

夕空のクライフイズム 1 (ビッグコミックス)