Streamlit Explanation Column (12): Data Visualization - Detailed Explanation of Chart Drawing (Part 2)

1 Introduction

Data visualization plays a vital role in the field of data analysis and data science. By visualizing data, we can better understand the patterns and trends behind it to make accurate decisions and predictions. However, turning raw data into meaningful graphs is not easy. That's why we need powerful and flexible tools to help us achieve this.

Over the past few years, Streamlit has emerged and quickly become one of the go-to tools for building interactive data applications. Streamlit is an open source library based on Python. Its concise syntax and intuitive interface enable data scientists and developers to quickly build applications with powerful visualization functions.

In the last two blogs of this column, we have explained in detail several commonly used data visualization functions in Streamlit. Now, in this blog, I will continue to share the data visualization knowledge about Streamlit, focusing on the use of functions st.vega_lite_chart, st.plotly_chart, st.bokeh_chart, st.pydeck_chart, st.graphviz_chart and st.map method and parameters.

By reading this blog, you will learn how to use these powerful functions to draw different types of charts and maps, and master how to customize configurations, adjust styles, and add interactive functions. Let's start exploring the charm of data visualization in Streamlit!

2 Use st.vega_lite_chart to draw Vega-Lite charts

The st.vega_lite_chart function is one of the functions in Streamlit for drawing Vega-Lite charts. Vega-Lite is a high-level grammar for describing interactive graphics that provides a simple yet powerful set of rules for mapping data to visual properties.

Below we will show the usage of the st.vega_lite_chart function through two examples.

2.1 Example 1: Draw a scatterplot

In this example, we first import the required libraries, generate a random dataset, and create a DataFrame with three columns 'a', 'b', and 'c'. Then, we use the st.vega_lite_chart function to draw a scatterplot, where each point in the chart is determined by the values ​​in the 'a' and 'b' columns, and the size and color of the points are determined by the values ​​in the 'c' column.

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

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

st.vega_lite_chart(chart_data, {
    
    
    'mark': {
    
    'type': 'circle', 'tooltip': True},
    'encoding': {
    
    
        'x': {
    
    'field': 'a', 'type': 'quantitative'},
        'y': {
    
    'field': 'b', 'type': 'quantitative'},
        'size': {
    
    'field': 'c', 'type': 'quantitative'},
        'color': {
    
    'field': 'c', 'type': 'quantitative'},
    },
})

In this example, we specify the marker type of the scatterplot as circle and provide a tooltip for it. At the same time, we use the Vega-Lite encoding method to specify the field names of the x-axis and y-axis, and use the 'size' and 'color' attributes to determine the size and color of the points.

2.2 Example 2: Custom theme style

Vega-Lite charts are displayed in Streamlit by default using the Streamlit theme, which is simple, user-friendly, and better integrated with the design of the application. Starting with Streamlit 1.16.0, you can use the Streamlit theme by setting theme="streamlit". If you want to disable the Streamlit theme, use theme=None to use Vega-Lite's native theme. Here is an example showing charts using different themes:

import streamlit as st
from vega_datasets import data

source = data.cars()

chart = {
    
    
    "mark": "point",
    "encoding": {
    
    
        "x": {
    
    
            "field": "Horsepower",
            "type": "quantitative",
        },
        "y": {
    
    
            "field": "Miles_per_Gallon",
            "type": "quantitative",
        },
        "color": {
    
    "field": "Origin", "type": "nominal"},
        "shape": {
    
    "field": "Origin", "type": "nominal"},
    },
}

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

with tab1:
    # 使用 Streamlit 主题，这是默认主题，您也可以省略 theme 参数
    st.vega_lite_chart(
        source, chart, theme="streamlit", use_container_width=True
    )

with tab2:
    st.vega_lite_chart(
        source, chart, theme=None, use_container_width=True
    )

In this example, we use the streamlit and vega_datasets libraries. We get the data source from data.cars() and create a dictionary containing the configuration of the chart. We then use the st.tabs function to create two tabs, one with the Streamlit theme and the other with the Vega-Lite native theme. In each tab, we draw the corresponding chart using the st.vega_lite_chart function and set use_container_width=True to fit the width of the container.

Through this example, you can experience the impact of different themes on the style of the diagram and the overall application. Streamlit themes use Streamlit's color palette, which blends better with the app's design. Vega-Lite native themes, on the other hand, use Vega-Lite's default styles, which may differ slightly from the app's design.

Hope this guide helps you understand how to use the st.vega_lite_chart function to draw Vega-Lite charts and customize theme styles if needed. By using Streamlit and Vega-Lite, you can easily create interactive and beautiful data visualization charts.

3 Use the st.plotly_chart function to create a Plotly chart

Plotly is a powerful and popular Python library for creating interactive charts and visualizations. Combined with Streamlit, we can easily embed Plotly charts into our applications. In this article, I will introduce the use and parameters of the st.plotly_chart function in detail, and demonstrate its functionality through sample code.

3.1 Basic usage of st.plotly_chart function

Before using the st.plotly_chart function, we need to import the necessary library as follows:

import streamlit as st
import plotly.express as px

Next, we can use Plotly to generate a chart and embed it in a Streamlit application using the st.plotly_chart function. Here is a sample code:

# 添加直方图数据
x1 = np.random.randn(200) - 2
x2 = np.random.randn(200)
x3 = np.random.randn(200) + 2

# 将数据分组在一起
hist_data = [x1, x2, x3]
group_labels = ['Group 1', 'Group 2', 'Group 3']

# 使用自定义 bin_size 创建 distplot
fig = ff.create_distplot(hist_data, group_labels, bin_size=[.1, .25, .5])

# 绘制图表
st.plotly_chart(fig, use_container_width=True)

In this example, we create a histogram using the create_distplot function from plotly.figure_factory. Then, we embed the chart into the Streamlit application by calling the st.plotly_chart function. By setting the parameter use_container_width=True, the chart will be resized adaptively according to the width of the container.

3.2 More uses of the st.plotly_chart function

In addition to basic usage, the st.plotly_chart function also supports additional parameters that can further customize the appearance and behavior of the chart. Here are some commonly used parameters:

• theme: Set the theme of the chart. Can be set to "streamlit" (to use Streamlit's default theme) or None (to use Plotly
  's native theme).
• sharing: Set the sharing mode of the chart. Can be set to "streamlit" (share data and callback functions) or "auto" (automatically detect sharing mode).
• config: Set the configuration options for Plotly. Multiple configuration options can be passed as a dictionary.

Let's demonstrate more usage with an example:

import plotly.express as px
import streamlit as st

df = px.data.gapminder()

fig = px.scatter(
    df.query("year==2007"),
    x="gdpPercap",
    y="lifeExp",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=True,
    size_max=60,
)

tab1, tab2 = st.tabs(["Streamlit 主题（默认）", "Plotly 原生主题"])
with tab1:
    # 使用 Streamlit 主题，这是默认的方式，也可以省略 theme 参数
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)
with tab2:
    # 使用 Plotly 的原生主题
    st.plotly_chart(fig, theme=None, use_container_width=True)

In this example, we use a custom colormap (color_continuous_scale="reds") and use the st.tabs function to place two charts with different themes in tabs. This way, we can easily switch themes and compare charts with two different looks.

We can also further customize the appearance and behavior of the chart through other parameters, such as adjusting the size of the chart, adding interactive functions, etc. By familiarizing ourselves with the documentation of Plotly and Streamlit, we can discover more configuration options and usage.

4 Streamlit combined with Bokeh for data visualization

In data science and data analysis work, data visualization is a powerful tool that can help us better understand data, spot patterns and trends, and communicate our findings to others. Streamlit is a Python library for building interactive data applications, and Bokeh is a Python visualization library for building interactive web applications. This article will introduce how to use Bokeh in Streamlit for data visualization, and demonstrate its usage through an example.

First, we need to import the required libraries and modules. Here is sample code:

import streamlit as st
from bokeh.plotting import figure

Next, we create some sample data and use Bokeh to create a simple line chart. Here is sample code:

x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

p = figure(
    title='simple line example',
    x_axis_label='x',
    y_axis_label='y')

p.line(x, y, legend_label='Trend', line_width=2)

In the above code, we create a Bokeh figure object p, and set the title, x-axis and y-axis labels of the line chart. We then drew a line on the chart using the line method, specifying the data x and y, and setting the legend label and line width.

Now that we have created a Bokeh chart object p, we will display it in the Streamlit application. We can embed a Bokeh chart p into a Streamlit application using the st.bokeh_chart function. Here is sample code:

st.bokeh_chart(p, use_container_width=True)

In the above code, we use the st.bokeh_chart function to embed the Bokeh chart object p into the Streamlit application, and use the parameter use_container_width=True to make the chart adapt to the width of the container.

5 Create graphs and network diagrams using the st.graphviz_chart function

In data visualization, in addition to common statistical charts, graphs and network diagrams are also very useful tools. Streamlit provides the st.graphviz_chart function, which allows us to easily create graphs and network diagrams in blog posts, applications or reports. This article will introduce how to use the st.graphviz_chart function and demonstrate its usage with sample code.

5.1 Introduction to st.graphviz_chart function

The st.graphviz_chart function is a built-in function in Streamlit for drawing graphs and network diagrams. It takes as input a graph object or a graph string represented in the DOT language and renders the image on the interface of the Streamlit application.

Example 1

Let's start with a simple example. In this example we will create a directed graph using the graphviz library and display it using the st.graphviz_chart function.

import streamlit as st
import graphviz

# 创建一个图形对象
graph = graphviz.Digraph()
graph.edge('run', 'intr')
graph.edge('intr', 'runbl')
graph.edge('runbl', 'run')
graph.edge('run', 'kernel')
graph.edge('kernel', 'zombie')
graph.edge('kernel', 'sleep')
graph.edge('kernel', 'runmem')
graph.edge('sleep', 'swap')
graph.edge('swap', 'runswap')
graph.edge('runswap', 'new')
graph.edge('runswap', 'runmem')
graph.edge('new', 'runmem')
graph.edge('sleep', 'runmem')

# 使用 st.graphviz_chart 函数显示图形
st.graphviz_chart(graph)

In the above code, we first imported the necessary library and created a Digraph object graph. Then, we use the graph.edge method to add edges, building a directed graph. Finally, we use the st.graphviz_chart function to display the graph on the interface of the Streamlit application.

Run the above code snippet and you'll see a graph view on the interface of the Streamlit application that renders the graph we created.

Example 2

In addition to using the graphviz library to create graph objects, the st.graphviz_chart function also supports graph strings represented directly in the DOT language. Let's illustrate this with another example.

st.graphviz_chart('''
    digraph {
        run -> intr
        intr -> runbl
        runbl -> run
        run -> kernel
        kernel -> zombie
        kernel -> sleep
        kernel -> runmem
        sleep -> swap
        swap -> runswap
        runswap -> new
        runswap -> runmem
        new -> runmem
        sleep -> runmem
    }
''')

In the above code, we passed the graph string directly to the st.graphviz_chart function. This graph is expressed using the DOT language, and the graph structure is described by specifying the relationship of vertices and edges.

Run the above code snippet, and you'll see the same graph view as in Example 1 on the interface of the Streamlit application.

6 Use the st.map function to display maps and scatterplots

In data visualization, map visualization is a common way. The st.map function is a function used to create a map visualization in Streamlit. It combines a map and a scatter plot, and has the functions of automatic centering and automatic zooming.

Steps for usage:

Step1: Import the necessary libraries and modules:

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

Step2: Prepare data:

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

Step3: Use the st.map function for map visualization:

st.map(df)

Example 1: Basic map visualization

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

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(df)

In this example, we first create a DataFrame containing random latitude and longitude, then use the st.map function to draw a scatterplot on the map, centering and scaling automatically.

Example 2: Custom scatterplot style

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

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(df, size=20, color='#0044ff')

In the above example, we can customize the size and color of the data points by setting the size parameter and color parameter.

Example 3: Dynamically set latitude, longitude, size and color using other columns

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

df = pd.DataFrame({
    
    
    "col1": np.random.randn(1000) / 50 + 37.76,
    "col2": np.random.randn(1000) / 50 + -122.4,
    "col3": np.random.randn(1000) * 100,
    "col4": np.random.rand(1000, 4).tolist(),
})

st.map(df,
    latitude='col1',
    longitude='col2',
    size='col3',
    color='col4')

In this example, we use a DataFrame with multiple columns of data, and specify the column name parameters of latitude, longitude, size, and color to dynamically set the latitude, longitude, size, and color.

7 Epilogue

This article comprehensively introduces the application of Streamlit library in data visualization and the usage and parameters of each function. We first realized the importance of data visualization in the field of data analysis and data science, and the advantages and convenience of Streamlit as a Python library. Then, we discussed in detail the commonly used Streamlit functions st.vega_lite_chart, st.plotly_chart, st.bokeh_chart, st.pydeck_chart, st.graphviz_chart and st.map.

By using these functions, we can take advantage of powerful visualization tools such as Vega-Lite, Plotly, Bokeh, PyDeck, and Graphviz to easily create various interactive charts, maps, and network diagrams. We learned how to load data, select chart types, customize styles and layouts, and implement rich interactive functions by setting parameters. This enables data scientists and analysts to more effectively explore, interpret and communicate insights from data.

Streamlit is easy to use and flexible, making the development of interactive data applications more efficient. We also highlight the advantages of Streamlit in data visualization, such as easy deployment, instant feedback, and easy sharing. It provides a more intuitive and dynamic display for data-related tasks, helping us better understand data, discover patterns, and present results.

Through further study and exploration, we can master more functions and extensions of Streamlit, and further enhance the ability of data visualization. Please refer to the relevant documentation, tutorials, and examples to continue exploring the potential of Streamlit in the field of data science and visualization.