Как создать легенду для многослойного линейного графика

Question

В основном то, что у меня есть, - это линейный график, состоящий из нескольких линейных графиков. Поскольку каждый график состоит только из одной линии, автоматически не создается легенда, так как лучше всего получить легенду для диаграммы? Я пытался преобразовать свой набор данных. Это общее количество смертей за неделю из cd c с 2019 по июнь 2020 года. CSV устроен так, что каждая дата для каждого штата имеет запись с каждым типом болезни в виде собственного столбца и целыми числами в качестве значений столбца. Таким образом, нет одного поля для построения диаграммы, их много, отсюда и многоуровневость. Мы будем очень благодарны за любые идеи о том, как решить эту проблему! Вот моя работа на данный момент:

https://observablehq.com/@justin-krohn / covid-extra-deaths

Answer 1

Вы можете создать легенду для многослойной диаграммы, установив цветовую кодировку для каждого слоя на datum, указав, какую метку вы хотите, чтобы она имела. Например ( редактор vega ):

{
  "data": {
    "values": [
      {"x": 1, "y1": 1, "y2": 2},
      {"x": 2, "y1": 3, "y2": 1},
      {"x": 3, "y1": 2, "y2": 4},
      {"x": 4, "y1": 4, "y2": 3},
      {"x": 5, "y1": 3, "y2": 5}
    ]
  },
  "encoding": {"x": {"field": "x", "type": "quantitative"}},
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "y": {"field": "y1", "type": "quantitative"},
        "color": {"datum": "y1"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "y": {"field": "y2", "type": "quantitative"},
        "color": {"datum": "y2"}
      }
    }
  ]
}

В качестве альтернативы вы можете использовать Fold Transform для поворота ваших данных, чтобы вместо слоев вручную вы могли построить несколько линий с простой цветовой кодировкой. Например ( редактор vega ):

{
  "data": {
    "values": [
      {"x": 1, "y1": 1, "y2": 2},
      {"x": 2, "y1": 3, "y2": 1},
      {"x": 3, "y1": 2, "y2": 4},
      {"x": 4, "y1": 4, "y2": 3},
      {"x": 5, "y1": 3, "y2": 5}
    ]
  },
  "transform": [{"fold": ["y1", "y2"], "as": ["name", "y"]}],
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "name", "type": "nominal"}
  }
}