Условная непрозрачность для текста составной гистограммы

Я хочу скрыть текстовые метки, когда ширина полосы стека составляет менее 10% от общей ширины полосы, обозначенной знаком «x» в этом макете.

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

Существует много записей с одной и той же категорией и значением y, поэтому их необходимо агрегировать.

Вот моя попытка: я могу скрыть метки по мере необходимости, если покажу процент,

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

{
  "data": {"name": "dataset"},
  "encoding": {
    "y": {
      "title": null,
      "field": "yval",
      "sort": "descending"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"},
        "order": {"field": "category"}
      }
    },
    {
      "transform": [
        {
          "joinaggregate": [
            {
              "op": "sum",
              "field": "xval",
              "as": "xtotal"
            }
          ],
          "groupby": ["yval"]
        },
        {
          "joinaggregate": [
            {
              "op": "sum",
              "field": "xval",
              "as": "cat_total"
            }
          ],
          "groupby": [
            "yval",
            "category"
          ]
        },
        {
          "calculate": "datum.cat_total/datum.xtotal",
          "as": "cat_perc"
        }
      ],
      "mark": {"type": "text"},
      "encoding": {
        "x": {
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum",
          "stack": "zero",
          "bandPosition": 0.5
        },
        "text": {"field": "cat_perc", "format": ".0%"},
        "color": {"value": "black"},
        "opacity": {
          "condition": {
            "test": "datum.cat_perc < 0.1",
            "value": 0
          },
          "value": 1
          
        },
        "order": {"field": "category"}
      }
    }
  ]
}

Я хочу заменить это

"text": {"field": "cat_perc", "format": ".0%"},

с этим

"text": {"field": "cat_total"},

Набор данных:

category,xval,yval
a,1,top
a,3,bottom
b,1,bottom
b,5,top
c,8,top
c,9,bottom

vega-lite deneb

02.06.2024 15:09

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

{
  "data": {
    "values": [
      {"category": "a", "xval": 1, "yval": "top"},
      {"category": "b", "xval": 5, "yval": "top"},
      {"category": "c", "xval": 8, "yval": "top"},
      {"category": "a", "xval": 3, "yval": "bottom"},
      {"category": "b", "xval": 1, "yval": "bottom"},
      {"category": "c", "xval": 9, "yval": "bottom"}
    ]
  },
  "transform": [
    {
      "joinaggregate": [{"op": "sum", "field": "xval", "as": "xtotal"}],
      "groupby": ["yval"]
    },
    {
      "joinaggregate": [{"op": "sum", "field": "xval", "as": "cat_total"}],
      "groupby": ["yval", "category"]
    },
    {"calculate": "(datum.cat_total/datum.xtotal)*100", "as": "cat_perc"}
  ],
  "encoding": {
    "y": {"title": null, "field": "yval", "type": "nominal", "sort": "-y"},
    "x": {
      "title": null,
      "field": "xval",
      "type": "quantitative",
      "aggregate": "sum"
    },
    "order": {"sort": "ascending", "field": "category"}
  },
  "layer": [
    {
      "mark": {"type": "bar", "tooltip": true},
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"},
        "order": {"field": "category"},
        "tooltip": [
          {"field": "category", "type": "nominal", "title": "Category"},
          {"field": "yval", "type": "nominal", "title": "Y"},
          {
            "field": "xval",
            "type": "quantitative",
            "title": "X",
            "format": ".0f"
          },
          {
            "field": "cat_perc",
            "type": "quantitative",
            "title": "%",
            "format": ".1f"
          }
        ]
      }
    },
    {
      "transform": [{"filter": "datum.cat_perc >= 10"}],
      "mark": {
        "type": "text",
        "color": {"expr": "datum.category === 'b' ? 'black' : 'white'"}
      },
      "encoding": {
        "x": {
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum",
          "stack": "zero",
          "bandPosition": 0.5
        },
        "text": {"field": "xval", "format": ".0f"},
        "tooltip": [
          {"field": "category", "type": "nominal", "title": "Category"},
          {"field": "yval", "type": "nominal", "title": "Y"},
          {
            "field": "xval",
            "type": "quantitative",
            "title": "X",
            "format": ".0f"
          },
          {
            "field": "cat_perc",
            "type": "quantitative",
            "title": "%",
            "format": ".1f"
          }
        ]
      }
    }
  ]
}

Только что обновил (16:36)

— 02.06.2024 16:37

02.06.2024 16:23

Ответ принят как подходящий

Поскольку cat_perc не используется, он недоступен для другой логики, поскольку не включен в набор данных. Когда я добавляю это значение во всплывающую подсказку, все работает нормально. Надеюсь это поможет.

{
"data": {
    "values": [
      {"category": "a", "xval": 1, "yval": "top"},
      {"category": "b", "xval": 5, "yval": "top"},
      {"category": "c", "xval": 8, "yval": "top"},
      {"category": "a", "xval": 3, "yval": "bottom"},
      {"category": "b", "xval": 1, "yval": "bottom"},
      {"category": "c", "xval": 9, "yval": "bottom"}
    ]
  },
  "encoding": {
    "y": {
      "title": null,
      "field": "yval",
      "sort": "descending"
    },
    "tooltip": [
          {"field": "category", "type": "nominal", "title": "Category"},
          {"field": "yval", "type": "nominal", "title": "Y"},
          {
            "field": "xval",
            "type": "quantitative",
            "title": "X",
            "format": ".0f"
          },
          {
            "field": "cat_perc",
            "type": "quantitative",
            "title": "%",
            "format": ".1f"
          }
        ]
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "title": null,
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum"
        },
        "color": {"field": "category"},
        "order": {"field": "category"}
      }
    },
    {
      "transform": [
        {
          "joinaggregate": [
            {
              "op": "sum",
              "field": "xval",
              "as": "xtotal"
            }
          ],
          "groupby": ["yval"]
        },
        {
          "joinaggregate": [
            {
              "op": "sum",
              "field": "xval",
              "as": "cat_total"
            }
          ],
          "groupby": [
            "yval",
            "category"
          ]
        },
        {
          "calculate": "datum.cat_total/datum.xtotal",
          "as": "cat_perc"
        }
      ],
      "mark": {"type": "text"},
      "encoding": {
        "x": {
          "field": "xval",
          "type": "quantitative",
          "aggregate": "sum",
          "stack": "zero",
          "bandPosition": 0.5
        },
        "text": {"field": "xval", "format": ".0f"},
        "color": {"value": "black"},
        "opacity": {
          "condition": {
            "test": "datum.cat_perc < 0.1",
            "value": 0
          },
          "value": 1
          
        },
        "order": {"field": "category"}
      }
    }
  ]
}

02.06.2024 20:52

Другие вопросы по теме

Денеб — диаграмма рассеяния x и y, отсортированная по возрастанию

Vega Lite — создание итогов на сгруппированном уровне

Почему линейная диаграмма не отображает показатели, имеющие одинаковое значение по оси X в Power BI?

VEGA LITE: интервал между категориями с фиксированным порядком

Плавная анимация растущей полосы

ВЕГА — пользовательское минимальное значение для оси Y на гистограмме

Ширина динамической этикетки Vega-Lite (реактивная геометрия)

Визуальная настройка образца дерева разложения

Последняя версия Deneb не поддерживает прокрутку при переполнении данных

Кто-нибудь создавал совместный график (Плотность посередине/Распределение по оси) в Power BI без Python/R? Как?

Условная непрозрачность для текста составной гистограммы

Ответы 2

Другие вопросы по теме

Похожие вопросы