htmlwidgetsを使って、RからChartist.jsのグラフを描くライブラリをつくりました。つくりました、というかまだ完成してないんですけど、キリがないのでとりあえずブログに書きます。

Chartist.jsとは

ポップでシンプルなグラフが描けるJavascriptのライブラリです。GithubのData Visualization Showcaseで見つけました。

特長

シンプル
- パラメータが少ない
- 依存ライブラリがない
アニメーションがつけれて楽しい
おしゃれ
レスポンシブ

欠点

シンプルすぎる
- 横軸の点と点の距離が一定（日次とか週次とか刻み幅が一定のデータにしか使えない）
- 凡例がつけられない

という感じです。実用上使う場面はあんまりないと思いますが、アニメーション楽しいのでよしとしましょう！

インストール

Githubからインストールしてください。

devtools::install_github("yutannihilation/chartist")

使い方

データ形式

Chartist.jsは、

系列が別々の列に分かれていて
横軸のラベル用の列がひとつある

形式のデータを取ります。tidy dataじゃないです。手元のデータがtidyなやつの場合は、tidyr::spread()を使いましょう。

library(chartist)

set.seed(324)
data <- data.frame(
  day = paste0("day", 1:10),
  A   = runif(10, 0, 10),
  B   = runif(10, 0, 10),
  C   = runif(10, 0, 10)
)

data
#>      day         A        B        C
#> 1   day1 7.2902036 8.884964 3.396928
#> 2   day2 4.2364850 8.311927 1.910453
#> 3   day3 5.7661580 8.972302 6.368477
#> 4   day4 0.9934177 5.757583 9.620946
#> 5   day5 7.0636940 2.852507 3.756567
#> 6   day6 6.0503700 4.403731 3.541817
#> 7   day7 7.1185461 2.690628 3.389233
#> 8   day8 0.6374409 7.498994 1.439151
#> 9   day9 2.6172285 1.664971 5.015511
#> 10 day10 4.8886708 7.345948 7.160097

基本のグラフ

基本的なグラフを描くには、chartist()にdata.frameと横軸のラベルとなるデータを渡します。

chartist(data, day)

すると、こんな感じのグラフが描けるはずです。

f:id:yutannihilation:20150223000848p:plain

デフォルトでは、横軸ラベルとして指定した列以外の列すべてが描画されますが、一部だけを指定したいときは、dplyr::select()のような書式で指定できます。（というか、中で使ってるのはdplyr::select_vars()です）

chartist(data, day, A, B)
chartist(data, day, A:B)
chartist(data, day, -C)

SE版もあります。

lab <- "day"
col <- c("A", "B")
chartist_(data, lab, col)

散布図、棒グラフ、円グラフ

デフォルトは折れ線グラフですが、散布図、棒グラフ、円グラフも描けます（ちなみに、散布図は折れ線グラフの線がないバージョンなだけです）。ggplot2のように+でレイヤーを足し合わせます。（それをどう実現しているかについては、こちらの記事にふわっと書きました：ggplot2のコードをなんとなく追ってみつつ自作パッケージの方針を練る - Technically, technophobic.）

注意点としては、円グラフは一系列分しかグラフを描けません。はじめの系列（このデータで言うとA列）だけが描画され、残りは無視されます。

chartist(data, day) + Point()
chartist(data, day) + Bar(stackBars = TRUE)
chartist(data, day) + Pie(donut = TRUE, donutWidth = 100)

f:id:yutannihilation:20150223001758p:plain

アニメーション

SVG_animate()でアニメーションを付けられます。「どの要素の」（axis、bar、pointなど）「どのパラメータに」（opacity、x1、x2など）「いくつの値から」開始するかを選べます。

アニメーションは重ね合わせることができます。というかむしろ、色々重ね合わせるのが楽しいです。

たとえば、棒グラフの場合はy1（棒グラフの上端）とy2（棒グラフの下端）という値があります。どちらか一つを指定するだけだと、はじめ上か下にびよーんと伸びている棒が縮んでくるようなエフェクトですが、ふたつ重ねると、棒が降ってくるかのようなアニメーションになります。

chartist(data, day) +
    Bar(stackBars = TRUE) +
    SVG_animate(target = "bar", offset = -1000, style = "y1", delay = 10) +
    SVG_animate(target = "bar", offset = -1000, style = "y2", delay = 10)