Vega-lite: Cannot resolve dual y-axis on hconcat graph

Question

I currently have 2 graphs which are horizontally concatenated and I can select variables on the first graph and get more information on them displayed on the second. I am trying to resolve the y-axis on the second graph so that I have 2 y-axis with different units, and have figured out how to separate the axis on the left and right side, but the units are identical. This is not very useful and I would like to know how to have independent scales on both. From the documentation it seems as though using the resolve function should do the trick, but all it does is separates the axis.

Here is my code:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "data/Per_Species_Per_Location/Fisher_location137.csv"
  },
  "spacing": 15,
  "hconcat": [{"layer":
    [{   "encoding": {
        "color": {
            "title": "Total (PPA)",
            "field": "Total",
            "type": "quantitative",
            "scale": {"range": ["#FFCC66", "#09bc8a", "#023057"]}
        },
        "x": {
          "field": "Variable",
          "type": "nominal",
          "axis": {"labelAngle": -45, "title": "Element",
        "grid": false}
        },
        "y": {
          "title": "Total (PPA)",
          "field": "Total",
          "type": "quantitative"
        },
        "fillOpacity": {
      "condition": {"selection": "select", "value": 1},
      "value": 0.25
    },
          "tooltip": [
      {"field": "Variable", "type": "nominal"},
      {"field": "Total", "type": "quantitative"},
    ]
      },
      "width": 750,
      "height": 400,
      "selection": {"select": {"encodings": ["x"], "type": "multi"}},
      "mark": {"type": "bar", "cursor": "pointer"},
    }]},
    {"layer":[
      {"width": 150,
      "height": 400,
      "mark": "bar",
      "encoding": {
        "color": {
          "condition": {
            "selection": "click",
            "field": "Sex",
            "type": "nominal",
            "scale": {"range": ["#7a003c", "#FFCC66", "#5b6770"]}
          },
          "value": "lightgray"
        },
        "y": {"field": "Sex Value", "type": "quantitative", "aggregate": "mean", "axis": {"orient": "left"}},
        "x": {"title": "Sex", "field": "Sex", "type": "nominal"},
          "tooltip": [
      {"field": "Sex", "type": "nominal"},
      {"field": "Sex Value", "type": "quantitative", "aggregate": "mean"},
      {"field": "Count", "type": "quantitative", "aggregate": "sum"}
    ]
      },
      "selection": {"click": {"encodings": ["color"], "type": "multi"}},
      "transform": [{"filter": {"selection": "select"}}]},
      {"mark": "rule",
      "encoding":{
        "y": {
        "aggregate": "mean",
        "field": "Reference",
        "type": "quantitative",
        "axis": {"orient": "right"}
      },
      "color": {"value": "black"},
      "size": {"value": 3}
      },
      "transform": [{"filter": {"selection": "select"}}]}
    ]}], "resolve": {"scale": {"y": "independent"}}
}

Here is a picture of how the graph looks currently:

Vega-lite graph

As you can see, the mean of the sex value and mean of the reference have identical axis scales, and I want them to be different, so that the bars can be easily seen.

Any help would be much appreciated!

score 0 · Accepted Answer · answered Nov 22 '20 at 18:39

The way that you set independent scales for dual y-axis is using "resolve" in the layer chart. Here is a minimal example that shows that it works in an hconcat (open in editor):

{
  "data": {
    "values": [
      {"Sex": "Female", "Sex Value": 3, "Reference": 42},
      {"Sex": "Male", "Sex Value": 2, "Reference": 40},
      {"Sex": "Unknown", "Sex Value": 1, "Reference": 45}
    ]
  },
  "hconcat": [
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "Sex Value", "type": "quantitative"},
        "y": {"field": "Reference", "type": "quantitative"}
      }
    },
    {
      "layer": [
        {
          "mark": "bar",
          "encoding": {
            "x": {"type": "nominal", "field": "Sex"},
            "y": {
              "type": "quantitative",
              "aggregate": "mean",
              "field": "Sex Value"
            }
          }
        },
        {
          "mark": "rule",
          "encoding": {
            "y": {
              "type": "quantitative",
              "aggregate": "mean",
              "field": "Reference"
            }
          }
        }
      ],
      "resolve": {"scale": {"y": "independent"}}
    }
  ]
}

I believe the reason it's not working in your case is that you put the resolve in the hconcat rather than putting the resolve in the layer. In other words, instead of the last line of your specification being:

   ]}], "resolve": {"scale": {"y": "independent"}}

you should use:

   ], "resolve": {"scale": {"y": "independent"}}}]

Vega-lite: Cannot resolve dual y-axis on hconcat graph

1 Answers1