Spaces:
Runtime error
Runtime error
File size: 4,107 Bytes
9d3a61a df7943c 9d3a61a df7943c 9d3a61a df7943c 9d3a61a df7943c 9d3a61a df7943c 9d3a61a df7943c 9d3a61a cd47726 |
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 145 146 147 148 149 150 151 152 |
import altair as alt
import pandas as pd
import streamlit as st
from vega_datasets import data
st.set_page_config(
page_title="Time series annotations", page_icon="⬇", layout="centered"
)
@st.experimental_memo
def get_data():
source = data.stocks()
source = source[source.date.gt("2004-01-01")]
return source
@st.experimental_memo(ttl=60 * 60 * 24)
def get_chart(data):
hover = alt.selection_single(
fields=["date"],
nearest=True,
on="mouseover",
empty="none",
)
lines = (
alt.Chart(data, title="Evolution of stock prices")
.mark_line()
.encode(
x="date",
y="price",
color="symbol",
# strokeDash="symbol",
)
)
# Draw points on the line, and highlight based on selection
points = lines.transform_filter(hover).mark_circle(size=65)
# Draw a rule at the location of the selection
tooltips = (
alt.Chart(data)
.mark_rule()
.encode(
x="yearmonthdate(date)",
y="price",
opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
tooltip=[
alt.Tooltip("date", title="Date"),
alt.Tooltip("price", title="Price (USD)"),
],
)
.add_selection(hover)
)
return (lines + points + tooltips).interactive()
st.title("⬇ Time series annotations")
st.write("Give more context to your time series using annotations!")
col1, col2, col3 = st.columns(3)
with col1:
ticker = st.text_input("Choose a ticker (⬇💬👇ℹ️ ...)", value="⬇")
with col2:
ticker_dx = st.slider(
"Horizontal offset", min_value=-30, max_value=30, step=1, value=0
)
with col3:
ticker_dy = st.slider(
"Vertical offset", min_value=-30, max_value=30, step=1, value=-10
)
# Original time series chart. Omitted `get_chart` for clarity
source = get_data()
chart = get_chart(source)
# Input annotations
ANNOTATIONS = [
("Mar 01, 2008", "Pretty good day for GOOG"),
("Dec 01, 2007", "Something's going wrong for GOOG & AAPL"),
("Nov 01, 2008", "Market starts again thanks to..."),
("Dec 01, 2009", "Small crash for GOOG after..."),
]
# Create a chart with annotations
annotations_df = pd.DataFrame(ANNOTATIONS, columns=["date", "event"])
annotations_df.date = pd.to_datetime(annotations_df.date)
annotations_df["y"] = 0
annotation_layer = (
alt.Chart(annotations_df)
.mark_text(size=15, text=ticker, dx=ticker_dx, dy=ticker_dy, align="center")
.encode(
x="date:T",
y=alt.Y("y:Q"),
tooltip=["event"],
)
.interactive()
)
# Display both charts together
st.altair_chart((chart + annotation_layer).interactive(), use_container_width=True)
st.write("## Code")
st.write(
"See more in our public [GitHub repository](https://github.com/streamlit/example-app-time-series-annotation)"
)
import altair as alt
import pandas as pd
import streamlit as st
from vega_datasets import data
@st.experimental_memo
def get_data():
source = data.stocks()
source = source[source.date.gt("2004-01-01")]
return source
source = get_data()
# Original time series chart. Omitted `get_chart` for clarity
chart = get_chart(source)
# Input annotations
ANNOTATIONS = [
("Mar 01, 2008", "Pretty good day for GOOG"),
("Dec 01, 2007", "Something's going wrong for GOOG & AAPL"),
("Nov 01, 2008", "Market starts again thanks to..."),
("Dec 01, 2009", "Small crash for GOOG after..."),
]
# Create a chart with annotations
annotations_df = pd.DataFrame(ANNOTATIONS, columns=["date", "event"])
annotations_df.date = pd.to_datetime(annotations_df.date)
annotations_df["y"] = 0
annotation_layer = (
alt.Chart(annotations_df)
.mark_text(size=15, text="{ticker}", dx={ticker_dx}, dy={ticker_dy}, align="center")
.encode(
x="date:T",
y=alt.Y("y:Q"),
tooltip=["event"],
)
.interactive()
)
# Display both charts together
st.altair_chart((chart + annotation_layer).interactive(), use_container_width=True) |