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

Question

Так что мне нужно построить что-то вроде этого, используя библиотеку Vega:

Теперь я супер n00b, поэтому, пожалуйста, помилуй.

Первое решение: использовать какое-то условное форматирование (как в Excel): если значение бара <0, сделайте его красным. Если значение бара> 0, сделайте его зеленым. Я мог найти некоторый условный синтаксис для Vega-Lite, который дал мне надежду, но как я могу перевести синтаксис в нормальный Vega, я понятия не имею.

Во-вторых, я подумал об использовании некоторой цветовой схемы для диапазонов, таких как те, которые имеют порог. Но я совершенно запутался в том, какой тип диапазона шкалы использовать, и заметил, что существует связь между типом диапазона шкалы и цветовыми схемами, так что да. Confused.

Тогда мой коллега предложил это: https://vega.github.io/editor/#/examples/vega-lite/layer_bar_annotations

Итак, в примере мы видим, что значение бара выше порога имеет условное форматирование. Поэтому я попытался отфильтровать данные, чтобы получить 2 подмножества: values_lower_than_0 и values_higher_than_0 использовать их в качестве источников для меток. Но, похоже, я не знаю, как фильтровать. Мои данные выглядят так:

[
  { "date": "2018-12-10", "difference": 20 }, 
  { "date": "2018-10-21", "difference": -10 }
  ...
]

Итак, я применяю к нему преобразование:

...

{
      'name': 'values_lower_than_0',
      'source': 'temps',
      'transform': [{ 'type': 'filter', 'expr': 'datum.difference.Value < 0' }]
}

Но когда я использую values_lower_than_0 в метках, кажется, ничего не происходит.

Итак, у меня есть 2 вопроса:

• Это лучший подход для построения такой диаграммы? (Tbh, это кажется мне довольно запутанным).
• Если да, то как мне получить два набора данных и использовать их для получения правильных цветов?

Answer 1

Лучшим подходом будет тот, в котором преобразования к набору данных не применяются.

Взяв пример из здесь

Идея состоит в том, чтобы установить y2 значение как середина Height.y будет затем корректироваться в зависимости от того, является ли значение отрицательным или положительным для значения ниже midHeight или выше midHeight соответственно.Пожалуйста, обратитесь к rect типу конфигурации конфига ниже.

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 600,
  "height": 360,
  "autosize": "fit",
  "data": [
    {
      "name": "table",
      "url": "https://uat.gramener.com/vega/chart/data/pos-neg-items.json"
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "table",
        "field": "category"
      },
      "range": "width",
      "padding": 0.2,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {
        "data": "table",
        "field": "amount"
      },
      "nice": true,
      "range": "height"
    }
  ],
  "marks": [
    {
      "name": "bars",
      "type": "rect",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "category"
          },
          "width": {
            "scale": "xscale",
            "band": 1
          },
          "y": {
            "scale": "yscale",
            "field": "amount"
          },
          "y2": {
            "signal": "scale('yscale', 0)"
          },
          "fill": {
            "signal": "datum['amount'] > 0 ? '#5CB38B' : '#E6685C'"
          },
          "tooltip": {
            "signal": "datum"
          }
        }
      }
    },
    {
      "name": "item_score",
      "type": "text",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "category"
          },
          "y": {
            "scale": "yscale",
            "field": "amount"
          },
          "dy": {
            "signal": "datum['amount'] > 0 ? -4 : 14"
          },
          "dx": {
            "signal": "bandwidth('xscale')/2"
          },
          "align": {
            "value": "center"
          },
          "fill": {
            "value": "black"
          },
          "text": {
            "field": "amount"
          },
          "fontSize": {
            "value": 12
          }
        }
      }
    },
    {
      "name": "item_name",
      "type": "text",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "category"
          },
          "dx": {
            "value": 20
          },
          "dy": {
            "signal": "datum['amount'] > 0 ? height/2 + 14 : height/2 - 6"
          },
          "align": {
            "value": "center"
          },
          "fill": {
            "value": "#000000"
          },
          "text": {
            "field": "category"
          },
          "fontSize": {
            "value": 12
          }
        }
      }
    }
  ]
}

Answer 2

Я так устал, я делаю глупые ошибки сегодня! Если кто-то хочет использовать третий подход, описанный выше, тогда я был прав, просто передавал неверное имя источника метке.

Еще одно замечание: вам нужно рассчитать только одно подмножество для отрицательных значений (например, values_lower_than_0).

Как только вы это сделаете, у вас будет отметка bars для всех баров (как по умолчанию, с зеленой заливкой). Источником данных для этой отметки будут данные по умолчанию. Поверх этой отметки вы примените вторую отметку, которая называется negative_bars (например), источником которой будет values_lower_than_0, и вы выделите ее красной заливкой.

Мой вопрос о наилучшем подходе остается в силе.