htmlwidgets for R のShowcaseにあるパッケージがCodePenでブログ表示できるかを調べた件

はじめに
とりあえず、結果
表示結果
まとめ

はじめに

htmlwidgets for R パッケージは、Rでインタラクティブな図が作成できる王道的なパッケージであり、それを使った色々な依存パッケージが開発されています。

www.htmlwidgets.org

今回、htmlwidgetsのshowcaseにある１２パッケージをHatena Blog内の図表として表示するにあたって、（１）Html 出力の可否、（２）CodePen対応できるか？、さらには（３）ブログ表示できるか？を調べてみました。

CodePenとは、ユーザーが作成したHTML、CSS、JavaScriptのコードスニペットのテスト、および披露をするオンラインツールの1つです。

とりあえず、結果

パッケージ	html output	CodePen	はてなブログ表示
Leaflet	473KB	◯	◯
Dygraphs	574KB	◯	◯
Plotly	3.5MB	X	X
rbokeh	955KB	X	X
Highcharter	995KB	X	X
visNetwork	1.1MB	X	X
networkD3	263KB	◯	◯
d3heatmap	229KB	◯	◯
DataTables	207KB	◯	◯
threejs	977KB	X	X
rglwidget	X	X	X
DiagrammeR	2.5MB	X	X
MetricsGraphics	368KB	◯	◯

表示結果

Leaflet

Rスクリプト

if(!require("leaflet")){install.packages("leaflet")}; library(leaflet)
if(!require("magrittr")){install.packages("magrittr")}; library(magrittr)

m <- leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R") 
m

CodePenでの出力結果

See the Pen leaflet by skume (@kumes) on CodePen.

Dygraphs

Rスクリプト

if(!require("dygraphs")){install.packages("dygraphs")}; library(dygraphs)
if(!require("magrittr")){install.packages("magrittr")}; library(magrittr)

dygraph(nhtemp, main = "New Haven Temperatures") %>% 
  dyRangeSelector(dateWindow = c("1920-01-01", "1960-01-01"))

CodePenでの出力結果

See the Pen dygraph by skume (@kumes) on CodePen.

networkD3

Rスクリプト

if(!require("networkD3")){install.packages("networkD3")};
library(networkD3)
if(!require("magrittr")){install.packages("magrittr")}; library(magrittr)

data(MisLinks, MisNodes)
forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             Group = "group", opacity = 0.4)

CodePenでの出力結果（Run Pen クリック必要）

See the Pen networkD3 by skume (@kumes) on CodePen.

d3heatmap

Rスクリプト

if(!require("d3heatmap")){install.packages("d3heatmap")}; library(d3heatmap)

d3heatmap(mtcars, scale="column", colors="Blues")

CodePenでの出力結果

See the Pen d3heatmap by skume (@kumes) on CodePen.

DataTables

Rスクリプト

if(!require("DT")){install.packages("DT")}; library(DT)

datatable(iris, options = list(pageLength = 5))

CodePenでの出力結果

See the Pen datatable by skume (@kumes) on CodePen.

MetricsGraphics

Rスクリプト

if(!require("metricsgraphics")){install.packages("metricsgraphics")}; library(metricsgraphics)
if(!require("magrittr")){install.packages("magrittr")}; library(magrittr)

mjs_plot(mtcars, x=wt, y=mpg) %>%
  mjs_point(color_accessor=carb, size_accessor=carb) %>%
  mjs_labs(x="Weight of Car", y="Miles per Gallon")