Rect

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

The rect mark represents an arbitrary rectangle.

Documentation Overview

• 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: <table class="doc-table">

The radius in pixels of rounded rectangle corners.

Default value: 0

</table>

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.

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.

The rect config can contain any rect mark properties (except type, style, and clip).