Vega-lite heat map text properties - kibana

Question

Good time of day!
all text - https://github.com/vega/vega-lite/issues/5697
When building data in a block, I would like to change the font size and position of the text in the block. Used the documentation -https://vega.github.io/vega-lite/docs/title.html, but it does not work.
block:
{
"mark": "text"
"encoding": {
"text": {"field": "z", "type": "quantitative"}
"color": {"value": "black"}
"fontSize": 40
}
Changing the position will allow for the addition of a second text:
full code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json",
"config": {"view": {"height": 300, "width": 400}},
"data": {
"values": [
{"x": 0, "y": 0, "z": 0},
{"x": 1, "y": 0, "z": 1},
{"x": 2, "y": 0, "z": 4},
#{"x": 3, "y": 0, "z": 9},
{"x": 4, "y": 0, "z": 16},
#{"x": 5, "y": 0, "z": 25},
{"x": 0, "y": 1, "z": 1},
{"x": 1, "y": 1, "z": 2},
{"x": 2, "y": 1, "z": 5},
{"x": 3, "y": 1, "z": 10},
#{"x": 4, "y": 1, "z": 17},
{"x": 5, "y": 1, "z": 26}]
},
"encoding": {
"x": {"field": "x", "type": "ordinal", title: "X"}
"y": {"field": "y", "type": "ordinal", title: "Y"}
}
"layer": [
{
"mark": "rect"
from: {data: "values"}
"encoding": {
"color": {
"field": "z"
"scale": {"scheme": "redyellowgreen"}
"type": "quantitative"
}
}
}
{
"mark": "text"
"encoding": {
"text": {"field": "z", "type": "quantitative"}
"color": {"value": "black"}
"fontSize": 40
}
}
]
}
2 I'd like a temperature map without spaces. It is possible if create a variable to count all x by "groupby":[y]
Help me please.

Answer 1

There is no fontSize encoding, but you can set a fontSize mark property:
{
"mark": {"type": "text", "fontSize": 40},
"encoding": {
"text": {"field": "z", "type": "quantitative"},
"color": {"value": "black"}
}
}
To offset text vertically, you can use the dy mark property, which specifies a number of pixels by which to vertically offset the text:
{
"mark": {"type": "text", "fontSize": 20, "dy": -20},
"encoding": {
"text": {"value": "text"},
"color": {"value": "black"}
}
}
As for computing new x values to fill-in spaces, you can do this with a Window Transform.
Here is a modified version of your example that puts all of this together (view in vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json",
"config": {"view": {"height": 300, "width": 400}},
"data": {
"values": [
{"x": 0, "y": 0, "z": 0},
{"x": 1, "y": 0, "z": 1},
{"x": 2, "y": 0, "z": 4},
{"x": 4, "y": 0, "z": 16},
{"x": 0, "y": 1, "z": 1},
{"x": 1, "y": 1, "z": 2},
{"x": 2, "y": 1, "z": 5},
{"x": 3, "y": 1, "z": 10},
{"x": 5, "y": 1, "z": 26}
]
},
"transform": [
{"window": [{"op": "count", "field": "x", "as": "x2"}], "groupby": ["y"]}
],
"encoding": {
"x": {"field": "x2", "type": "ordinal", "title": "X"},
"y": {"field": "y", "type": "ordinal", "title": "Y"}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "z",
"scale": {"scheme": "redyellowgreen"},
"type": "quantitative"
}
}
},
{
"mark": {"type": "text", "fontSize": 20, "dy": -20},
"encoding": {
"text": {"value": "text"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "text", "fontSize": 40, "dy": 20},
"encoding": {
"text": {"field": "z", "type": "quantitative"},
"color": {"value": "black"}
}
}
]
}