Rect

Edit this page
// Single View Specification
{
  "data": ... ,
  "mark": "rect",
  "encoding": ... ,
  ...
}

The rect mark represents an arbitrary rectangle.

Documentation Overview

Heatmap

Use the rect marks with discrete fields on x and y channels creates a heatmap.

Ranged Rectangles

Specifying both x and x2 and/or y and y2 creates a rectangle that spans over certain x and/or y values.

For example, we can use rect to create an annotation layer that provides a shading between global min and max values.

We can also use rect to show a band covering one standard deviation over and below the global mean value.

Rect Config

// Top-level View Specification
{
  ...
  "config": {
    "rect": ...,
    ...
  }
}

The rect property of the top-level config object sets the default properties for all rect marks. If mark property encoding channels are specified for marks, these config values will be overridden.

For the list of all supported properties, please see the mark config documentation.