Vega-lite heat map text properties

Question

Good time of day!

all text - https://github.com/vega/vega-lite/issues/5697

1. 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"}
      }
    }
  ]
}