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