shinyで確率分布を学ぶアプリ作った。あるいは、shinyでd3.jsを使う方法
Post on 17-Jul-2015
4.629 Views
Preview:
TRANSCRIPT
Shinyで確率分布を学ぶアプリ作ったあるいは、ShinyでD3.jsを使う方法
@ksmzn
Tokyo.R 第 45回
January 17, 2015
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 1 / 23
自己紹介
Koshi @ksmzn某大学 M2
リサンプリング法を研究してます
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 2 / 23
TEDで瞬間英作文するページ作りました
http://instanted.herokuapp.com/@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 3 / 23
確率分布多すぎ説
確率分布ってたくさんありすぎて、覚えきれないですよね!!!!!!
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 4 / 23
なんと
「いろいろな確率分布のパラメータをいじくるアプリ」を作りました!
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 5 / 23
https://ksmzn.shinyapps.io/statdist/
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 6 / 23
デモ!
デモ!
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 7 / 23
このアプリは
Shiny で作りました。
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 8 / 23
Shinyとは?RのためのWebアプリケーションフレームワーク
RスクリプトだけでWebアプリが作れる詳しくは、和田計也氏の資料が参考になります
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 9 / 23
本題
Shinyでインタラクティブなグラフを書きたい
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 10 / 23
ShinyでD3.jsを使う方法
3つあります!
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 11 / 23
ShinyでD3.jsを使う方法
1. rChartsを使う最もカンタンなのでオススメ
2. d3Networkを使うネットワーク図やデンドログラムならオススメ
3. 直接D3.jsを使う今回これを使いました
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 12 / 23
rChartsでヒストグラムを描く1 r e q u i r e ( s h i n y )2 r e q u i r e ( rCha r t s )3 u i <− s h i n yU I ( f l u i dP a g e (4 heade rPane l ( ” I n t e r a c t i v e Char t s ” ) ,5 s i d e b a r L a you t (6 s i d e b a rP an e l (7 s l i d e r I n p u t ( ” obs ” , ”Number o f o b s e r v a t i o n s : ” ,8 min = 10 , max = 500 , v a l u e = 100)9 ) ,
10 mainPanel (11 # rCh a r t sのSh i n y用Ou t p u t関数を使う12 showOutput ( ”myChart” )13 )14 )15 ) )
uiの部分
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 13 / 23
rChartsでヒストグラムを描く
1 s e r v e r <− f u n c t i o n ( input , output ) {2 output $myChart <− r e nde rCha r t ({3 # Po l y cha r t . j s でヒストグラムを作ってみる4 df1<−data . f rame ( y=round ( rnorm ( i npu t $obs , 0 , . 5 ) ,
d i g i t s =2))5 p1 <− r P l o t ( x = ” b in ( y , 0 . 1 ) ” , y= ” count ( y ) ” , data
=df1 , type=” bar ” )6 p1$addParams (dom = ’myChart ’ )7 r e t u r n ( p1 )8 })9 }
10
11 sh inyApp ( u i = ui , s e r v e r = s e r v e r )
serverの部分
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 14 / 23
こんな感じのヒストグラムができる
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 15 / 23
rChartsの良いトコロ
1. rChartsにShiny用の関数が用意されている
2. server.Rに普通に rChartsでグラフを描くだけで良い
rChartsが最もオススメ!
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 16 / 23
だがしかし
先ほどのアプリでは、グラフ描画に時間がかかりすぎて使えなかった!!
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 17 / 23
なので
直接NVD3.jsを使うことに!!
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 18 / 23
サンプル
直接NVD3.jsを使うサンプルは、ShinyのGalleryにあるアプリがかなり参考になります
http://shiny.rstudio.com/gallery/
nvd3-line-chart-output.html
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 19 / 23
ファイル構成
App
ui.R
server.Rwww
chart-binding.js
d3
nvd3
nvd3chart.R
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 20 / 23
基本方針
nvd3chart.Rui.Rと server.Rから呼ばれる自作の output関数を定義グラフを貼る svgタグを出力するデータフレームをグラフ用に整形する
chart-binding.jsグラフを定義した JavaScirptコード上記 output関数でこのファイルを読み込む
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 21 / 23
結果
rChartsを使うよりもサクサク描画された!
@ksmzn Shiny で確率分布を学ぶアプリ作った January 17, 2015 22 / 23
top related