Streamlit Part 3: Mastering Data Elements for Interactive Dashboards

In this installment of our Streamlit tutorial series, we dive into the core data elements that make Streamlit a powerful tool for building interactive data dashboards. We'll explore how to display and manipulate data using st.dataframe, st.table, st.json, and other key components. This guide will walk you through practical examples to help you seamlessly integrate these elements into your own Streamlit applications.

Code can be found here: GitHub - jamesbmour/blog_tutorials:

Video version of blog can be found here: YouTube Playlist

Setting Up the Title

Every good app starts with a clear and descriptive title. In Streamlit, we use st.title() to set the main heading of our application. This not only helps in structuring the app but also provides a context for users.

import streamlit as st

st.title("Streamlit Part 3: Data Elements")

Displaying DataFrames with st.dataframe

The st.dataframe element allows you to display pandas DataFrames interactively. Users can sort, scroll, and explore the data within the app, making it an excellent tool for data exploration.

Let's create a simple DataFrame and display it using st.dataframe.

import pandas as pd

df = pd.DataFrame({
    "Column 1": [1, 2, 3, 4],
    "Column 2": [10, 20, 30, 40],
    "Column 3": [100, 200, 300, 400]
})

st.header("st.dataframe")
st.write("Dataframe using st.dataframe()")
st.dataframe(df, width=500, height=200)

In this example, the DataFrame is displayed with a specified width and height, allowing users to interact with the data directly within the app.

Presenting Data with st.table

While st.dataframe is interactive, st.table offers a static view of your data. This element is perfect for showing a clean, non-interactive snapshot of your DataFrame.

st.header("st.table")
st.write("Table using st.table()")
st.table(df)

Here, the DataFrame is displayed as a static table. This is particularly useful when you want to present data without the need for interaction.

Visualizing JSON Data with st.json

Streamlit’s st.json is a handy tool for displaying JSON data in a formatted and readable manner. Whether you’re working with APIs or need to show raw JSON data, this element will make your life easier.

st.header("st.json")
st.write("JSON using st.json()")
st.json({
    "Column 1": [1, 2, 3, 4],
    "Column 2": [10, 20, 30, 40],
    "Column 3": [100, 200, 300, 400]
}, expanded=True)

In this example, the JSON object is displayed with an option to expand or collapse sections, giving users a clear view of the data structure.

Configuring Columns (Conceptual Example)

While Streamlit doesn’t directly support st.column_config, this placeholder introduces the concept of customizing column layouts. Normally, you’d use st.columns() for layout adjustments, but this serves as a conceptual demonstration.

st.header("st.column_config")
st.write("Column Configuration using st.column_config()")
st.write("This is a wide column")
st.write("This is a narrow column")
st.column_config = {"wideMode": True}  # Placeholder example

This section is more about thinking ahead to how Streamlit might evolve in handling column configurations.

In-Depth Data Analysis with Pandas Profiling

pandas_profiling is an external tool that can be integrated with Streamlit to create comprehensive reports of your DataFrame. These reports include statistics, visualizations, and summaries that are automatically generated.

from pandas_profiling import ProfileReport

st.header("st.pandas_profiling")
st.write("Pandas Profiling using st.pandas_profiling()")
profile = ProfileReport(df, title="Pandas Profiling Report")
st.write(profile)

Displaying the profile report in Streamlit might require using st.components.v1 or exporting it as HTML, depending on your needs.

Editing Data with st.data_editor

Streamlit's st.data_editor is an interactive element that allows users to edit DataFrame data directly from the app interface. This feature is particularly useful for scenarios where end-users need to adjust data values on the fly.

st.header("st.data_editor")
st.write("Data Editor using st.data_editor()")
st.data_editor(df)

This element turns your DataFrame into an editable grid, making it a powerful tool for dynamic data manipulation.

Displaying Metrics with st.metric

Finally, st.metric is designed for displaying single numbers, such as Key Performance Indicators (KPIs) or summary statistics. You can also compare metrics using delta values.

st.header("st.metric")
st.write("Metric using st.metric()")
st.metric("Metric 1", 100)
st.metric("Metric 2", 200)

In this example, st.metric displays the current value of a metric, making it easy to convey important information at a glance.

Conclusion

In this post, we covered a variety of data elements in Streamlit that you can use to build interactive and user-friendly dashboards. By mastering these components, you can create rich, data-driven applications that cater to a wide range of use cases, from data exploration to real-time monitoring. Experiment with these elements in your own projects to see how they can enhance your Streamlit applications.

Stay tuned for the next part of this series, where we’ll dive into more advanced features and customizations in Streamlit!

If you'd like to support my writing or treat me to a beer: https://buymeacoffee.com/bmours