Display two line charts using Deneb Visual Vega Lite

Question

I wanted to try the Deneb Power bi visual , I want to display two measures "Count of leaves taken in 2022" and "Count of leaves taken in 2023" using Vega Lite. Problem is I didn't know how to display two line charts in my Y axis.

Here's how it currently looks (I only tried displaying 1 measure at a time)

I followed this Youtube tutorial

Is there a way to display both charts at the same time ?

this is my code :

{

  "data": {"name": "dataset"},   "layer": [
    {
      "mark": {
        "type": "area",
        "line": {"color": "#7b516f"},
        "color": {
          "x1": 1,
          "y1": 1,
          "gradient": "linear",
          "stops": [
            {
              "offset": 0,
              "color": "white"
            },
            {
              "offset": 0.8,
              "color": "#7b516f"
            }
          ]
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "width": 2,
        "clip": true,
        "color": {
          "x1": 1,
          "y1": 1,
          "gradient": "linear",
          "stops": [
            {
              "offset": 0,
              "color": "white"
            },
            {
              "offset": 0.8,
              "color": "#7b516f"
            }
          ]
        }
      },
      "encoding": {
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.1
          },
          "value": 1
        },
        "y": {
          "field": "__1____highlight",
          "type": "quantitative",
          "axis": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "yOffset": -10,
        "size": 10,
        "opacity": 0.2
      },
      "encoding": {
        "text": {"field": "__1__"}
      }
    },
    {
      "mark": {
        "type": "text",
        "yOffset": -10,
        "size": 10
      },
      "encoding": {
        "text": {"field": "__1__"},
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.1
          },
          "value": 1
        },
        "y": {
          "field": "__1____highlight",
          "type": "quantitative",
          "axis": null
        }
      }
    }   ],   "encoding": {
    "x": {
      "field": "MONTH",
      "type": "ordinal",
      "axis": {"labelPadding": 0},
      "title": null
    },
    "y": {
      "field": "Leaves Count 2023",
      "type": "quantitative",
      "axis": null
    }   } }

Answer 1

There are several ways to approach this problem, but without knowing the structure of the data it is hard to determine which would work best for your particular use case. Here are some options that you could try:

(1) Encode year (as a separate column) using the color

This would be a fairly straightforward approach of a multi-line chart. This is one of the default examples for Vega (example link) and Vega-Lite (example link). The key here is that both the measures are included in a single dataset with an x, y, and color encoding for the month, value, and year respectively; the data could look like the following:

(2) Layer (or repeat) two separate line charts with a shared y axis

For Vega-Lite, another option would be to use the layer or repeat view composition option (documentation link). If the two measures are included as separate columns, you could leverage repeat to essentially create a line chart template that swaps in the appropriate measure for the two charts (example link). The data would look like the following, with the two measures ("mean_US Gross" and "mean_Worldwide Gross") as separate columns, with a shared x value ("IMDB Rating"):

Alternatively, you could leverage layer to simply specify the two charts separately as different layers on the view (example link); the key feature here will be to set "resolve": {"scale": {"y": "shared"}} if you want the y axis to be the same for the two charts. You may also need to update the provided example to use separate datasets, depending on your data format.