Визуализация различных цветов заливки / обводки в зависимости от положительного / отрицательного значения оси X - PullRequest
Новая
       93

Визуализация различных цветов заливки / обводки в зависимости от положительного / отрицательного значения оси X

1 голос
/ 26 сентября 2019

Я пытаюсь написать небольшую диаграмму для использования в анализе рисков / возможностей.Вы вводите 4 значения:

  • PreConsequence & PostConsequence (диапазон значений от -4 до +4)
  • PreLikelihood & PostLikelihood (диапазон значений от 0 до 4)

И визуализирует те с диаграммами следующим образом:

Risk / Opportunity Analysis Glyphs

Затененная заливка отображает значения Pre , в то время как обводка отображает Post значения.Геометрия в левом квадранте представляет риск и должна быть красным , в то время как геометрия в правом квадранте представляет возможность и должна быть зеленой.

Я изо всех сил пытаюсь выяснитькак проверить отрицательные значения последствий и назначить цвет соответственно.Я думаю, что это будет сделано в последних двух строках моего кода ниже: 

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 500,
  "height": 250,

  "data": [
    {
      "name": "table",
      "values": [
        {"C": -4,  "L": 0, "f":"Pre"}, {"C": 0,  "L": 4, "f":"Pre"}, 
        {"C": 0,  "L": 2, "f":"Post"}, {"C": -1,  "L": 0, "f":"Post"}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "range": "width",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "C"},
      "domainMax": 4,
      "domainMin": -4
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "domain": {"data": "table", "field": "L"},
      "domainMax": 4,
      "domainMin": 0
    },
    {
      "name": "color",
      "type": "ordinal",
      "range":"ordinal",
      "domain": {"data": "table", "field": "f"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "xscale", "tickCount": 10 },
    {"orient": "left", "scale": "yscale", "tickCount": 5, "offset": -250 }
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "f"
        }
      },
    "marks": [
    {
      "type": "area",
      "from": {"data": "series"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "C" },
          "y": {"scale": "yscale", "field": "L"},
          "y2": {"scale": "yscale", "value": 0 }, 
          "fillOpacity": [{ "test": "indata('series', 'f', 'Pre')", "value": 0.3 }, {"value": 0}],
          "strokeWidth": [{ "test": "indata('series', 'f', 'Pre')", "value": 0 }, {"value": 2}],
          "fill": [{ "test": "indata('series', 'f', 'Pre')", "value": "red" }, {"value": "red"}],
          "stroke": [{ "test": "indata('series', 'f', 'Pre')", "value": "red" }, {"value": "red"}]
        }        
      }
    }
  ]
    }
  ]
}

Может кто-нибудь дать мне несколько советов о том, как проверить значения данных и соответственно установить цвета заливки и цвета обводки?

Спасибо

1 Ответ

1 голос
/ 26 сентября 2019

Сигналы Vega могут использоваться для условного окрашивания цветов на основе значений данных.

В данной спецификации vega изменение свойства fill, как это должно делать то, что вы ожидаете, если данные имеют положительные значения квадранта Cтакже. 

          "fill": { "signal": "datum.C > 0 ? 'green': 'red'"},
...