AITCオープンラボ
「R言語で始めよう、データサイエンス(ハンズオン勉強会)
〜機械学習・データビジュアライゼーション事始め〜」
に行ってきた!その内容のうち、(順番違うけど)Javascript連携をメモメモ
(基礎、機械学習、ビジュアライゼーション、Javascript連携と話は続く)
なお、この講義は
http://www.slideshare.net/yasuyukisugai/r-charts
の内容に沿って行われました。
(ソースプログラムはそのサイトより引用)
・rで処理したデータをJavascriptライブラリを利用して可視化、
・HTML5を作成
■HighchartsでRのグラフ→Javascriptへ
Highchartsなどサポート(ただし、Javascriptのライセンスに注意)
以下、ふつうのR(R Studioでなく)で行う
install.packages("devtools")
require(devtools)
install_github("rCharts","ramnathv")
require(rCharts)
#HighChartsでみてみる
p<-hPlot(Petal.Length~Petal.Width,data=iris,type="scatter",group="Species")
p$chart(zoomType="xy")
p$exporting(enable=T)
p
これを実行すると、ブラウザが開き、グラフが表示される。
これを、「名前をつけて保存」すると・・・
Javascriptで書き出される。
■NvD3でRのグラフ→Javascriptへ
nPlot(Petal.Length~Petal.Width,data=iris,type="scatterChart",group="Species")
を実行する。IEだと、エラーになるので、その場合は、
(その場合でなくても)ファイルに保存して、Chromeでみると
わかる
■どちらがいい?
ソースを開いてみると、Highchartsは、グラフ表示に必要な
データしか書き出さないが、NvD3はデータを全部書く。
そこで、あとでJavascriptで操作する場合は、
NvD3のほうが、やりやすい
■サンプル-東京電力
#データを読んで加工
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")
#グラフ化
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
すると、こう表示され
下で一部を選択すると、その部分が表示される
■その他
しゃいにーShiny
(サーバーをたてて、サーバーサイドでR)
一般の人にはrChart
seekr.jp
r-bloggers.com
バッチ的に使える
rChartでつくったものをGitHubに置くっていう手もある
rMarkDown
「R言語で始めよう、データサイエンス(ハンズオン勉強会)
〜機械学習・データビジュアライゼーション事始め〜」
に行ってきた!その内容のうち、(順番違うけど)Javascript連携をメモメモ
(基礎、機械学習、ビジュアライゼーション、Javascript連携と話は続く)
なお、この講義は
http://www.slideshare.net/yasuyukisugai/r-charts
の内容に沿って行われました。
(ソースプログラムはそのサイトより引用)
・rで処理したデータをJavascriptライブラリを利用して可視化、
・HTML5を作成
■HighchartsでRのグラフ→Javascriptへ
Highchartsなどサポート(ただし、Javascriptのライセンスに注意)
以下、ふつうのR(R Studioでなく)で行う
install.packages("devtools")
require(devtools)
install_github("rCharts","ramnathv")
require(rCharts)
#HighChartsでみてみる
p<-hPlot(Petal.Length~Petal.Width,data=iris,type="scatter",group="Species")
p$chart(zoomType="xy")
p$exporting(enable=T)
p
これを実行すると、ブラウザが開き、グラフが表示される。
これを、「名前をつけて保存」すると・・・
Javascriptで書き出される。
■NvD3でRのグラフ→Javascriptへ
nPlot(Petal.Length~Petal.Width,data=iris,type="scatterChart",group="Species")
を実行する。IEだと、エラーになるので、その場合は、
(その場合でなくても)ファイルに保存して、Chromeでみると
わかる
■どちらがいい?
ソースを開いてみると、Highchartsは、グラフ表示に必要な
データしか書き出さないが、NvD3はデータを全部書く。
そこで、あとでJavascriptで操作する場合は、
NvD3のほうが、やりやすい
■サンプル-東京電力
#データを読んで加工
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")
#グラフ化
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
すると、こう表示され
下で一部を選択すると、その部分が表示される
■その他
しゃいにーShiny
(サーバーをたてて、サーバーサイドでR)
一般の人にはrChart
seekr.jp
r-bloggers.com
バッチ的に使える
rChartでつくったものをGitHubに置くっていう手もある
rMarkDown