Visualizing Charts with Streamlit

Why is Visualization Important?

Data visualization transforms complex information into understandable and impactful charts. A well-designed visualization highlights trends and anomalies, making analysis and decision-making easier. With Streamlit, you can quickly create visualizations, bringing your data to life in a clear and interactive way.

Visualization Functions in Streamlit

1. st.pyplot() – Charts with Matplotlib

Displays charts created with Matplotlib.

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np

# Data and scatter plot
x = np.linspace(0, 10, 100)
y = np.sin(x)
fig, ax = plt.subplots()
ax.plot(x, y, label="Sine(x)")
ax.set_title("Sine Wave Chart")
ax.legend()

# Displaying in Streamlit
st.pyplot(fig)

2. st.line_chart() – Line Chart

Quickly create line charts using DataFrames or arrays.

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

# Sample data
data = pd.DataFrame({
    "Day": range(1, 11),
    "Temperature": np.random.randint(15, 35, 10)
})

# Line chart
st.line_chart(data.set_index("Day"))

3. st.bar_chart() – Bar Chart

Ideal for displaying comparisons between categories.

import streamlit as st
import pandas as pd

# Sample data
data = pd.DataFrame({
    "Categories": ["A", "B", "C", "D"],
    "Values": [10, 20, 30, 15]
})

# Bar chart
st.bar_chart(data.set_index("Categories"))

4. st.area_chart() – Area Chart

Displays area charts to highlight proportions over time.

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

# Sample data
data = pd.DataFrame(np.cumsum(np.random.randn(20, 3), axis=0),
                    columns=["Sales", "Profit", "Costs"])

# Area chart
st.area_chart(data)

5. st.altair_chart() – Interactive Charts with Altair

Create customized interactive visualizations with Altair.

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

# Sample data
data = pd.DataFrame({
    "x": np.random.rand(50),
    "y": np.random.rand(50),
    "category": np.random.choice(["A", "B", "C"], size=50)
})

# Altair chart
chart = alt.Chart(data).mark_circle(size=60).encode(
    x="x",
    y="y",
    color="category",
    tooltip=["x", "y", "category"]
)

st.altair_chart(chart, use_container_width=True)

6. st.graphviz_chart() – Diagrams with Graphviz

Use Graphviz to create interactive diagrams with nodes and edges.

import streamlit as st

# Graphviz diagram
st.graphviz_chart('''
    digraph {
        Study -> Project
        Project -> Success
        Success -> Recognition
    }
''')

With these tools, you can turn data into compelling visual stories in Streamlit. Experiment with different charts to create dynamic and informative interfaces!

Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.

Article link:http://pybeginners.com/python-streamlit/visualizing-charts-with-streamlit/

License Agreement:Attribution-NonCommercial 4.0 International License