🔧Vega

tags. 🔖DataScience 🔖DSL

Vega及びVega-Liteについて.

Vega: データ可視化記述フォーマット

JSON形式でデータを記述して変換エンジンに食わせるとデータプロットできる. グラフを変換して表示されることを前提として, データ構造として宣言的に定義することができる. たとえば, matplotlibのような専用のライブラリに依存しない.

https://vega.github.io/vega/

🔧Vega-Lite

軽量かつ高度なVegaラッパー.

Python Bindingsに📝Altairがある. Clojureは, 📝Clojure: Ozを参照.

Infos

• links.
  • https://vega.github.io/vega-lite/
  • https://github.com/vega/vega-lite
  • https://www.youtube.com/watch?v=9uaHRWj04D4
    • 開発したひとたちの紹介プレゼン.

Basic Concepts

書き方がわからないときはexamplesを参照. Online EditorからアクセスできるExampleのほうがおいてあるサンプルの数が多い(最新?).

https://vega.github.io/vega-lite/examples/

View Specicication

Vega-Liteの仕様で定義されたJSONをView Specification(Spec)という.

doc: https://vega.github.io/vega-lite/docs/

基本となる形が以下.

• spec
  • title
  • width/height
  • data
  • mark
  • encoding

Data

データソースの定義.

データの受け渡し方法には指定されたフォーマットがあるので注意. マップの配列(vector of maps)を渡す必要がある. データ本体にはvaluesというkeyが必要.

マップの配列ではなく, 配列をそのまま渡すにはdatasetという別の指定方法もある.

https://vega.github.io/vega-lite/docs/data.html

Transform

データ整形.

Mark

グラフの種類.

Encoding

x軸/y軸設定(axis).

Vega-lite: インタラクティブ

インタラクティブな操作はVega liteの目玉機能のひとつ.

Example Gallery - Interactive | Vega-Lite

---

このサイトの説明がとてもわかりやすい(図も).

Tooltips | Data Visualisation in Data Science

Tooltip

マウスをホバーすると情報が出る機能はTooltipという. 簡単な有効化は, :markのオプションで {:tooltip true}とすること.

Tooltip | Vega-Lite

(def line-plot
  {:data     {:values data}
   :encoding {:x {:field    "timestamp"
                  :type     "temporal"
                  :timeUnit "monthdatehoursminutes"
                  :title    "timestamp"}
              :y {:field "close" :type "quantitative"}}
   :mark     {:type "line" :tooltip true}})

Zooming and Panning

マウスホイールで拡大縮小.

{:params [{:name “grid” :select “interval” :bind “scales”}]}を追加.

(def line-plot
  {:data     {:values data}
   :params   [{:name   "grid" :select "interval" :bind "scales"}]
   :encoding {:x {:field "timestamp" :type "temporal"}
              :y {:field "close" :type "quantitative"}}
   :mark     {:type "line"}})

Scale Binding | Vega-Lite

Brush

範囲を指定してゴニョゴニョ.

vega-lite: グラフ別

ヒストグラム

📊ヒストグラムのvega-liteでの表示.

vega-liteでaggregateさせる場合と自分で頻度を計算する場合(bined data)の2つがある.

• https://vega.github.io/vega-lite/examples/histogram.html
• https://vega.github.io/vega-lite/examples/bar_binned_data.html

---

vaga-liteでaggregateする場合は, {:aggreage “count”}を渡すことで出現頻度ごとにcount, :bin {:binned true :step 500}を渡すと, stepごとにまとめて表示.

(def histgram
  {:data     {:values (map (fn [x] {:spread x}) spreads)}
   :encoding {:x {:field "spread"
                  :bin  {:binned true :step 500}
                  :axis  {:offset 10}}
              :y {:aggregate "count"}}
   :width    500
   :mark     {:type "bar"}})

ローソク足チャート

(def candlestick
  {:width    500
   :data     {:values data}
   :encoding {:x     {:field "timestamp"
                      :type  "temporal"
                      :title "Date/Time"
                      :axis  {:format     "%m/%d"
                              :labelAngle -45
                              :title      "Date/Time"}}
              :y     {:type  "quantitative"
                      :scale {:zero false}
                      :axis  {:title "Price"}}
              :color {:condition {:value "#06982d" ;; grean color
                                  :test  "datum.open < datum.close"}
                      :value     "#ae1325" ;; red color
                      }}
   :layer    [{:mark     "rule"
               :encoding {:y {:field "low"} :y2 {:field "high"}}}
              {:mark     "bar"
               :encoding {:y {:field "open"} :y2 {:field "close"}}}]})

---

• https://vega.github.io/vega-lite/examples/layer_candlestick.html
• Kibana でローソク足チャートを出してみる - Qiita

逆引きVega-lite

出力サイズを調整するには?

height/widthを指定する.

扱う範囲を指定して表示するには?

たとえば, 2500000みたいな大きな値の周辺の数をplotするときに, 0からの表示ではなく2000000にするには?

:scaleという属性の:domainを指定する.

(def bar-plot
    {:data     {:values bars}
     :encoding {:x {:field    "timestamp"
                    :type     "temporal"
                    :timeUnit "datehoursminutes"}
                :y {:field "close" :type "quantitative"
                    :scale {:domain [2000000 2500000]}}}
     :mark     {:type "line"}})

X軸/Y軸にmarginをいれるには?

{:encoding {:x {:axis {:offset 10}}}}

累積和(Cumulative Sum)を表示するには?

transformにwindowオプション(op=sum)を指定する.

(def cum-spec
  {:mark      {:type "line"}
   :data      {:values vl-values}
   :transform [{:window [{:op    "sum"
                          :field "rebate"
                          :as    "cum"}]}]
   :encoding  {:x     {:field "datetime" :type "temporal"}
               :y     {:field "cum" :type "quantitative"}}})

自分で計算するよりもずっと楽であり, こういう機能が描写ツールとして組み込まれているところがvegaの強力な利点なことは強調したい. 言い換えればデータとラムダ抽象を宣言的に定義するとグラフが描写される.

Other Tips

気づいたこと.

時刻はローカルタイムで扱うとよい

ゾーンタイムはそのままではvegaでは使えないので文字列にするかlocal timeに変換する必要がある. データ処理を考えるとlocal timeがstringよりもベター.

📝Altair

VegaのPython Wrapperであり, Pythonでインタラクティブなグラフを表示できる. Plotyの対抗馬.

---

口コミツイート.

• https://twitter.com/Nagi7692/status/1301175266580938753
• https://twitter.com/saruo_hunbook/status/1499764724216385538

---

• 🔖Python

References

• vega-liteの基本 - Qiita

謎の優良な説明資料.

• Data Visualisation in Data Science | Data Visualisation in Data Science

🎮Next in Data Visualization - MIT

MITによる次世代データ視覚化にインタラクティブ性が必要な理由のプレゼン. 少し夢を感じた.

Next in Data Visualization | Arvind Satyanarayan || Radcliffe Institute - YouTube

• Vega-liteの宣言性が優れている.
• インタラクティブ性はデータとドメインの実験シャーレとなる.

References

• 📝Clojure: Oz