awacke1 commited on
Commit
9d3a61a
·
1 Parent(s): a51cd0b

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +151 -0
app.py ADDED
@@ -0,0 +1,151 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import altair as alt
2
+ import pandas as pd
3
+ import streamlit as st
4
+ from vega_datasets import data
5
+
6
+ st.set_page_config(
7
+ page_title="Time series annotations", page_icon="⬇", layout="centered"
8
+ )
9
+
10
+
11
+ @st.experimental_memo
12
+ def get_data():
13
+ source = data.stocks()
14
+ source = source[source.date.gt("2004-01-01")]
15
+ return source
16
+
17
+
18
+ @st.experimental_memo(ttl=60 * 60 * 24)
19
+ def get_chart(data):
20
+ hover = alt.selection_single(
21
+ fields=["date"],
22
+ nearest=True,
23
+ on="mouseover",
24
+ empty="none",
25
+ )
26
+
27
+ lines = (
28
+ alt.Chart(data, title="Evolution of stock prices")
29
+ .mark_line()
30
+ .encode(
31
+ x="date",
32
+ y="price",
33
+ color="symbol",
34
+ # strokeDash="symbol",
35
+ )
36
+ )
37
+
38
+ # Draw points on the line, and highlight based on selection
39
+ points = lines.transform_filter(hover).mark_circle(size=65)
40
+
41
+ # Draw a rule at the location of the selection
42
+ tooltips = (
43
+ alt.Chart(data)
44
+ .mark_rule()
45
+ .encode(
46
+ x="yearmonthdate(date)",
47
+ y="price",
48
+ opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
49
+ tooltip=[
50
+ alt.Tooltip("date", title="Date"),
51
+ alt.Tooltip("price", title="Price (USD)"),
52
+ ],
53
+ )
54
+ .add_selection(hover)
55
+ )
56
+
57
+ return (lines + points + tooltips).interactive()
58
+
59
+
60
+ st.title("⬇ Time series annotations")
61
+
62
+ st.write("Give more context to your time series using annotations!")
63
+
64
+ col1, col2, col3 = st.columns(3)
65
+ with col1:
66
+ ticker = st.text_input("Choose a ticker (⬇💬👇ℹ️ ...)", value="⬇")
67
+ with col2:
68
+ ticker_dx = st.slider(
69
+ "Horizontal offset", min_value=-30, max_value=30, step=1, value=0
70
+ )
71
+ with col3:
72
+ ticker_dy = st.slider(
73
+ "Vertical offset", min_value=-30, max_value=30, step=1, value=-10
74
+ )
75
+
76
+ # Original time series chart. Omitted `get_chart` for clarity
77
+ source = get_data()
78
+ chart = get_chart(source)
79
+
80
+ # Input annotations
81
+ ANNOTATIONS = [
82
+ ("Mar 01, 2008", "Pretty good day for GOOG"),
83
+ ("Dec 01, 2007", "Something's going wrong for GOOG & AAPL"),
84
+ ("Nov 01, 2008", "Market starts again thanks to..."),
85
+ ("Dec 01, 2009", "Small crash for GOOG after..."),
86
+ ]
87
+
88
+ # Create a chart with annotations
89
+ annotations_df = pd.DataFrame(ANNOTATIONS, columns=["date", "event"])
90
+ annotations_df.date = pd.to_datetime(annotations_df.date)
91
+ annotations_df["y"] = 0
92
+ annotation_layer = (
93
+ alt.Chart(annotations_df)
94
+ .mark_text(size=15, text=ticker, dx=ticker_dx, dy=ticker_dy, align="center")
95
+ .encode(
96
+ x="date:T",
97
+ y=alt.Y("y:Q"),
98
+ tooltip=["event"],
99
+ )
100
+ .interactive()
101
+ )
102
+
103
+ # Display both charts together
104
+ st.altair_chart((chart + annotation_layer).interactive(), use_container_width=True)
105
+
106
+ st.write("## Code")
107
+
108
+ st.write(
109
+ "See more in our public [GitHub repository](https://github.com/streamlit/example-app-time-series-annotation)"
110
+ )
111
+
112
+ st.code(
113
+ f"""
114
+ import altair as alt
115
+ import pandas as pd
116
+ import streamlit as st
117
+ from vega_datasets import data
118
+ @st.experimental_memo
119
+ def get_data():
120
+ source = data.stocks()
121
+ source = source[source.date.gt("2004-01-01")]
122
+ return source
123
+ source = get_data()
124
+ # Original time series chart. Omitted `get_chart` for clarity
125
+ chart = get_chart(source)
126
+ # Input annotations
127
+ ANNOTATIONS = [
128
+ ("Mar 01, 2008", "Pretty good day for GOOG"),
129
+ ("Dec 01, 2007", "Something's going wrong for GOOG & AAPL"),
130
+ ("Nov 01, 2008", "Market starts again thanks to..."),
131
+ ("Dec 01, 2009", "Small crash for GOOG after..."),
132
+ ]
133
+ # Create a chart with annotations
134
+ annotations_df = pd.DataFrame(ANNOTATIONS, columns=["date", "event"])
135
+ annotations_df.date = pd.to_datetime(annotations_df.date)
136
+ annotations_df["y"] = 0
137
+ annotation_layer = (
138
+ alt.Chart(annotations_df)
139
+ .mark_text(size=15, text="{ticker}", dx={ticker_dx}, dy={ticker_dy}, align="center")
140
+ .encode(
141
+ x="date:T",
142
+ y=alt.Y("y:Q"),
143
+ tooltip=["event"],
144
+ )
145
+ .interactive()
146
+ )
147
+ # Display both charts together
148
+ st.altair_chart((chart + annotation_layer).interactive(), use_container_width=True)
149
+ """,
150
+ "python",
151
+ )