Deneb Split By More Than One Field In X Axis

[JayWee]

Morning All,

Can i please find out whether is there a way to split X axis into more than one field?

I can achieve this pretty easily withTableau, however with my current Deneb knowledge, i'm struggling to recreate this using vega lite in Deneb.

Tableau BarDeneb Bar 

Code tested thus far is

{

  "data": {

    "name": "dataset"

  },

  "transform": [

    {

      "fold": ["Sum of Value_01","Sum of Value_02"],

      "as": ["MT","value"]

    }

  ],

  "layer": [

    {

      "mark":"bar",

      "encoding": {

        "x":{"field":"Date", "type": "temporal","timeUnit":"yearmonth"},

        "y":{"field":"value", "type": "quantitative",

        "stack":"normalize",

        "aggregate":"sum"},

        "color":{"field":"MT","type": "nominal"}

      }

    }

  ]

}

Please advice and Thanks in advance.

Jay

[v-csrikanth]

Hi @JayWee 

We haven't heard from you since last response and just wanted to check whether the solution provided has worked for you. If yes, please Accept as Solution to help others benefit in the community.
Thank you.

If the above information is helpful, please give us Kudos and mark the response as Accepted as solution.
Best Regards,
Community Support Team _ C Srikanth.

[JayWee]

Hi Csrikanth,

Apologies for the late reply. Had been sidetracked to work on another high priority project.

With the solution that you've proposed, its showing all under one sentence for each category.

However, the format that i required for my visualisation is breaking down into multiple category, eg. Year, Month, Suburbs, Country.

I had a play around with native visualisation which shows something like this.

After hunting around online and seems like we can only breakdown into 2 category, at least this is the current capability of Deneb as we speak.

Had you came across something similar in the past which allows you to breakdown into multiple catgories like that?

Thanks

Jay 

[v-csrikanth · Accepted solution]

Hi @JayWee 
Sorry for the late responsre.
Here's a revised version of your Deneb Vega-Lite spec that demonstrates how to concatenate multiple fields into a single X-axis grouping:
***************************************************************
{
"data": {
"name": "dataset"
},
"transform": [
{
"fold": ["Sum of Value_01", "Sum of Value_02"],
"as": ["MT", "value"]
},
{
"calculate": "year(datum.Date) + '-' + month(datum.Date) + ' / ' + datum.Location + ' / ' + datum.Type",
"as": "X_Label"
}
],
"mark": "bar",
"encoding": {
"x": {
"field": "X_Label",
"type": "ordinal",
"axis": {"labelAngle": -45}
},
"y": {
"aggregate": "sum",
"field": "value",
"type": "quantitative"
},
"color": {
"field": "MT",
"type": "nominal"
},
"tooltip": [
{"field": "MT"},
{"field": "value", "type": "quantitative"},
{"field": "X_Label"}
]
}
}
***************************************************************

Explanation:

The "calculate" step combines year/month, location, and type into one string (X_Label) for the X-axis.

The x encoding uses this combined field as an ordinal axis.

You can sort or format the string as needed for better visual alignment.

This won’t give you true nested headers like Tableau, but visually it will resemble it with clear separation and stacked bars per grouping.

If the above information is helpful, please give us Kudos and mark the response as Accepted as solution.
Best Regards,
Community Support Team _ C Srikanth.

[v-csrikanth]

Hi @JayWee 
Yes, you can split the X-axis into multiple fields in Deneb (Vega-Lite) by using a concatenated field (concat) or a facet-based approach.
Modify your x encoding to concatenate multiple fields, such as Date, Location, and Type.
*****************************************************************************
{
"data": {
"name": "dataset"
},
"transform": [
{
"fold": ["Sum of Value_01","Sum of Value_02"],
"as": ["MT","value"]
}
],
"layer": [
{
"mark": "bar",
"encoding": {
"x": {
"field": "Date",
"type": "temporal",
"timeUnit": "yearmonth"
},
"xOffset": {
"field": "Location",
"type": "nominal"
},
"column": {
"field": "Type",
"type": "nominal"
},
"y": {
"field": "value",
"type": "quantitative",
"stack": "normalize",
"aggregate": "sum"
},
"color": {
"field": "MT",
"type": "nominal"
}
}
}
]
}
*****************************************************************************

If the above information helps you, please give us a Kudos and marked the Accept as a solution.
Best Regards,
Community Support Team _ C Srikanth.

[JayWee]

Hi Csrikanth,

Thanks for the rapid reply. 

I've tried the code above and seems like Vega Lite doesn't like the "column" very much.

Any idea how to resolve this?

Thanks

Jay