読者です 読者をやめる 読者になる 読者になる

RからChartist.jsのグラフを描くパッケージをつくりました

R htmlwidgets JavaScript chartist

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

Chartist.jsとは

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

https://camo.githubusercontent.com/94945a321590fdcacb037179ac5ac45795b919dc/68747470733a2f2f7261772e6769746875622e636f6d2f67696f6e6b756e7a2f63686172746973742d6a732f646576656c6f702f736974652f696d616765732f63686172746973742d6775792e676966

特長

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

欠点

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

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

インストール

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:plainf:id:yutannihilation:20150223001755p:plainf:id:yutannihilation:20150223001801p:plain

アニメーション

SVG_animate()でアニメーションを付けられます。「どの要素の」(axisbarpointなど)「どのパラメータに」(opacityx1x2など)「いくつの値から」開始するかを選べます。

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

たとえば、棒グラフの場合は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)

f:id:yutannihilation:20150223004557g:plain

アニメーションの例は、RPubsにもいくつかアップしています。ちょっと上のパラメータはどんなのがあるか私も完全に把握できてなくて、うまく解説できません。。

使ってみて何かあれば

まだまだバグが多いですが、使ってみて変なところとか要望とかあれば、このブログのコメント欄、Twitter、またはIssuesまでお知らせください。