インタラクティブな図を出力するライブラリは数多くありますが、「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 %>% mjs_plot(x = Data1, y = Data2, width = 320, height = 400) %>% mjs_bar() %>% saveWidget("bar.html") #ヒストグラムの描写:mjs_histogramコマンド SampleData %>% mjs_plot(x = Data1, width = 320, height = 400) %>% mjs_histogram(bins = 30) %>% saveWidget("Histogram.html") #ラベルの追加:mjs_labsコマンド SampleData %>% mjs_plot(x = Data1, width = 320, height = 400) %>% mjs_histogram(bins = 30) %>% mjs_labs(x = "ラベルの追加", y = "ラベルの追加") %>% saveWidget("Labs.html") #ラインプロットの描写:mjs_lineコマンド SampleData %>% mjs_plot(x = Data1, y = Data2, width = 320, height = 400) %>% mjs_line() %>% saveWidget("LinePlot.html") #散布図の描写:mjs_pointコマンド data.frame(Data1 = sample(1:500, 100), Data2 = sample(1:500, 100)) %>% mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %>% mjs_point(least_squares = TRUE) %>% saveWidget("PointPlot.html") #図の装飾 #x軸に対して平行線の追加:mjs_add_baseline SampleData %>% mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %>% mjs_line() %>% mjs_add_baseline(y_value = 150, label = "yの値を設定して線を追加します") %>% saveWidget("add_baseline.html") #y軸に対して平行線の追加:mjs_add_baseline SampleData %>% mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %>% mjs_line() %>% mjs_add_marker(x_value = 150, "位置はxの値で設定します") %>% saveWidget("mjs_add_marker.html") #線とシンボルの注釈を追加 #線の追加:mjs_add_lineコマンド #シンボルの注釈を追加:mjs_add_legendコマンド SampleData %>% mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %>% mjs_line() %>% mjs_add_line(Data1) %>% mjs_add_legend(legend=c("X", "Y")) %>% saveWidget("add_legend.html") #マウスオーバー時のデータラベルのカスタム #mjs_add_mouseoverコマンド:ポイントは'(カンマで文字列を囲む) #データ例の作成 SampleData <- data.frame(Data1 = sample(1:500, 30), Data2 = sample(1:500, 30), Test = c(rep(c("てすと", "テスト"), 15))) #データのプロット SampleData %>% mjs_plot(x = Data1, y = Data2, width = 300, height = 400) %>% mjs_point() %>% mjs_add_mouseover("function(d, i) { $('{{ID}} svg .mg-active-datapoint') .text('カスタム表示 : ' + d.point.Test + ' ' + i); }") %>% saveWidget("add_mouseover.html") [/code] <出力例> ・棒グラフの描写: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 %&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;) #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_marker 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 &lt;- 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;)
<出力例>
・ラベルの追加:mjs_labsコマンド
・x軸に対して平行線の追加:mjs_add_baseline
・y軸に対して平行線の追加:mjs_add_marker
・線とシンボルの注釈を追加
本例ではインタラクティブになりません。パッケージHELP例ではインタラクティブです。mjs_add_lineコマンドを外すとインタラクティブになります。
・マウスオーバー時のデータラベルのカスタム
少しでも、あなたのウェブや実験の解析が楽になりますように!!