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
, strokeOpacity
,
fillOpacity
, and strokeWidth
channels.
Properties¶
clip
-
Type: boolean |
"never"
If true, the mark is clipped to the UnitView's rectangle. By default, clipping is enabled for marks that have zoomable positional scales.
color
-
Type: string | ExprRef
Color of the mark. Affects either
fill
orstroke
, depending on thefilled
property. cornerRadius
-
Type: number | ExprRef
Radius of the rounded corners.
Default value:
0
cornerRadiusBottomLeft
-
Type: number | ExprRef
Radius of the bottom left rounded corner. Has higher precedence than
cornerRadius
.Default value: (None)
cornerRadiusBottomRight
-
Type: number | ExprRef
Radius of the bottom right rounded corner. Has higher precedence than
cornerRadius
.Default value: (None)
cornerRadiusTopLeft
-
Type: number | ExprRef
Radius of the top left rounded corner. Has higher precedence than
cornerRadius
.Default value: (None)
cornerRadiusTopRight
-
Type: number | ExprRef
Radius of the top right rounded corner. Has higher precedence than
cornerRadius
.Default value: (None)
fill
-
Type: string | ExprRef
The fill color.
fillOpacity
-
Type: number | ExprRef
The fill opacity. Value between
0
and1
. filled
-
Type: boolean
Whether the
color
represents thefill
color (true
) or thestroke
color (false
). minBufferSize
-
Type: number
Minimum size for WebGL buffers (number of data items). Allows for using
bufferSubData()
to update graphics.This property is intended for internal use.
minHeight
-
Type: number | ExprRef
The minimum height of a rectangle in pixels. The property clamps rectangles' heights.
Default value:
0
minOpacity
-
Type: number | ExprRef
Clamps the minimum size-dependent opacity. The property does not affect the
opacity
channel. Valid values are between0
and1
.When a rectangle would be smaller than what is specified in
minHeight
andminWidth
, it is faded out proportionally. Example: a rectangle would be rendered as one pixel wide, butminWidth
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
minWidth
-
Type: number | ExprRef
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 when zooming. The value should generally be at least one.
Default value:
1
opacity
-
Type: number | ExprRef
Opacity of the mark. Affects
fillOpacity
orstrokeOpacity
, depending on thefilled
property. stroke
-
Type: string | ExprRef
The stroke color
strokeOpacity
-
Type: number | ExprRef
The stroke opacity. Value between
0
and1
. strokeWidth
-
Type: number | ExprRef
The stroke width in pixels.
tooltip
-
Type: HandledTooltip | null
Tooltip handler. If
null
, no tooltip is shown. If string, specifies the tooltip handler to use. x
-
Type: number | ExprRef
Position on the x axis.
x2
-
Type: number | ExprRef
The secondary position on the x axis.
xOffset
-
Type: number
Offsets of the
x
andx2
coordinates in pixels. The offset is applied after the viewport scaling and translation.Default value:
0
y
-
Type: number | ExprRef
Position on the y axis.
y2
-
Type: number | ExprRef
The secondary position on the y axis.
yOffset
-
Type: number
Offsets of the
y
andy2
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"]
}
}
}
}