# (01)網頁圖表的第一天：Vega-Lite介紹
###### tags: `Vega-lite` `Note`

在進行資料分析後，為了可以有效並且充分的表達分析結果，讓其他人一眼即可看出你做出的貢獻，需要的就是**漂漂亮亮**的圖表結果。

但普遍而言，要產生圖表大多是依靠程式內直接執行圖表命令生成，並截圖後才可進行記錄，這將導致要修改圖片時得大費周章的重新啟動程式並修改程式碼來調整顯示樣貌，麻煩...

為了讓自己的結果可以簡單有效的呈現出來，在網路上搜尋後，發現了這一款圖表語法。

[](https://vega.github.io/vega-lite/)

在看了他的demo結果後，真的是有一點點心動，所以接下來就來記錄整個學習過程拉~

---

## Vega-Lite簡介

[Vega-Lite](https://)是一個高階的互動式圖形語法，可透過輸入資料，用簡單的語法即完成圖表，下面為官網首頁Demo的圖片，可以使用的圖標種類真的十分的豐富。


並且使用者的陣容也十分強大(~~看起來短期內會持續更新而不會被丟包吧~~)


以下為展示結果
:::success

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 300, "height": 200,
  "data": {"url": "https://vega.github.io/vega-lite-v1/data/unemployment-across-industries.json"},
  "mark": "area",
  "encoding": {
    "x": {
      "timeUnit": "yearmonth", "field": "date", "type": "temporal",
      "axis": {"format": "%Y"}
    },
    "y": {
      "aggregate": "sum", "field": "count", "type": "quantitative"
    },
    "color": {
      "field": "series",
      "type": "nominal",
      "scale": {"scheme": "category20b"}
    }
  }
}

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 300, "height": 200,
  "data": {"url": "https://vega.github.io/vega-lite-v1/data/unemployment-across-industries.json"},
  "mark": "area",
  "encoding": {
    "x": {
      "timeUnit": "yearmonth", "field": "date", "type": "temporal",
      "axis": {"format": "%Y"}
    },
    "y": {
      "aggregate": "sum", "field": "count", "type": "quantitative"
    },
    "color": {
      "field": "series",
      "type": "nominal",
      "scale": {"scheme": "category20b"}
    }
  }
}

:::

簡單明瞭且十分強大，如果想要修改圖表樣式，只要修改網頁上的程式碼即可
:+1: 。

之後將依據Tutorial對功能進行紀錄

[網頁圖表的第二天：Vega-Lite Tutorial Overview](https://hackmd.io/@treegi/H1ecgWDvU)