[Streamlit Tutorial] Quickly Create Interactive Data Visualization

Name: Olaf Källström

Published on 7/24/2023

Streamlit is an open-source tool that allows developers to create interactive web applications with ease. It's designed to help data scientists and engineers streamline their data visualization and machine learning tasks. With Streamlit, you can transform simple Python scripts into beautiful data-driven web applications in just a few lines of code.

Data visualization is a crucial aspect of data analysis. It allows us to understand complex data sets by representing them in a graphical format. Streamlit supports various types of visualizations, including bar charts, line charts, plots, pie charts, and histograms. This article will guide you through the process of creating these visualizations using Streamlit.

Easily Create Interactive Data Visualization in Streamlit with PyGWalker

PyGWalker (opens in a new tab) is also another awesome tool that works wonders as the alternative to Streamlit AgGrid.

PyGWalker + Streamlit Online Demo (opens in a new tab)

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a Tableau-like UI into your own Streamlit app effortlessly.

Check out this amazing video produced by Sven from Coding is Fun (opens in a new tab) demonstrating the detailed steps for empowering your Streamlit app with this powerful Data Visualization Python Library!

Special Thanks to Sven and his great contribution (opens in a new tab) to PyGWalker community!

Additionally, you can also check out these resources:

How to Explore Data and Share Findings with Pygwalker and Streamlit (opens in a new tab)
PyGWalker GitHub Page (opens in a new tab) for more PyGWalker examples.

(opens in a new tab)

Streamlit Bar Chart

A bar chart, or bar graph, is a chart that presents categorical data with rectangular bars proportional to the values they represent. In Streamlit, the st.bar_chart() function is used to create bar charts. It's a simple and effective way to compare different categories of data.

import streamlit as st
import pandas as pd
 
# Create a sample dataframe
data = pd.DataFrame({
  'Fruits': ['Apples', 'Oranges', 'Bananas', 'Grapes'],
  'Quantity': [15, 25, 35, 45]
})
 
# Create a bar chart
st.bar_chart(data)

In the code snippet above, we first import the necessary libraries and create a sample dataframe. We then use the st.bar_chart() function to create a bar chart. The chart will automatically use the dataframe's indices for the x-axis and the values for the y-axis.

While the st.bar_chart() function is easy to use, it offers limited customization options. For more complex scenarios, you might need to use other libraries like Matplotlib or Plotly, which offer more flexibility.

Streamlit Line Chart

A line chart, or line graph, is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. It's a basic type of chart common in many fields. In Streamlit, the st.line_chart() function is used to create line charts.

import streamlit as st
import pandas as pd
 
# Create a sample dataframe
data = pd.DataFrame({
  'Year': [2018, 2019, 2020, 2021],
  'Sales': [350, 480, 550, 680]
})
 
# Create a line chart
st.line_chart(data)

In the code snippet above, we create a sample dataframe and then use the st.line_chart() function to create a line chart. The chart will automatically use the dataframe's indices for the x-axis and the values for the y-axis.

Streamlit's line charts are easy to use but less customizable. For more complex scenarios, you might need to use other libraries like Matplotlib or Plotly.

Plotting in Streamlit

Streamlit supports several different libraries for creating plots, including Matplotlib, Plotly, Vega-Lite, and more. This allows you to create a wide variety of visualizations, from simple line charts to complex interactive plots.

For instance, you can create a histogram using Matplotlib and display it in Streamlit using the st.pyplot() function.

import streamlit as st
import matplotlib.pyplot as plt
 
import numpy as np
 
# Generate some random data
data = np.random.normal(0, 1, size=100)
 
# Create a histogram
plt.hist(data, bins=20)
 
# Display the plot in Streamlit
st.pyplot()

In the code snippet above, we first generate some random data. We then create a histogram using Matplotlib's plt.hist() function. Finally, we display the plot in Streamlit using the st.pyplot() function.

Streamlit also supports interactive plotting libraries like Plotly. This allows you to create interactive plots that users can zoom, pan, and hover to get more detailed information.

Streamlit Pie Chart

Pie charts are circular statistical graphics divided into slices to illustrate numerical proportion. While Streamlit does not have a built-in function for creating pie charts, you can create them using other libraries like Matplotlib and display them in Streamlit using the st.pyplot() function.

import streamlit as st
import matplotlib.pyplot as plt
 
# Data to plot
labels = 'Python', 'Java', 'C++', 'JavaScript'
sizes = [215, 130, 245, 210]
 
# Create a pie chart
plt.pie(sizes, labels=labels, autopct='%1.1f%%')
 
# Display the plot in Streamlit
st.pyplot()

In the code snippet above, we first define the data to plot. We then create a pie chart using Matplotlib's plt.pie() function. Finally, we display the plot in Streamlit using the st.pyplot() function.

Creating pie charts in Streamlit might require a bit more work compared to bar charts or line charts, but it offers more flexibility and customization options.

Streamlit Histogram

A histogram is an accurate representation of the distribution of numerical data. It's an estimate of the probability distribution of a continuous variable. In Streamlit, you can create histograms using the st.pyplot() function in combination with Matplotlib.

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np
 
# Generate some random data
data = np.random.normal(0, 1, size=100)
 
# Create a histogram
plt.hist(data, bins=20)
 
# Display the plot in Streamlit
st.pyplot()

Histograms are a powerful tool for visualizing the distribution of data. They can provide insights into the data's overall spread, skewness, and kurtosis.

Advanced Plotting Techniques in Streamlit

Streamlit's compatibility with various plotting libraries opens up a world of possibilities for creating advanced visualizations. For instance, you can use the Plotly library to create interactive 3D plots, geographic plots, and more.

import streamlit as st
import plotly.express as px
 
# Create a 3D scatter plot
fig = px.scatter_3d(x=[1, 2, 3, 4], y=[4, 3, 2, 1], z=[1, 4, 2, 3])
st.plotly_chart(fig)

In the code snippet above, we first import the necessary libraries. We then create a 3D scatter plot using Plotly's px.scatter_3d() function. Finally, we display the plot in Streamlit using the st.plotly_chart() function.

Customizing Streamlit Visualizations

Streamlit provides several options for customizing your visualizations. For instance, you can change the color palette, add titles and labels, adjust the axis scales, and more.

import streamlit as st
import matplotlib.pyplot as plt
 
# Generate some random data
data = np.random.normal(0, 1, size=100)
 
# Create a histogram with custom color and title
plt.hist(data, bins=20, color='skyblue', edgecolor='black')
plt.title('My Custom Histogram')
 
# Display the plot in Streamlit
st.pyplot()

In the code snippet above, we first generate some random data. We then create a histogram with a custom color and title. Finally, we display the plot in Streamlit using the st.pyplot() function.

Conclusion

Streamlit is a powerful tool for creating interactive data visualizations. With its simple syntax and compatibility with various plotting libraries, you can create a wide variety of visualizations, from simple bar charts and line charts to complex interactive plots. Whether you're a data scientist looking to share your findings or a developer building a data-driven web application, Streamlit has you covered.

Have you heard of this awesome Data Analysis & Data Visualisation tool, that turns your Streamlit App into Tableau?

PyGWalker (opens in a new tab) is a Python Library that helps you easily embed a Tableau-like UI into your own Streamlit app effortlessly.

(opens in a new tab)

Frequently Asked Questions

1. Can I create pie charts in Streamlit?

While Streamlit does not have a built-in function for creating pie charts, you can create them using other libraries like Matplotlib and display them in Streamlit using the st.pyplot() function.

2. How can I customize my Streamlit visualizations?

Streamlit provides several options for customizing your visualizations. You can change the color palette, add titles and labels, adjust the axis scales, and more. The exact customization options depend on the plotting library you're using.

3. Can I create interactive plots in Streamlit?

Yes, Streamlit supports several interactive plotting libraries, including Plotly, Vega-Lite, and more. This allows you to create interactive plots that users can zoom, pan, and hover to get more detailed information.

[Explained] Streamlit Selectbox: Usage, Parameters, and Examples Become an Expert in Data Visualization with ggplot2 in R