Rect

Rect mark displays each data item as a rectangle.

{
  "data": {
    "sequence": { "start": 0, "stop": 20, "as": "z" }
  },
  "transform": [
    { "type": "formula", "as": "x", "expr": "random()" },
    { "type": "formula", "as": "x2", "expr": "datum.x + random() * 0.3" },
    { "type": "formula", "as": "y", "expr": "random()" },
    { "type": "formula", "as": "y2", "expr": "datum.y + random() * 0.4" }
  ],
  "mark": {
    "type": "rect",
    "strokeWidth": 2,
    "stroke": "#404040",
    "cornerRadius": 5
  },
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "x2": { "field": "x2" },
    "y": { "field": "y", "type": "quantitative" },
    "y2": { "field": "y2" },
    "color": { "field": "z", "type": "quantitative" }
  }
}

Channels

Rect mark supports the primary and secondary position channels and the color, stroke, fill, opacity, strokeOpecity, fillOpacity, and strokeWidth channels.

Properties

minHeight

Type: Number

The minimum height of a rectangle in pixels. The property clamps rectangles' heights.

Default value: 0

minWidth

Type: Number

The minimum width of a rectangle in pixels. The property clamps rectangles' widths when the viewport is zoomed out.

This property also reduces flickering of very narrow rectangles, thus, the value should generally be at least one.

Default value: 1

minOpacity

Type: Number

Clamps the minimum size-dependent opacity. The property does not affect the opacity channel. Valid values are between 0 and 1.

When a rectangle would be smaller than what is specified in minHeight and minWidth, it is faded out proportionally. Example: a rectangle would be rendered as one pixel wide, but minWidth clamps it to five pixels. The rectangle is actually rendered as five pixels wide, but its opacity is multiplied by 0.2. With this setting, you can limit the factor to, for example, 0.5 to keep the rectangles more clearly visible.

Default value: 0

xOffset

Type: Number

Offsets of the x and x2 coordinates in pixels. The offset is applied after the viewport scaling and translation.

Default value: 0

yOffset

Type: Number

Offsets of the y and y2 coordinates in pixels. The offset is applied after the viewport scaling and translation.

Default value: 0

Examples

Heatmap

When used with "band" or "index" scales, the rectangles fill the whole bands when only the primary positional channel is defined.

{
  "data": {
    "sequence": { "start": 0, "stop": 800, "as": "z" }
  },
  "transform": [
    { "type": "formula", "as": "y", "expr": "floor(datum.z / 40)" },
    { "type": "formula", "as": "x", "expr": "datum.z % 40" },
    {
      "type": "formula",
      "as": "z",
      "expr": "sin(datum.x / 8) + cos(datum.y / 10 - 0.5 + sin(datum.x / 20) * 2)"
    }
  ],
  "mark": "rect",
  "encoding": {
    "x": { "field": "x", "type": "index" },
    "y": { "field": "y", "type": "index" },
    "color": {
      "field": "z",
      "type": "quantitative",
      "scale": {
        "scheme": "magma"
      }
    }
  }
}

Bars

{
  "data": {
    "sequence": { "start": 0, "stop": 60, "as": "x" }
  },
  "transform": [
    {
      "type": "formula",
      "expr": "sin((datum.x - 30) / 4) + (datum.x - 30) / 30",
      "as": "y"
    }
  ],
  "mark": "rect",
  "encoding": {
    "x": { "field": "x", "type": "index", "scale": { "padding": 0.1 } },
    "y": { "field": "y", "type": "quantitative" },
    "y2": { "datum": 0 },
    "color": {
      "field": "y",
      "type": "quantitative",
      "scale": {
        "type": "threshold",
        "domain": [0],
        "range": ["#ed553b", "#20639b"]
      }
    }
  }
}