Rect

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

The rect mark represents an arbitrary rectangle.

Documentation Overview

• Rect Mark Properties
• Examples
  • Heatmap
  • Ranged Rectangles
• Rect Config

Rect Mark Properties

// Single View Specification
{
  ...
  "mark": {
    "type": "rect",
    ...
  },
  "encoding": ... ,
  ...
}

A rect mark definition can contain any standard mark properties and the following special properties:

Examples

Heatmap

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

We can similarly use rect with binned fields and discretized temporal fields.

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.

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.

Besides standard rect mark properties (except type, style, and clip), rect config can contain the following additional properties: