Livebook は Elixir版 Jupyter Notebook と言われているものです。私も Python や Julia で Jupyter Notebook を少しだけ使ったことがあり、ちょっとした利用には大変便利だと感じていたので、Livebook も試してみました。

すこし驚いたのが、Livebook は Phoenix LiveView のアプリケーションだということです。とても安定して動いているし、機能も結構豊富だということです。特にVegaLite や Kino を使って高度なグラフを描くことができるのは大変魅力的です。

この記事は 「東京電力電力供給状況監視 - Livebook」 というタイトルにすべきものでしたが、記事の趣旨が Livebook の使用感にあるため表記のタイトルとしました。
東京電力電力供給状況監視 - Phoenix LiveView

1. VegaLite と Kino について

Livebook

Livebook は Elixir版 Jupyter Notebook です

docker で動かす
docker run -p 8080:8080 -p 8081:8081 --pull always livebook/livebook

Livebook のインストール

git clone https://github.com/livebook-dev/livebook.git
cd livebook
mix deps.get --only prod

Windows コマンドプロンプトでの起動

set MIX_ENV=prod
mix phx.server

起動エラー時に試してみること

iex --sname foo

VegaLite

VegaLite は Vega-Lite の Elixir bindings です。
Vega-Lite is ハイレベルな、会話的グラフィックのための文法です。（D3.jsは低レベル）。それは宣言的な JSON 文法を使います。VegaLite　でも JSON 文法を使うことができるようですが、主に Elixir の文法が使われます。

Kino

Kino は Livebook で使われるライブラリで、Elixir コードを使って直接リッチでインタラクティブな描画を可能とするものです。
Kino は単独でも使われますが、Kino.VegaLite という形で VegaLite とともに使われることが一般的です。
しかし Kino v0.5.2 までは Kino.VegaLite がドキュメントにあるのですが、Kino v0.6.0 以降は消えています。代わりに以下の別パッケージを使うみたいです。（名前にドットが入っていないだけなので勘違いしそうですが。）関数の説明などは Kino v0.5.2 の方を参照した方が良いです。

2. Livebook のコード

必要なパッケージをインストールします。

Mix.install([
  {:vega_lite, "~> 0.1.6"},
  {:kino_vega_lite, "~> 0.1.4"},
  {:httpoison, "~> 1.8"} 
])

alias VegaLite, as: Vl

VegaLite と Kino でグラフを描きます。グラフは5分おき(300000 ms)に自動更新されます。

chart =
  Vl.new(width: 600, height: 300)
  |> Vl.mark(:line)
  |> Vl.encode_field(:x, "x", type: :quantitative )
  |> Vl.encode_field(:y, "y", type: :quantitative, scale: [domain: [3100,3400]] )
  |> Kino.VegaLite.new()
  |> Kino.render()


Kino.VegaLite.periodically(chart, 300000, 0, fn i ->
  denki =
    case HTTPoison.get("http://tepco-usage-api.appspot.com/quick.txt") do
      {:ok, %HTTPoison.Response{status_code: 200, body: body}} -> body
      {:ok, %HTTPoison.Response{status_code: 404}} -> "0,0,0"
      {:error, %HTTPoison.Error{reason: _reason}} -> "0,0,0"
    end
  [_, y, _] = String.split(denki, ",")
  point = %{x: i, y: String.to_integer(y)}
  Kino.VegaLite.push(chart, point)
  {:cont, i + 1}
end)

コードは以上なのですが、驚くほど短いです

2. 動作画像

コードとグラフが同時にキャプチャーできるなんて、Livebook っぽくてかっこいいですね。

3. Kino や VegaLite 関数の説明

new(opts \\ [])

VegaLite struct でラッピングされた新しい specification を返します。

Kino.VegaLite.new(vl)

引数の VegaLite 定義で widget process をスタートします。

Kino.render(term)

引数の term を render します。

encode_field(vl, channel, field, opts \\ [])

Adds field encoding を specification に追加します。

  |> Vl.encode_field(:y, "y", type: :quantitative, scale: [domain: [3100,3400]] )

ここでは opts として type: オプションと scale: オプションを指定しています。

Kino.VegaLite.periodically(widget, interval_ms, acc, fun)

KinoVegaLite のドキュメントには明記されてませんが、Kino.VegaLite v0.5.2 のドキュメントには以下の関数があり、そのまま KinoVegaLite でも使えるみたいです。

widget process を定期的に走らせるための callback を登録する関数
callback は **interval_ms ** ミリ秒ごとに走る
そして accumulated value を受け取る
callback 以下の2つのうちどれかをリターンしなければならない
*　{:cont, acc} - 新しい accumulated value で callback を続ける
*　:halt - もはや callback のスケジュールを停止する

今回は以上です。
コード自体は、本当に驚くほど短くて、素晴らしいプラットフォームだと感じました。しかし VegaLite の機能が豊富すぎるし、独特なので、少なからぬ試行錯誤を要しました。ドキュメントを読みこなす慣れが必要です。

Livebook 事始め (Elixir)