1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
.. currentmodule:: altair
.. _user-guide-rule-marks:
Rule
~~~~
The ``rule`` mark represents each data point as a line segment. It can be used in two ways. First, as a line segment that spans the complete width or height of a view. Second, a rule can be used to draw a line segment between two positions.
Rule Mark Properties
--------------------
.. altair-plot::
:hide-code:
:div_class: properties-example
import altair as alt
import pandas as pd
x_slider = alt.binding_range(min=1, max=100, step=1)
x_var = alt.param(bind=x_slider, value=35, name="x")
x2_slider = alt.binding_range(min=1, max=100, step=1)
x2_var = alt.param(bind=x2_slider, value=75, name="x2")
y_slider = alt.binding_range(min=1, max=100, step=1)
y_var = alt.param(bind=y_slider, value=25, name="y")
y2_slider = alt.binding_range(min=1, max=100, step=1)
y2_var = alt.param(bind=y2_slider, value=75, name="y2")
strokeWidth_slider = alt.binding_range(min=0, max=10, step=0.5)
strokeWidth_var = alt.param(bind=strokeWidth_slider, value=2, name="strokeWidth")
strokeCap_select = alt.binding_select(options=["butt", "round", "square"])
strokeCap_var = alt.param(bind=strokeCap_select, value="butt", name="strokeCap")
strokeDash_select = alt.binding_select(
options=[[1, 0], [8, 8], [8, 4], [4, 4], [4, 2], [2, 1], [1, 1]]
)
strokeDash_var = alt.param(bind=strokeDash_select, value=[1, 0], name="strokeDash")
alt.Chart().mark_rule(
color="orange",
strokeWidth=strokeWidth_var,
strokeCap=strokeCap_var,
strokeDash=strokeDash_var,
).encode(
x=alt.datum(x_var, type="quantitative", scale=alt.Scale(domain=[0, 100])),
y=alt.datum(y_var, type="quantitative", scale=alt.Scale(domain=[0, 100])),
x2=alt.datum(x2_var),
y2=alt.datum(y2_var),
).add_params(
x_var,
x2_var,
y_var,
y2_var,
strokeWidth_var,
strokeCap_var,
strokeDash_var,
)
A ``rule`` mark definition can contain any :ref:`standard mark properties <mark-properties>`.
Examples
--------
Width/Height-Spanning Rules
^^^^^^^^^^^^^^^^^^^^^^^^^^^
If the ``rule`` mark only has ``y`` encoding, the output view produces horizontal rules that spans the complete width. Similarly, if the ``rule`` mark only has ``x`` encoding, the output view produces vertical rules that spans the height.
We can use rules to show the average price of different stocks akin to ``tick`` marks.
.. altair-plot::
import altair as alt
from vega_datasets import data
source = data.stocks()
alt.Chart(source).mark_rule().encode(
y="mean(price):Q",
size=alt.value(2),
color="symbol:N"
)
The fact that rule marks span the width or the height of a single view make them useful as an annotation layer. For example, we can use rules to show average values of different stocks alongside the price curve.
.. altair-plot::
import altair as alt
from vega_datasets import data
source = data.stocks()
base = alt.Chart(source).properties(width=550)
line = base.mark_line().encode(
x="date",
y="price",
color="symbol"
)
rule = base.mark_rule().encode(
y="average(price)",
color="symbol",
size=alt.value(2)
)
line + rule
We can also use a rule mark to show global mean value over a histogram.
.. altair-plot::
import altair as alt
from vega_datasets import data
source = data.movies.url
base = alt.Chart(source)
bar = base.mark_bar().encode(
x=alt.X("IMDB_Rating:Q").bin().axis(None),
y="count()"
)
rule = base.mark_rule(color="red").encode(
x="mean(IMDB_Rating):Q",
size=alt.value(5),
)
bar + rule
Ranged Rules
^^^^^^^^^^^^
To control the spans of horizontal/vertical rules, ``x`` and ``x2``/ ``y`` and ``y2`` channels can be specified.
For example, we can use ``y`` and ``y2`` show the ``"min"`` and ``"max"`` values of horsepowers for cars from different locations.
.. altair-plot::
import altair as alt
from vega_datasets import data
source = data.cars()
alt.Chart(source).mark_rule().encode(
x="Origin",
y="min(Horsepower)",
y2="max(Horsepower)",
)
|
