Vega-lite: Independent Y axes for dual axis wrapped facet and nested fields breaks axis layout

[pranusha119]

Hello,

My requirement is to get dual axis charts in wrapped facet as in below link.

https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JACyUAVhDYA7EABoQAEySYUqUAwBOgtCrVICTJLrgBPKTPkBfJQDMkUOJjSh7NOIOX6IIxSCY5jhw+mzayjSySHp2IM6ymHDaaJjaDHBKUGyCDAiyEGgATEoQIVBuIIJI5sloANqgyNoA1vomKUpwstmRsmSV5pVIZGTafEn6CHCRSPIOnt765os+SkEh+gCODHOYdGo0pAHQMaGaIABeyWxojoIQcDZxAB6VHl4+6MSmnkEBG3OIHCfRiJ3CrnQ-DecWygnC71WyzgpgBwSBsjYCCiYOediapja6GEslCXR6bD6AwuQwuIzGEyBEDyAQ+S3QK0+aM26B2ewO+2OpSgZ0q120t1Q90ezyUbwubK+IB+2j+Q3W6LCERxelKEP00JAsJyCIuP1yQIAxAAGW12o3PAC6SnGMkExwup0E51AtJAUWUcBCskDiSNSiQLxohRp+gDQe6odceJdcDdHtAXp9IHl-pDCfzYaUfvjwaT4ZAkejgzj+bL3WTxtkHmpoA6w2EZHk6ASSRSeKAA

I have used the same code with my data , but wasn't getting independent Y axes for dual charts :

code :

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": {
      "%context%": true,
      "index": "index_paincure_0709",
      "body": {
        "size": 10000,
        "_source": ["Media_Type", "Unit_Key_Message", "Readability"]
      }
    },
    "format": {"property": "hits.hits"}
  },
  "facet": {"field": "_source.Media_Type", "type": "ordinal", "title": ""},
  "center": true,
  "columns": 2,
  "spec": {
    "layer": [
      {
        "mark": "bar",
        "encoding": {
          "y": {
            "aggregate": "sum",
            "field": "_source.Readability",
            "type": "quantitative",
            "scale": {"zero": false}
          },
          "x": {
            "field": "_source.Unit_Key_Message",
            "type": "ordinal",
            "sort": "-x",
            "title": ""
          }
        }
      },
      {
        "mark": "line",
        "encoding": {
          "y": {
            "aggregate": "count",
            "field": "_source.Unit_Key_Message",
            "type": "quantitative",
            "scale": {"zero": false}
          },
          "x": {
            "field": "_source.Unit_Key_Message",
            "type": "ordinal",
            "sort": "-x",
            "title": ""
          },
          "color": {"value": "#000000"}
        }
      }
    ],
    "resolve": {"scale": {"y": "independent"}, "axis": {"y": "independent"}}
  },
  "resolve": {
    "scale": {"x": "independent", "y": "independent"},
    "axis": {"y": "independent"}
  },
  "config": {"bar": {"align": "center"}}
}

Data ( Result of JSON.stringify(VEGA_DEBUG.vegalite_spec) is attached in the file

asset_data.txt

[domoritz]

The example seems to be working so I'm not sure what the issue is here. Do you have a question or want to report an issue?

[pranusha119]

Hello @domoritz,

Not sure where the issue is, when ever data source type is inline data or data from URL, it is working fine. But when data is taken from kibana index it is not giving independent Y axis
.
In below example data source is inline data ( sample data is taken from kibana_sample_data_ecommerce dataset )

https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JACyUAVhDYA7EABoQAEySYUqUMSSCGcCGgDaodQA9B+iAH1MbdYKs4ATjShw0AdgCslAJwAOJSg1cjYnAE8jEABZOFkAcggAAgBlGDZ9RRi4xKSAYUE7GBpZMhAAXSVVcKs2ADMrAHc4OABrNBAAMRdqkABfBRMkc0sbOx1HFzc0ADYPPyCQsjDI1ENshOS0jIMlWM38wvoSssqVJBr6ppb29G6aXoGhkYhrW3tJ13dUOYWQYMwoQiUX2uW2mT2OWSBSKJwqVQutQazTaHXuj0GIDMFleYw+zi+s3mvkWgOWwLWGzB6QhVOhR2KpXh50uyJuHQAKownBAMc8cW9xg4CdMfsTSUDVutQVsabs6YdYUyztUkddUeguQweXyscMBXiJiLvt4-IF-ksViCoak5VkZYrjsqEaz1bcYnJddjRu8jVNvgBGABMEgCEvJUoVMKdZUhBwAglA3K8wjRMirEVcUe6tTqLv1Md7cb7hf60ABmXxm8NWykO6OM04utXZjrRT35p56l6C-Fl1CV6sWsm16U2htwjOu1voduyL36n1Cz6iwdh4eS60HCfOlkt9ma7m8zvlAYgOpINyYNCgOppwTKDoAzdKTDhHDfEBhZQlHRZTB0BYHQFv8cSAk4aCYE4ehBGwugILIBioEGSgQB+UA3iAggXHAEFrKAyBOO6TBIBBShxFAbA-kymggKsoBIGQZBOHwgIdBADAIFkd5wA+HRFr2fqEq+76fgAjgwSCyAB6gAaQWTQDo3ygAAXrhbBoBeggQHAfRnqYmE8Xx6Cqlm7IiR+HTfr+ggKWE17oPwBmvoBn79HpmKEe6wiyO45GyJR1FlLR9EgIxzGsZ+lEMNJ3H3o+JmZmyqIWeJknSXQag0PJqHBEBtFqU4GmoFpOkeSABm0UZCV7mZKVYqJVlONRf6ofZHROf+rnAWelGFHhWg6HoHQAMQAAwTZN7l9GcLEyII8m0Yp+WgKsIAlMocAfvOYEgcMNBIatHQbVtcSbbFelnnNcGLaAy3KRVx07dt53Xkoa0nS9u1nvth10U9m1fRdelAA

same code is executed, where data souce is kibana index ( kibana_sample_data_ecommerce ), where Y axis isn't separated in the way it is done in above example.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": {
      "%context%": true,
      "index": "kibana_sample_data_ecommerce",
      "body": {
        "size": 10000,
        "_source": ["category", "day_of_week", "taxless_total_price"]
      }
    },
    "format": {"property": "hits.hits"}
  },
  "facet": {"field": "_source.category", "type": "ordinal", "title": ""},
  "center": true,
  "columns": 2,
  "spec": {
    "layer": [
      {
        "mark": "bar",
        "encoding": {
          "y": {
            "aggregate": "sum",
            "field": "_source.taxless_total_price",
            "type": "quantitative",
            "scale": {"zero": false}
          },
          "x": {
            "field": "_source.day_of_week",
            "type": "ordinal",
            "sort": "-x",
            "title": ""
          }
        }
      },  {
        "mark": "line",
        "encoding": {
          "y": {
            "aggregate": "count",
            "field": "_source.day_of_week",
            "type": "quantitative",
            "scale": {"zero": false}
          },
          "x": {
            "field": "_source.day_of_week",
            "type": "ordinal",
            "sort": "-x",
            "title": ""
          },
          "color": {"value": "#000000"}
        }
      }

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

Output :

Data :
kibana_sample_data_ecommerce data.txt

[domoritz]

@nyurik can help with kibana.

[nickofthyme]

After debugging the two different specs in kibana master, one with data.values the other with data.url, I see nothing different in the final parsed vega model other than the different field values. See diff minus all data keys.

I then took your latest example that is working with the given data.values and nested each of the values in the _source key to imitate the heiherchy and got the same issue.

// before
{
  "taxless_total_price": 67.9,
  "category": ["Men's Shoes", "Men's Clothing"],
  "day_of_week": "Friday"
}
// after
{
  "_source": {
    "taxless_total_price": 67.9,
    "category": ["Men's Shoes", "Men's Clothing"],
    "day_of_week": "Friday"
  }
}

See this example here which renders...

Still looking....

[nickofthyme]

After a closer review of the nested nature of the values, I found that by applying a calculate transform on _only_ the _source.day_of_week field and passing the new calculated/unnested value day_of_week to the encoding.x.field on both layers fixes the issue.

So someone with more knowledge of vega-lite source code: How/why does a nested field impact the placement of an axis?

"transform": [
  {"calculate": "datum._source.day_of_week", "as": "day_of_week"}
]

See working vega editor example here

To be clear the transform was only needed on the x encoding to fix this, none of the other fields

[domoritz]

I see. Nested fields a are sometimes tricky to handle since Vega always fattens outputs. Can you create a minimal example that shows the issue so we can fix it?

[domoritz]

Why did you close the issue? Did you find a solution?

[pranusha119]

Accidentally closed the issue, reopened it.

[nickofthyme]

@domoritz here is the example from above that does not work. It renders the axis orientation correctly (i.e. left and right), but the width of the x axis is wrong or the placement of the right y axis is wrong due to accessing the value from _source.

[domoritz]

Thanks. It looks like it works if we flatten the fields so the problem seems to be with the nested access.

Open the Chart in the Vega Editor.