How to put x-axis labels in Vega using "datum"? - vega

Question

In Vega, I want to put in the x-axis labels an expression with the data from the "reference" column. I have only been able to put a fixed label for all the values (commented line 67), but when I try to put the expression "datum.reference" in the text, I can't do it (line 68). Could you help me? Thank you very much in advance
The code is the following:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"autosize": "pad",
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28, "reference": "ref1"},
{"category": "B", "amount": 55, "reference": "ref2"},
{"category": "C", "amount": 43, "reference": "ref3"},
{"category": "D", "amount": 91, "reference": "ref1"},
{"category": "E", "amount": 81, "reference": "ref4"},
{"category": "F", "amount": 53, "reference": "ref5"},
{"category": "G", "amount": 19, "reference": "ref6"},
{"category": "H", "amount": 87, "reference": "ref7"}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"title": "X-Axis",
"encode": {
"ticks": {
"update": {
"stroke": {"value": "steelblue"}
}
},
"labels": {
"interactive": true,
"update": {
//"text": {"value": "x_label"}, // Line 67: This is fine
"text": {"expr": "datum.reference"}, // Line 68: Here, I have the problem
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"hover": {
"fill": {"value": "firebrick"}
}
},
"title": {
"update": {
"fontSize": {"value": 16}
}
},
"domain": {
"update": {
"stroke": {"value": "#333"},
"strokeWidth": {"value": 1.5}
}
}
}
},
{ "orient": "left",
"scale": "yscale",
"title": "Y-Axis",
"tickCount": 4,"offset": 6 }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "isNaN(tooltip.amount)", "value": 0},
{"value": 1}
]
}
}
}
]
}
```

Answer 1

First of all, "datum" in Vega axis does not refer to any item in the dataset "table". Instead, Vega axis uses an internally generated dataset based on the scale defined for that axis.
See Vega documentation for "axis". The documentation also states that (without giving an example):
Custom text can be defined using the "text" property for labels. For example, one could define an ordinal scale that serves as a lookup table from axis values to axis label text.
Here is an example of how to use a lookup dataset and scale for this purpose. Note that all values of "category" must be unique and all values for "reference" must be unique.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"autosize": "pad",
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
},
{
"name": "data_lookup",
"values": [
{"category": "A", "reference": "ref1"},
{"category": "B", "reference": "ref2"},
{"category": "C", "reference": "ref3"},
{"category": "D", "reference": "ref10"},
{"category": "E", "reference": "ref4"},
{"category": "F", "reference": "ref5"},
{"category": "G", "reference": "ref6"},
{"category": "H", "reference": "ref7"}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "scale_lookup",
"type": "ordinal",
"domain": {"data": "data_lookup", "field": "category"},
"range": {"data": "data_lookup", "field": "reference"}
},
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"title": "X-Axis",
"encode": {
"ticks": {
"update": {
"stroke": {"value": "steelblue"}
}
},
"labels": {
"interactive": true,
"update": {
"text": {"signal": "scale('scale_lookup', datum.value)"},
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"hover": {
"fill": {"value": "firebrick"}
}
},
"title": {
"update": {
"fontSize": {"value": 16}
}
},
"domain": {
"update": {
"stroke": {"value": "#333"},
"strokeWidth": {"value": 1.5}
}
}
}
},
{ "orient": "left",
"scale": "yscale",
"title": "Y-Axis",
"tickCount": 4,"offset": 6 }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "isNaN(tooltip.amount)", "value": 0},
{"value": 1}
]
}
}
}
]
}
View in Vega online editor.

Answer 2

I have solved the problem in a very simple way. Just creating a transform that concatenates the two fields and then using that new column to represent the data. Anyway thank you very much for the other solution that I find very interesting and useful.
Here I provide the code of what I wanted to achieve
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"autosize": "pad",
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28, "reference": "ref1"},
{"category": "B", "amount": 55, "reference": "ref2"},
{"category": "C", "amount": 43, "reference": "ref3"},
{"category": "D", "amount": 91, "reference": "ref1"},
{"category": "E", "amount": 81, "reference": "ref4"},
{"category": "F", "amount": 53, "reference": "ref5"},
{"category": "G", "amount": 19, "reference": "ref6"},
{"category": "H", "amount": 87, "reference": "ref7"}
],
"transform":[
{"type": "formula",
"expr": "datum.category + ' (' + datum.reference + ')' ",
"as": "category(ref)"}
]
},
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category(ref)"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"title": "X-Axis",
"encode": {
"ticks": {
"update": {
"stroke": {"value": "steelblue"}
}
},
"labels": {
"interactive": true,
"update": {
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"hover": {
"fill": {"value": "firebrick"}
}
},
"title": {
"update": {
"fontSize": {"value": 16}
}
},
"domain": {
"update": {
"stroke": {"value": "#333"},
"strokeWidth": {"value": 1.5}
}
}
}
},
{ "orient": "left",
"scale": "yscale",
"title": "Y-Axis",
"tickCount": 4,"offset": 6 }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category(ref)"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "isNaN(tooltip.amount)", "value": 0},
{"value": 1}
]
}
}
}
]
}