Streamlit Explanation Column (11): Data Visualization - Detailed Explanation of Chart Drawing (Middle)

1 Introduction

In the last blog post " Streamlit Explanation Column (10): Data Visualization - Detailed Chart Drawing (Part 1) ", we learned some basics about data visualization and explored several common chart drawing functions in the Streamlit library, including st.line_chart, st.area_chart, st.bar_chart, and st.pyplot. Through these functions, we can easily draw different types of charts to make the data more intuitive.

In this article, we will continue to discuss the charting functions of the Streamlit library, focusing on the st.altair_chart function. Compared with the functions mentioned above, st.altair_chart provides more advanced visualization capabilities and customization options. With st.altair_chart, we can display data more flexibly and present charts in an interactive way.

In the following chapters, we will delve into the use of the st.altair_chart function and the application of various parameters. Through practical examples, we'll learn how to draw interactive and high-quality charts, and explore common data visualization techniques to enhance the expressive power of charts. After reading this article, you will be more proficient in using the st.altair_chart function to better convey and analyze technical insights in the form of data visualization.

Now, let's get straight to the point and explore the power of the st.altair_chart function together!

2 Draw an interactive scatterplot

In this chapter, we will learn how to draw an interactive scatterplot using the st.altair_chart function. A scatterplot is a common data visualization method that can be used to show the relationship between two variables. We will use the Altair library to build a scatter plot and embed the chart in a Streamlit application using the st.altair_chart function.

First, we need to import the required libraries and modules:

import streamlit as st
import pandas as pd
import numpy as np
import altair as alt

Next, we create some random data as sample data. code show as below:

chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c'])

In this example, we generate a random data containing 20 rows and 3 columns, the column names are "a", "b" and "c".

We then use the Altair library to create a basic scatterplot object. code show as below:

c = alt.Chart(chart_data).mark_circle().encode(
    x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c'])

In this example, we use the .mark_circle() method to specify the shape of the scatterplot as a circle. With the .encode() method, we map the "a" column of the data to the x-axis, the "b" column to the y-axis, and the "c" column to the point size and color. In addition, we have specified the tooltip option to display the values ​​of the three columns "a", "b" and "c" when the mouse hovers over the chart.

Finally, we embed the chart into the Streamlit application using the st.altair_chart function. code show as below:

st.altair_chart(c, use_container_width=True)

Here, we pass the scatter chart object "c" to the st.altair_chart function, and set the use_container_width parameter to True to make the width of the chart adaptive to the page width.

You can now run the entire program and view the resulting interactive scatterplot. The graph will display in the Streamlit app, and you can hover over the scatter to see the exact values.

Through this example, we are familiar with the basic process of using the st.altair_chart function to draw an interactive scatterplot. In practical applications, you can adjust the color, size, label and other attributes of the chart as needed to make the chart more suitable for your needs.

3 Customize the chart theme

In this chapter, we will learn how to customize chart themes, and how to apply different theme styles in Streamlit applications.

In Altair, you can give your diagrams a different look and feel by using different themes. By default, Altair charts are displayed using the Streamlit theme. This theme is sleek, user-friendly and blends in with the Streamlit app design.

You can use the Streamlit theme by setting the theme parameter to "streamlit". This enables better integration of charts with other components in the application. You can use theme=None if you wish to use Altair's native theme instead of the Streamlit theme.

Let's look at an example showing a chart drawn using the Streamlit theme and the Altair native theme:

import altair as alt
from vega_datasets import data

# 载入数据集
source = data.cars()

# 创建散点图对象
chart = alt.Chart(source).mark_circle().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
).interactive()

# 创建标签
tab1, tab2 = st.tabs(["Streamlit主题（默认）", "Altair原生主题"])

with tab1:
    # 使用Streamlit主题，默认情况下即可。你也可以省略theme参数。
    st.altair_chart(chart, theme="streamlit", use_container_width=True)
with tab2:
    # 使用Altair原生主题
    st.altair_chart(chart, theme=None, use_container_width=True)

The above example creates an API with two tabs showing the graph with and without the Streamlit theme enabled. You can view chart styles under both themes by clicking the tabs.

Also, even with the Streamlit theme enabled, you can still have custom configurations for your charts. For example, you can override the default theme settings by changing things like colors or fonts. Here is an example:

import altair as alt
import streamlit as st
from vega_datasets import data

source = data.seattle_weather()

scale = alt.Scale(
    domain=["sun", "fog", "drizzle", "rain", "snow"],
    range=["#e7ba52", "#a7a7a7", "#aec7e8", "#1f77b4", "#9467bd"],
)
color = alt.Color("weather:N", scale=scale)

# 创建两个选择器：
# - brush，用于顶部面板的刷选
# - click，用于底部面板的多重点击
brush = alt.selection_interval(encodings=["x"])
click = alt.selection_multi(encodings=["color"])

# 顶部面板是时间 vs 温度的散点图
points = (
    alt.Chart()
    .mark_point()
    .encode(
        alt.X("monthdate(date):T", title="Date"),
        alt.Y(
            "temp_max:Q",
            title="Maximum Daily Temperature (C)",
            scale=alt.Scale(domain=[-5, 40]),
        ),
        color=alt.condition(brush, color, alt.value("lightgray")),
        size=alt.Size("precipitation:Q", scale=alt.Scale(range=[5, 200])),
    )
    .properties(width=550, height=300)
    .add_selection(brush)
    .transform_filter(click)
)

# 底部面板是天气类型的柱状图
bars = (
    alt.Chart()
    .mark_bar()
    .encode(
        x="count()",
        y="weather:N",
        color=alt.condition(click, color, alt.value("lightgray")),
    )
    .transform_filter(brush)
    .properties(
        width=550,
    )
    .add_selection(click)
)

chart = alt.vconcat(points, bars, data=source, title="Seattle Weather: 2012-2015")

tab1, tab2 = st.tabs(["Streamlit主题（默认）", "Altair原生主题"])

with tab1:
    st.altair_chart(chart, theme="streamlit", use_container_width=True)
with tab2:
    st.altair_chart(chart, theme=None, use_container_width=True)

By looking at the examples above, you can see that custom colors still work when the Streamlit theme is enabled.

4 Enhance the interactivity and annotation of data visualization

Altair also lets you annotate diagrams with text, images, and emoji. You can do this by creating layered charts, which allow two different charts to be superimposed on top of each other. The idea is to use the first chart to show the data and the second chart to show the annotations. Then, use operator addition to create a layered chart, superimposing the second chart on top of the first.

Let's walk through an example to demonstrate how to add text and emoji annotations to a time series chart.

step 1

Creating a Basic Chart In this example, we create a time series chart to track the evolution of stock prices. The chart is interactive and contains a multi-line tooltip. First, we import the required libraries and load the example stock dataset using the vega_datasets package:

import altair as alt
import pandas as pd
import streamlit as st
from vega_datasets import data

# 使用 @st.cache_data 使数据集保持在缓存中
@st.cache_data
def get_data():
    source = data.stocks()
    source = source[source.date.gt("2004-01-01")]
    return source
    
source = get_data()

The above code uses the stocks dataset in the vega_datasets library as sample data. The data set is obtained after January 1, 2004.

Please note that we have used the @st.cache_data decorator to cache the function of getting data, which can improve the performance of data access.

Next, we define a function to create an interactive stock price time series chart with a multi-line tooltip. The x-axis represents the date and the y-axis represents the stock price. Define the following functions:

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",
        )
    )

    # 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()

chart = get_chart(source)

The above code defines a function called get_chart that takes a dataset of stock prices as input and returns a chart object. This will be the base diagram we overlay annotations in step 2.

The hover in the function defines a selection set that is used to determine the closest date on mouse hover. The lines section creates a line graph where the x-axis represents dates, the y-axis represents stock prices, and the colors represent different stocks. The points section draws some points on the line graph and highlights them according to the selection. The tooltips section creates a rule line that displays hints based on the selected date position.

The last line of the function combines all the charts and enables interactivity.

By calling get_chart(source), we get a basic chart object chart, and we will add comments on this basis in step 2.

step two

Now that we have our first chart showing data, we can annotate it with text and emoji. Let's overlay the ⬇️ emoji on the time series chart to indicate a specific point of interest. We want users to be able to see the associated note text when they hover over the ⬇ emoji.

For simplicity, we add four annotations on a specific date and set the height of the annotations to a fixed value of 0.10.

First, we create a dataframe annotations_df containing the date, annotation text, and annotation height:

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..."),
]
annotations_df = pd.DataFrame(ANNOTATIONS, columns=["date", "event"])
annotations_df.date = pd.to_datetime(annotations_df.date)
annotations_df["y"] = 10

The above code defines a list named ANNOTATIONS that contains dates and annotation text. We then convert this list into a dataframe annotations_df with the date column converted to a datetime type. Also, we added an annotation height column called y with a value of 10 to the data frame.

Next, we use this data frame to create a scatterplot where the x-axis represents the date and the y-axis represents the height of the note. Data points at specific dates and altitudes are represented as ⬇ emoji using Altair's mark_text() method.

When the user hovers over the ⬇ emoji, the annotation text will be displayed as a tooltip. We use Altair's encode() method to map the annotation text column to the chart's ⬇ property.

annotation_layer = (
    alt.Chart(annotations_df)
    .mark_text(size=20, text="⬇", dx=-8, dy=-10, align="left")
    .encode(
        x="date:T",
        y=alt.Y("y:Q"),
        tooltip=["event"],
    )
    .interactive()
)

Finally, we overlay the annotations on the base diagram using operator addition, creating the final layered diagram.

st.altair_chart(
    (chart + annotation_layer).interactive(),
    use_container_width=True
)

The above code uses the st.altair_chart() function to overlay the annotation layer on top of the base chart and enable interactivity.

In this way, we added annotation layers on top of the base diagram, and ended up with a layered diagram showing both data and annotations.

5 Conclusion

In this blog post, we took a deep dive into the charting functionality in the Streamlit library, with a focus on the st.altair_chart function. By learning how to use st.altair_chart and the application of various parameters, we learned how to draw an interactive scatter plot, and learned how to customize the chart theme, enhance the interactivity and annotation of data visualization.

Through the study of this article, we have mastered the basic skills of using the st.altair_chart function for data visualization, and can customize the theme of the chart and enhance its interactivity and annotations according to requirements. Data visualization is a powerful tool that can help us better understand and communicate data, providing insights and decision support.

Thank you for reading this blog post, and hope this content can help you learn and apply data visualization. In your future data analysis and communication work, continue to explore and apply the skills of data visualization to its greatest potential.

If you have any questions or suggestions about this blog post, please feel free to let me know, and I will do my best to answer and improve for you. I wish you more success in your data visualization journey!