Rule¶
Rule mark displays each data item as a line segment. Rules can span the whole width or height of the view. Alternatively, they may have specific endpoints.
{
"data": {
"sequence": { "start": 0, "stop": 15, "as": "y" }
},
"mark": {
"type": "rule",
"strokeDash": [6, 3]
},
"encoding": {
"x": { "field": "y", "type": "quantitative" },
"color": { "field": "y", "type": "nominal" }
}
}
Channels¶
Rule mark supports the primary and secondary position
channels and the color
, opacity
, and size
channels.
Properties¶
size
-
Type: Number
The stroke width of the lines in pixels.
Default value:
1
minLength
-
Type: Number
The minimum length of the rule in pixels. Use this property to ensure that very short rules remain visible even when the user zooms out.
Default value:
0
strokeDash
-
Type: Number[]
An array of of alternating stroke and gap lengths or
null
for solid strokes.Default value:
null
strokeDashOffset
-
Type: Number
An offset for the stroke pattern.
Default value:
0
strokeCap
-
Type: String
The style of stroke ends. Available choices:
"butt"
,"round
", and"square"
.Default value:
"butt"
xOffset
-
Type: Number
Offsets of the
x
andx2
coordinates in pixels. The offset is applied after the viewport scaling and translation.Default value:
0
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¶
Ranged rules¶
{
"data": {
"values": [
{ "y": "A", "x": 2, "x2": 7 },
{ "y": "B", "x": 0, "x2": 3 },
{ "y": "B", "x": 5, "x2": 6 },
{ "y": "C", "x": 4, "x2": 8 },
{ "y": "D", "x": 1, "x2": 5 }
]
},
"mark": {
"type": "rule",
"size": 10,
"strokeCap": "round"
},
"encoding": {
"y": { "field": "y", "type": "nominal" },
"x": { "field": "x", "type": "quantitative" },
"x2": { "field": "x2" }
}
}
Plenty of diagonal rules¶
{
"width": 300,
"height": 300,
"data": {
"sequence": { "start": 0, "stop": 50 }
},
"transform": [
{
"type": "formula",
"expr": "random()",
"as": "x"
},
{
"type": "formula",
"expr": "datum.x + random() * 0.5 - 0.25",
"as": "x2"
},
{
"type": "formula",
"expr": "random()",
"as": "y"
},
{
"type": "formula",
"expr": "datum.y + random() * 0.5 - 0.25",
"as": "y2"
},
{
"type": "formula",
"expr": "random()",
"as": "size"
}
],
"mark": {
"type": "rule",
"strokeCap": "round"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative"
},
"x2": { "field": "x2" },
"y": {
"field": "y",
"type": "quantitative"
},
"y2": { "field": "y2" },
"size": {
"field": "size",
"type": "quantitative",
"scale": { "type": "pow", "range": [0, 10] }
},
"color": {
"field": "x",
"type": "nominal",
"scale": { "scheme": "category20" }
}
}
}