Vega-lite 項目：風險矩陣

Question

說到維加，我是個新手，非常感謝任何幫助。 我目前正在創建一個風險矩陣，其中包含“潛在損害”和“風險暴露”兩個維度。 最終目標是在PowerBI內使用。

我的當前狀態可以在這里看到： https://vega.github.io/editor/#/gist/d534904674d14f005e7cb08811dc8b62/spec.json

現在我面臨兩個主要挑戰：

• 如何為字段着色以使矩陣看起來像這樣：風險矩陣圖片
• 我如何用 0 填充到目前為止沒有數字的字段（在本例中：損壞：中；曝光：中）？

歡迎任何幫助。 :)

Answer 1

給你 go。

編輯。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://gist.githubusercontent.com/Hatico90/ec1d58ef5fe5d91cf6438e66fcd40bf0/raw/c5737c70fd45807a8435f2a97fe17fbc03bddf2b/riskmatrix",
    "format": {"type": "json"}
  },
  "width": 500,
  "height": 500,
  "transform": [
    {
      "pivot": "Exposure",
      "groupby": ["Damage"],
      "value": "Index",
      "op": "count"
    },
    {"fold": ["high", "low", "medium"]}
  ],
  "encoding": {
    "y": {
      "field": "key",
      "type": "ordinal",
      "scale": {"domain": ["high", "medium", "low"]}
    },
    "x": {
      "field": "Damage",
      "type": "ordinal",
      "scale": {"domain": ["low", "medium", "high"]}
    }
  },
  "layer": [
    {
      "mark": "rect",
      "data": {
        "values": [
          {"x": "low", "y": "low", "t": "green"},
          {"x": "low", "y": "medium", "t": "green"},
          {"x": "low", "y": "high", "t": "yellow"},
          {"x": "medium", "y": "low", "t": "green"},
          {"x": "medium", "y": "medium", "t": "yellow"},
          {"x": "medium", "y": "high", "t": "red"},
          {"x": "high", "y": "low", "t": "yellow"},
          {"x": "high", "y": "medium", "t": "red"},
          {"x": "high", "y": "high", "t": "red"}
        ]
      },
      "encoding": {
        "color": {
          "type": "nominal",
          "field": "t",
          "scale": {"range": {"field": "t"}},
          "legend": null
        },
        "y": {
          "field": "y",
          "type": "ordinal",
          "scale": {"domain": ["high", "medium", "low"]}
        },
        "x": {
          "field": "x",
          "type": "ordinal",
          "scale": {"domain": ["low", "medium", "high"]}
        }
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {"text": {"field": "value", "type": "quantitative"}}
    }
  ],
  "config": {"axis": {"grid": true, "tickBand": "extent"}}
}