京橋のバイオインフォマティシャンの日常

まずは、データ分析、コマンドラインのメモとして

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

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

www.htmlwidgets.org

今回、htmlwidgetsのshowcaseにある12パッケージをHatena Blog内の図表として表示するにあたって、(1)Html 出力の可否 、(2)CodePen対応できるか?、さらには(3)ブログ表示できるか?を調べてみた。

とりあえず、結果

パッケージ 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")

CodePenでの出力結果

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

まとめ

CodePenの1MB制限で、Plotly、rbokeh、Highcharter、visNetwork、threejs、DiagrammeRがCodePenで保存できない。

うすうす気付いてたけど、Plotlyのhtml出力はやや重過ぎるので、Webコード共有には不向き。

visNetworkの結果は貼付できないけど、networkD3の結果は貼付できるという不思議な結果になった。。

CodePenでの保存ができると、だいたいブログでも表示できるっぽい。