How do I add secondary Y axis in vega-lite with 2 series having the same scale?

Question

I'm trying to build something like this: example histogram with multiple independent series

I have 2 independent y-axis with orient left and right.

All series/layers using "orient":"right" should be sharing the same scale and all series/layers using "orient":"left" should be sharing the same scale.

I know of the "resolve" option as documented here but having read this How do I add a secondary Y axis to my vega-lite chart? and a bunch of other questions I couldn't find my particular use case.

My futile attempt so far looks like this: example in online editor example screenshot

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {"url": "data/movies.json"},
  "transform":[
    {"calculate":"datum.Production_Budget * 0.5","as":"y2"}
  ],
  "layer":[
    {
  "mark": "bar",
  "encoding": {
    "x": {
      "bin": true,
      "field": "IMDB_Rating",
      "type": "quantitative"
    },
    "y": {
      "axis":{"orient":"left","title":"# of movies","grid":false},
      "aggregate": "count",
      "type": "quantitative"
    }
  }},
     {
  "mark": "line",
  "encoding": {
    "x": {
      "bin": true,
      "field": "IMDB_Rating",
      "type": "quantitative"
    },
    "y": {
      "field":"Production_Budget",
      "aggregate": "average",
      "type": "quantitative",
      "axis":{"orient":"right","format":"s","title":"avg production budget in $"}
    }
  }
},
     {
  "mark": "line",
  "encoding": {
    "x": {
      "bin": true,
      "field": "IMDB_Rating",
      "type": "quantitative"
    },
    "y": {
      "field":"y2",
      "aggregate": "average",
      "type": "quantitative",
      "axis":{"orient":"right","format":"s","title":"avg production budget in $"}
    }
  }
}
  ]
  ,"resolve": {
    "scale":{"y":"independent"}
  }
}

I've tried playing with the resolve option:

"resolve": {
"scale":{"axisLeft":"independent"}

}

"resolve": {
"axisLeft":{"y":"independent"}

}

  "resolve": {
"axis":{"left":"independent"}

}

but none of them work.

Answer 1

You can do this by creating a layer within a layer: the two orient: "right" charts in a single layer with a shared axis, and the orient: "left" chart with an independent scale:

vega editor link

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {"url": "data/movies.json"},
  "transform": [{"calculate": "datum.Production_Budget * 0.5", "as": "y2"}],
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
        "y": {
          "axis": {"orient": "left", "title": "# of movies", "grid": false},
          "aggregate": "count",
          "type": "quantitative"
        }
      }
    },
    {
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
            "y": {
              "field": "Production_Budget",
              "aggregate": "average",
              "type": "quantitative",
              "axis": {
                "orient": "right",
                "format": "s",
                "title": "avg production budget in $"
              }
            }
          }
        },
        {
          "mark": "line",
          "encoding": {
            "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
            "y": {
              "field": "y2",
              "aggregate": "average",
              "type": "quantitative",
              "axis": {
                "orient": "right",
                "format": "s",
                "title": "avg production budget in $"
              }
            }
          }
        }
      ]
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}