# (02)網頁圖表的第二天：Vega-Lite Tutorial Overview
###### tags: `Vega-lite` `Note`
今天來記錄Vega-Lite中Getting Started[^Getting_Started]的部分。
## 在Vega-Lite的格式概述：
首先，我先列出一個簡易的Vega-Lite格式，格式如下：
:::success
Vega-Lite圖表
```vega
{
"data": {
"values": [
{"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4},
{"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6},
{"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7}
],
"name": null,
"format": null
},
"mark": "bar",
"encoding": {``
"x": {"field": "a", "type": "nominal"},
"y": {"aggregate": "average", "field": "b", "type": "quantitative"}
}
}
```
Vega-Lite Code
```json=
{
"data": {
"values": [
{"a": "C", "b": 2}, {"a": "C", "b": 7}, {"a": "C", "b": 4},
{"a": "D", "b": 1}, {"a": "D", "b": 2}, {"a": "D", "b": 6},
{"a": "E", "b": 8}, {"a": "E", "b": 4}, {"a": "E", "b": 7}
],
"name": null,
"format": null
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal"},
"y": {"aggregate": "average", "field": "b", "type": "quantitative"}
}
}
```
:::
而在Vega-Lite Getting Started Code中，我們上面說道的格式進行拆解，並可以的劃分為以下三類：
1. data
: 資料矩陣
>Json格式的矩陣，例如
```json
[ {"a": "C", "b": 2},
{"a": "C", "b": 7},
{"a": "C", "b": 4}]
```
2. mark
: 圖表種類
>比如說點圖(point)，直方圖(bar)
```json
"mark": "bar",
```
3. encoding
: 資料顯示方式
>哪筆資料為X軸，哪筆資料為Y軸，以及axis的顯示名稱控制
```json
"encoding": {
"x": {"field": "a", "type": "nominal"},
"y": {"aggregate": "average", "field": "b", "type": "quantitative"}
}
```
---
## Data
資料集合的格式定義了程式該如何讀取它。基本上，Vega Lite使用表格數據集(Tabular data set)的資料，比如說電子試算表(spreadsheet)或是資料庫的表格(database table)等。
### Vega Lite支援多種資料輸入方式
Vega Lite實際上支援多種輸入方式：
1. Inline Data
: 直接將資料數值輸入於code中。
3. Data from URL
: 透過自動讀取url中的資料，自動將資料轉為所需格式，支援種類有`json`, `csv`, `tsv`, `dsv`
1. Named Data Sources
: 從伺服器中讀取檔案資料
> 由於才剛接觸，因此以下先以最簡單的Inline Data進行介紹。詳細規格請詳讀[^data]。
### 表格與Json格式轉換與定義方式
若要表示Tabular data，Vega Lite標準上市使用json格式的資料進行定義，以下將進行定義方式的舉例。
* **假設有一筆資料如下：**
| name | data |
|:----:|:----:|
| a | 2 |
| b | 5 |
| c | 6 |
| d | 1 |
在json中，主要可以將資料拆解為`key`以及`value`，也就是說上方的表格如果使用json進行表示，`key`即為`"data"`，而`value`即為2,5,6,1的資料
* **json格式表示為：**
```json
[ {"name": "a", "data": 2},
{"name": "b", "data": 5},
{"name": "c", "data": 6},
{"name": "d", "data": 1} ]
```
:::info
注意，如果將格式寫成
```json
[ {"name": ["a","b","c","d"],"data": [2,5,6,1]}]
```
實際的表格將如下，與上方表格所表示的排列方式有所出入，需要注意。
| name | data |
|:-----------------:|:---------:|
| ["a","b","c","d"] | [2,5,6,1] |
:::
* **如果是更複雜一點的資料表格：**
| series | year | month | count | rate | date |
|:----------:|:----:|:-----:|:-----:|:----:|:------------------------:|
| Government | 2000 | 1 | 200 | 3.2 | 2000-01-01T08:00:00.000Z |
| Government | 2000 | 3 | 500 | 5.1 | 2000-03-01T08:00:00.000Z |
| Government | 2000 | 5 | 700 | 4.5 | 2000-05-01T07:00:00.000Z |
* **josn的格式如下**
```json
[
{"series":"Government","year":2000,"month":1,"count":200,"rate":3.2,"date":"2000-01-01T08:00:00.000Z"},
{"series":"Government","year":2000,"month":3,"count":500,"rate":5.1,"date":"2000-03-01T08:00:00.000Z"},
{"series":"Government","year":2000,"month":5,"count":700,"rate":4.5,"date":"2000-05-01T07:00:00.000Z"}
]
```
### 加入Vega Lite的Inline語法
在了解表格如何轉換成json格式後，我們需要將完成後的json資料依據Vega Lite的規格進行定義。
* 在Data中，主要有3個Inline Data，分別為：
| 屬性 | 種類 | 功能敘述 |
|:----:|:----:|:-------- |
| values | Inline Dataset |***(必須)*** 可以是矩陣、數值資料、物件、字串(字串將依據format進行解析) |
| name | String | placeholder |
| format | [DataFormat][DataFormat_url] | Text |
實際code中的格式如下：
```json
{
"data": {
"values": null,
"name": null,
"format": null
}
}
```
為了讓Vega Lite的圖表可讀取我們所輸入的json資料，需要將我們先前定義的json資料格式放入`data`的`values`屬性中，而由於`name`以及`format`屬性在此次中並無使用，故定義為`null`(或直接刪除)，結果如下：
```json
{
"data": {
"values": [
{"name": "a", "data": 2},
{"name": "b", "data": 5},
{"name": "c", "data": 6},
{"name": "d", "data": 1}
],
"name": null,
"format": null
}
}
```
完成後我們即可在往後的`encode`中使用此次定義的資料囉。
[DataFormat_url]:https://vega.github.io/vega-lite/docs/data.html#format "https://vega.github.io/vega-lite/docs/data.html#format"
---
## Encoding Data with Marks
現在，我們已經完成資料建立了，接下來就可以進行圖表種類和顯示方式的定義~
### Marks[^marks]
Vega Lite支援眾多的圖表格式，文件中提到了`area`、 `bar`、 `circle`、 `line`、 `point`、 `rect`、 `rule`、 `square`、 `text`、 `tick`、 以及 `geoshape`
### Marks與Encoding的搭配使用
:::success
```vega
{
"data": {
"values": [
{"name": "a", "data": 2},
{"name": "b", "data": 5},
{"name": "c", "data": 6},
{"name": "d", "data": 1}
]
},
"mark": "point",
"encoding": {}
}
```
```json=
{
"data": {
"values": [
{"name": "a", "data": 2},
{"name": "b", "data": 5},
{"name": "c", "data": 6},
{"name": "d", "data": 1}
]
},
"mark": "point",
"encoding": {}
}
```
:::
:::success
```vega
{
"data": {
"values": [
{"name": "a", "data": 2},
{"name": "b", "data": 5},
{"name": "c", "data": 6},
{"name": "d", "data": 1}
]
},
"mark": "point",
"encoding": {
"x": {"field": "name", "type": "nominal"}
}
}
```
```json=
{
"data": {
"values": [
{"name": "a", "data": 2},
{"name": "b", "data": 5},
{"name": "c", "data": 6},
{"name": "d", "data": 1}
]
},
"mark": "point",
"encoding": {
"x": {"field": "name", "type": "nominal"}
}
}
```
:::
:::success
```vega
{
"data": {
"values": [
{"name": "a", "data": 2},
{"name": "b", "data": 5},
{"name": "c", "data": 6},
{"name": "d", "data": 1}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "name", "type": "nominal"},
"y": {"field": "data", "type": "quantitative"}
}
}
```
```json=
{
"data": {
"values": [
{"name": "a", "data": 2},
{"name": "b", "data": 5},
{"name": "c", "data": 6},
{"name": "d", "data": 1}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "name", "type": "nominal"},
"y": {"field": "data", "type": "quantitative"}
}
}
```
:::
---
## 後記
在Vega-Lite中，其實不僅僅只有上面提到的，還有文字轉換和計算拉`transform`、長寬設定拉`height` `width`，之類的比較進階一點的用法，往後等筆記完工後再進行轉跳工作。
[^Getting_Started]:[Vega-Lite Tutorial - Getting Started](https://vega.github.io/vega-lite/tutorials/getting_started.html "https://vega.github.io/vega-lite/tutorials/getting_started.html")
[^data]:[Vega-Lite Data詳細格式](https://vega.github.io/vega/docs/data/ "https://vega.github.io/vega/docs/data/")
[^marks]:https://vega.github.io/vega-lite/docs/mark.html "https://vega.github.io/vega-lite/docs/mark.html"
Sign in with Wallet
Connect another wallet