предотвратить перекрытие полос гистограммы

Я создаю отображение для 4-х похожих гистограмм. Вот что у меня есть:

{
  "data": {
    "values": {
      "one":[8,8,7,8,7,8,8,8,8,8,8,8,8,8,9,9,8,8,8,8,8,7,9,8,8,8,8,9,8,7,8,7,8,8,8,8,7,9,8,8,8,8,8,7,8,7,9,8,8,7,9,7,8,8,8,8,8,8,7,9,8,8,8,9,8,8,8,8,8,8,7,8,8,8,9,8,8,8,9,8,8,8,8,9,8,8,8,8,9,8,9,8,8,7,8,9,8,8,8,9], 
      "two":[3,4,4,4,4,4,4,4,4,3,4,4,3,3,4,3,4,4,3,4,4,4,4,4,4,3,4,4,3,4,3,4,3,4,4,4,4,4,4,4,4,4,4,3,4,3,4,3,4,4,4,3,3,4,4,3,4,4,3,4,4,3,4,4,4,3,4,4,3,3,4,4,3,3,4,4,3,4,4,4,4,4,4,4,4,4,4,3,4,4,4,4,4,4,4,4,4,4,4,4],
      "three": [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3], 
      "four":[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]
    }
  },
  "transform": [{"flatten": ["one", "two", "three", "four"]}, {"fold": ["one", "two", "three", "four"]}],
  "mark": {"type": "bar"},
  "encoding": {
    "x": {"field": "value", "type": "quantitative"},
    "y": {
      "field": "value",
      "type": "quantitative",
      "aggregate": "count",
      "stack": null
    },
    "color": {"field": "key", "type": "nominal"}
  }
}

https://vega.github.io/editor/#/url/vega-lite/N4IgJghgLhIFygG4QDYFcCmBneoD2AdhvANoAcANJQOxUW2WN1MsUCc7zXNnrlHPQd3q9hQ2gLoSRfLtNaTZQporqqVY0aoaiVAXQogoAdzykAzBQAs12zft2Klh5edPHbh1-cvbbz47e3v5+ge4BER5hkTFRQWHBCUlBBkYAFgBOGMRwJK7hBflFhSXFZaUV5VWVNdV1tQ31TY21qQBmeGgZFi3Nfb0lNv3VQwPDYxPjdXoAvjOGUBkQBFgdGQC2pKBtKNBQGASkIITEC6YgC5nZFyAdXSCzFNt4KGBHJzcmZpdZp7ed3VmqXWEAyAGtcEYAJ4ABxyIAARqCQPMQAcAMZ4MAASwIAHNIQAPSFtbEYV7wEDIdB-KCw+EARzQyyg2JgrMQxFRUJJZIpcCpqEwn3plKZLLZ0GxnJuEDxeKyeOg8MxaAIUBuWBg6IhcAIaBQKFRmJQeG6CFufLeArBGB5C1FAoIeHWuNQKLmQA

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

Я хотел бы попробовать разместить столбцы гистограмм рядом друг с другом, как это Пример Matplotlib:

мульти-гистограмма с полосы рядом друг с другом

Как это сделать в Vega Lite?


data-visualization histogram vega-lite vega
person Nate Glenn    schedule 07.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вы ищете сгруппированную столбчатую диаграмму. Для ваших данных, вы могли бы последовать этому примеру и сделать что-то вроде этого (: nofollow"> nofollow

{
  "data": {
    "values": {
      "one":[8,8,7,8,7,8,8,8,8,8,8,8,8,8,9,9,8,8,8,8,8,7,9,8,8,8,8,9,8,7,8,7,8,8,8,8,7,9,8,8,8,8,8,7,8,7,9,8,8,7,9,7,8,8,8,8,8,8,7,9,8,8,8,9,8,8,8,8,8,8,7,8,8,8,9,8,8,8,9,8,8,8,8,9,8,8,8,8,9,8,9,8,8,7,8,9,8,8,8,9], 
      "two":[3,4,4,4,4,4,4,4,4,3,4,4,3,3,4,3,4,4,3,4,4,4,4,4,4,3,4,4,3,4,3,4,3,4,4,4,4,4,4,4,4,4,4,3,4,3,4,3,4,4,4,3,3,4,4,3,4,4,3,4,4,3,4,4,4,3,4,4,3,3,4,4,3,3,4,4,3,4,4,4,4,4,4,4,4,4,4,3,4,4,4,4,4,4,4,4,4,4,4,4],
      "three": [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3], 
      "four":[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,3,3,3,3,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]
    }
  },
  "transform": [
    {"flatten": ["one", "two", "three", "four"]},
    {"fold": ["one", "two", "three", "four"]}
  ],
  "mark": {"type": "bar"},
  "encoding": {
    "x": {"field": "key", "type": "nominal", "axis": null},
    "column": {
      "field": "value",
      "type": "quantitative",
      "spacing": 2,
      "header": {"titleOrient": "bottom", "labelOrient": "bottom"}
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "aggregate": "count",
      "stack": null
    },
    "color": {"field": "key", "type": "nominal"}
  },
  "width": {"step": 12},
  "config": {"view": {"stroke": "transparent"}, "axis": {"domainWidth": 1}}
}

введите описание изображения здесь

person jakevdp    schedule 08.07.2020