Streamlit Beginner Tutorial - Create Your First Data Visualization Webpage in 30 Minutes!

Streamlit Beginner Tutorial – Create Your First Data Visualization Webpage in 30 Minutes!

by

Hello everyone, I am Niu Ge!

Have you ever faced the frustration of writing a data analysis script only to see the results in the terminal? Want to showcase it to others but have to take screenshots? Or perhaps you want to create a simple visualization interface but are discouraged by frontend technologies? Today, I will introduce you to a magical tool – Streamlit!

What is Streamlit?

Streamlit is like giving Python a pair of wings, allowing your data analysis scripts to “take off” and become web applications instantly! It is a super simple Python library specifically designed for creating data visualization web pages.

Imagine if traditional web development is like building a house from scratch, then Streamlit is a “building block” toolkit where you only need to use Python code to assemble blocks and instantly get a beautiful webpage!

Why Learn Streamlit?

  1. Super Easy to Get Started – If you know Python, you can use Streamlit.
  2. High Development Efficiency – Complex visualization effects can be achieved with just a few lines of code.
  3. Great for Data Presentation – Perfectly supports data science libraries like Pandas, Matplotlib, and Plotly.

Let’s Get Started!

1. Environment Setup

First, we need to install Streamlit:

python run copy

pip install streamlit

2. Your First Streamlit Application

Let’s create the simplest example, named hello_streamlit.py:

python run copy

import streamlit as st

st.title('My First Streamlit App!')
st.write('Hello, Streamlit!')

# Add a slider
age = st.slider('What is your age?', 0, 100, 25)
st.write('Your age is:', age)

# Add a button
if st.button('Click Me'):
    st.balloons()

To run this application, simply enter in the terminal:

bash copy

streamlit run hello_streamlit.py

3. A More Complex Data Visualization Example

python run copy

import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px

# Create sample data
np.random.seed(0)
df = pd.DataFrame({
    'Date': pd.date_range('2024-01-01', periods=100),
    'Sales': np.random.randn(100).cumsum()
})

# Page title
st.title('Sales Trend Analysis Dashboard')

# Display raw data
st.subheader('Raw Data')
st.dataframe(df)

# Plot the chart
fig = px.line(df, x='Date', y='Sales', title='Sales Trend Chart')
st.plotly_chart(fig)

# Add interactive controls
date_range = st.date_input(
    'Select Date Range',
    [df['Date'].min(), df['Date'].max()]
)

4. Advanced Features of Streamlit

  1. Layout Control

python run copy

col1, col2 = st.columns(2)
with col1:
    st.write('This is the left column')
with col2:
    st.write('This is the right column')
  1. Cache Computation Results

python run copy

@st.cache_data
def heavy_calculation():
    # Some time-consuming calculations
    return result

Useful Tips

  1. Use st.sidebar to create a sidebar
  2. st.cache_data can cache data to improve execution efficiency
  3. Utilize st.expander to collapse long content

Frequently Asked Questions

Q: Does Streamlit support real-time updates?

A: Absolutely! The page automatically detects code changes and refreshes.

Q: Can it be deployed to a server?

A: Yes! Streamlit Cloud provides free hosting services.

Conclusion

Today we learned about:

  • The basic concepts of Streamlit
  • How to create a simple visualization application
  • Using data presentation and interactive controls
  • Advanced features and deployment methods

Remember: The power of Streamlit lies in its simplicity. You don’t need to understand frontend development to create professional data visualization web pages!

Finally, I wish everyone great progress in learning Python, and see you next time! If you have any questions, feel free to leave comments for discussion!

Leave a Comment