tags. 🔖DataScience 🔖DSL
Vega及びVega-Liteについて.
Vega: データ可視化記述フォーマット
JSON形式でデータを記述して変換エンジンに食わせるとデータプロットできる. グラフを変換して表示されることを前提として, データ構造として宣言的に定義することができる. たとえば, matplotlibのような専用のライブラリに依存しない.
🔧Vega-Lite
軽量かつ高度なVegaラッパー.
Python Bindingsに📝Altairがある. Clojureは, 📝Clojure: Ozを参照.
Infos
- links.
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}とすること.
(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"}})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"}}}]})逆引き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
References
謎の優良な説明資料.
🎮Next in Data Visualization - MIT
MITによる次世代データ視覚化にインタラクティブ性が必要な理由のプレゼン. 少し夢を感じた.
Next in Data Visualization | Arvind Satyanarayan || Radcliffe Institute - YouTube
- Vega-liteの宣言性が優れている.
- インタラクティブ性はデータとドメインの実験シャーレとなる.