Vega-lite 项目：风险矩阵

Question

I am quite a newbie when it comes to vega and would appreciate any help. I am currently creating a risk matrix with the two dimensions "damage potential" and "risk exposure". The ultimate goal is to use in within PowerBI.

My current status can be seen here: https://vega.github.io/editor/#/gist/d534904674d14f005e7cb08811dc8b62/spec.json

Now I face two main challenges:

• How is it possible to color the fields so that the matrix looks like this: risk matrix picture
• How can I populate the fields where there is no number so far (in this case: Damage: medium; Exposure: medium) with a 0?

Any help is welcome. :)

Answer 1

Here you go.

Editor.

{
  "$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"}}
}