Rでウェブ解析：JavaScriptのMetricsGraphicsがRから利用できます。「metricsgraphicsパッケージ」の紹介

インタラクティブな図を出力するライブラリは数多くありますが、「MetricsGraphics.js」ライブラリは使い方が簡単で出力されたHTMLファイルの表示が非常に高速です。

ぜひとも、ウェブ制作に関わる関係者に表現手段の一つとして「metricsgraphics」パッケージを利用いただけたらと思います。ぐりぐり動きますので出力例で試してみてください。

パッケージのバージョンは0.8.5です。
コマンドはR version 3.2.0で確認しています。

パッケージのインストール

下記コマンドを実行してください。

#version 0.8.5
install.packages("metricsgraphics")

実行コマンドの紹介

本パッケージは%>%(パイプ)でコマンドをつなげて使用することもできます。紹介コマンドではパイプを使用しています。作成したHTMLファイルはsaveWidget("ファイル名.html")コマンドで作業フォルダに出力します。詳細はコメントを確認してください。

＜パッケージ読み込み、HTMLファイルの保存場所の指定とデータ例の作成＞
作業の前に実行してください

library("metricsgraphics")
library("tcltk")

#HTMLファイルの保存場所を指定
setwd(paste(as.character(tkchooseDirectory(title = "保存場所を選択"), sep = "", collapse ="")))

#データ例の作成
SampleData <- data.frame(Data1 = sample(1:500, 30),
                         Data2 = sample(1:500, 30))

#棒グラフの描写:mjs_barコマンド
SampleData %&gt;%
mjs_plot(x = Data1, y = Data2, width = 320, height = 400) %&gt;% mjs_bar() %&gt;%
saveWidget(&quot;bar.html&quot;)

#ヒストグラムの描写:mjs_histogramコマンド
SampleData %&gt;%
mjs_plot(x = Data1, width = 320, height = 400) %&gt;% mjs_histogram(bins = 30) %&gt;%
saveWidget(&quot;Histogram.html&quot;)

#ラベルの追加:mjs_labsコマンド
SampleData %&gt;%
mjs_plot(x = Data1, width = 320, height = 400) %&gt;% mjs_histogram(bins = 30) %&gt;%
mjs_labs(x = &quot;ラベルの追加&quot;, y =  &quot;ラベルの追加&quot;) %&gt;%
saveWidget(&quot;Labs.html&quot;)

#ラインプロットの描写:mjs_lineコマンド
SampleData %&gt;%
mjs_plot(x = Data1, y = Data2, width = 320, height = 400) %&gt;% mjs_line() %&gt;%
saveWidget(&quot;LinePlot.html&quot;)

#散布図の描写:mjs_pointコマンド
data.frame(Data1 = sample(1:500, 100),
           Data2 = sample(1:500, 100)) %&gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&gt;% mjs_point(least_squares = TRUE) %&gt;%
saveWidget(&quot;PointPlot.html&quot;)

#図の装飾
#x軸に対して平行線の追加:mjs_add_baseline
SampleData %&gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&gt;% mjs_line() %&gt;%
mjs_add_baseline(y_value = 150, label = &quot;yの値を設定して線を追加します&quot;) %&gt;%
saveWidget(&quot;add_baseline.html&quot;)

#y軸に対して平行線の追加:mjs_add_baseline
SampleData %&gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&gt;% mjs_line() %&gt;%
mjs_add_marker(x_value = 150, &quot;位置はxの値で設定します&quot;) %&gt;%
saveWidget(&quot;mjs_add_marker.html&quot;)

#線とシンボルの注釈を追加
#線の追加:mjs_add_lineコマンド
#シンボルの注釈を追加:mjs_add_legendコマンド
SampleData %&gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&gt;%
mjs_line() %&gt;% mjs_add_line(Data1) %&gt;%
mjs_add_legend(legend=c(&quot;X&quot;, &quot;Y&quot;)) %&gt;%
saveWidget(&quot;add_legend.html&quot;)

#マウスオーバー時のデータラベルのカスタム
#mjs_add_mouseoverコマンド:ポイントは'(カンマで文字列を囲む)
#データ例の作成
SampleData <- data.frame(Data1 = sample(1:500, 30),
                         Data2 = sample(1:500, 30),
                         Test = c(rep(c(&quot;てすと&quot;, &quot;テスト&quot;), 15)))
#データのプロット
SampleData %&gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&gt;%
mjs_point() %&gt;%
mjs_add_mouseover(&quot;function(d, i) {
                $('{{ID}} svg .mg-active-datapoint')
                    .text('カスタム表示 : ' + d.point.Test + ' ' + i);
                 }&quot;) %&gt;%
saveWidget(&quot;add_mouseover.html&quot;)
&#91;/code&#93;
＜出力例＞
・棒グラフの描写:mjs_barコマンド
<iframe src="https://www.karada-good.net/wp/wp-content/uploads/2015/06/bar.html" width=100%  height="450 px" scrolling="no" frameborder="0"></iframe>
・ヒストグラムの描写:mjs_histogramコマンド
<iframe src="https://www.karada-good.net/wp/wp-content/uploads/2015/06/Histogram.html" width=100%  height="450 px" scrolling="no" frameborder="0"></iframe>
・ラインプロットの描写:mjs_lineコマンド
<iframe src="https://www.karada-good.net/wp/wp-content/uploads/2015/06/LinePlot.html" width=100%  height="450 px" scrolling="no" frameborder="0"></iframe>
・散布図の描写:mjs_pointコマンド
<iframe src="https://www.karada-good.net/wp/wp-content/uploads/2015/06/PointPlot.html" width=100%  height="450 px" scrolling="no" frameborder="0"></iframe>
<hr/>
＜図の装飾コマンド＞
詳細はコメントを確認してください。

#ラベルの追加:mjs_labsコマンド
SampleData %&amp;gt;%
mjs_plot(x = Data1, width = 320, height = 400) %&amp;gt;% mjs_histogram(bins = 30) %&amp;gt;%
mjs_labs(x = &amp;quot;ラベルの追加&amp;quot;, y =  &amp;quot;ラベルの追加&amp;quot;) %&amp;gt;%
saveWidget(&amp;quot;Labs.html&amp;quot;)

#x軸に対して平行線の追加:mjs_add_baseline
SampleData %&amp;gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&amp;gt;% mjs_line() %&amp;gt;%
mjs_add_baseline(y_value = 150, label = &amp;quot;yの値を設定して線を追加します&amp;quot;) %&amp;gt;%
saveWidget(&amp;quot;add_baseline.html&amp;quot;)

#y軸に対して平行線の追加:mjs_add_marker
SampleData %&amp;gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&amp;gt;% mjs_line() %&amp;gt;%
mjs_add_marker(x_value = 150, &amp;quot;位置はxの値で設定します&amp;quot;) %&amp;gt;%
saveWidget(&amp;quot;mjs_add_marker.html&amp;quot;)

#線とシンボルの注釈を追加
#線の追加:mjs_add_lineコマンド
#シンボルの注釈を追加:mjs_add_legendコマンド
SampleData %&amp;gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&amp;gt;%
mjs_line() %&amp;gt;% mjs_add_line(Data1) %&amp;gt;%
mjs_add_legend(legend = c(&amp;quot;X&amp;quot;, &amp;quot;Y&amp;quot;)) %&amp;gt;%
saveWidget(&amp;quot;add_legend.html&amp;quot;)

#マウスオーバー時のデータラベルのカスタム
#mjs_add_mouseoverコマンド:ポイントは'(カンマで文字列を囲む)
#データ例の作成
SampleData &amp;lt;- data.frame(Data1 = sample(1:500, 30),
                         Data2 = sample(1:500, 30),
                         Test = c(rep(c(&amp;quot;てすと&amp;quot;, &amp;quot;テスト&amp;quot;), 15)))
#データのプロット
SampleData %&amp;gt;%
mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %&amp;gt;%
mjs_point() %&amp;gt;%
mjs_add_mouseover(&amp;quot;function(d, i) {
                $('{{ID}} svg .mg-active-datapoint')
                    .text('カスタム表示 : ' + d.point.Test + ' ' + i);
                 }&amp;quot;) %&amp;gt;%
saveWidget(&amp;quot;add_mouseover.html&amp;quot;)

＜出力例＞
・ラベルの追加:mjs_labsコマンド

・x軸に対して平行線の追加:mjs_add_baseline

・y軸に対して平行線の追加:mjs_add_marker

・線とシンボルの注釈を追加
本例ではインタラクティブになりません。パッケージHELP例ではインタラクティブです。mjs_add_lineコマンドを外すとインタラクティブになります。

・マウスオーバー時のデータラベルのカスタム

少しでも、あなたのウェブや実験の解析が楽になりますように！！