CODEWITHSUNDEEP
vega-litevegaobservablehq
nkkphiri
nkkphiri

Reputation: 23

How do I create a legend for a layered line plot

Basically what I have is a line graph that is layered from several line graphs. Since each graph has only one line, there is no legend automatically generated, so what is the best way to get a legend for the chart? I have been considering trying to transform my dataset. This is weekly deaths total from the cdc from 2019-June 2020. The way the csv is arranged is each date for each state has a record with each disease type as it's own column and integers as the column values. So there isn't one field to chart, there are many, hence the layering. Any insights into how to solve this problem would be much appreciated! Here is my work so far:

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

Upvotes: 2

Views: 1361

Answers (1)

jakevdp
jakevdp

Reputation: 86310

You can create a legend for a layered chart by setting the color encoding for each layer to a datum specifying what label you would like it to have. For example (vega editor):

{
  "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"}
      }
    }
  ]
}

enter image description here

Alternatively, you can use a Fold Transform to pivot your data so that instead of manual layers, you can plot the multiple lines with a simple color encoding. For example (vega editor):

{
  "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"}
  }
}

enter image description here

Upvotes: 4

Related Questions