Intro

You have all your data ready to go. It has been cleansed and transformed to all your needs. Now you need to make it easy to consume by your target audience. In this scenario our users can be just about anyone. We need to make the data easy to access and even easier to navigate.

Challenge accepted!

Tooling

As the title suggests we are going to be using Streamlit to present our data. If you aren’t familiar with Streamlit I suggest you take a tour of their website or GitHub repo to see what they have to offer. I chose Streamlit because it offers the ability to get a small project like this off the ground very quickly. We will also be using Pandas, and this will all be running on Python 3.12.2.

pip install pandas
pip install streamlit

Setup

We need several supporting functions to make this streamlit site work.

First up is a simple function to load data from a file. You may notice there is a special Streamlit decorator on this function, you can find the details behind it here st.cache_data, but we are essentially using it to cache the data to speed up performance for the end user. Our data is stored in CSVs so using pandas read_csv makes this very easy.

# Function to load the CSV file
@st.cache_data
def load_data(file):
    data = pd.read_csv(file)
    return data

Next we have a function that can filter our dataset based on what the user has entered into the search bar we are going to have in our web app.

# Function to filter data based on search query
def filter_data(data, query):
    if query:
        return data[data.apply(lambda row: row.astype(str).str.contains(query, case=False).any(), axis=1)]
    return data

Last but not least we have a function to handle our main page. This function has a little more to it than the others, but it isn’t very complicated.

  • Display the page title by setting st.title
  • Using st.expander we create a help box that is expandable with info on how to use the site
  • Create a file selection drop down box using st.selectbox so our end users can pick which dataset they want to view
  • Load the data file selected
  • Present a search box using st.text_input and filter results if needed
  • Display our data in a dataframe using st.dataframe
  • Add a download button using st.download_button so the user can download the dataset if desired
# Main app content
def show_main():
    st.title("Town Info")

    # Help box
    with st.expander("Help (How to use this site)"):
        st.markdown("""
        **How to use this app:**
        - **Select a dataset**: Choose a dataset from the dropdown menu
        - **Search**: Use the search box to filter data by entering keywords or phrases
        - **Sort**: Click on the column headers to change how the data is sorted
        """)

    # File selection
    selected_file = st.selectbox("Select a dataset to view", list(csv_files.keys()))
    file_path = os.path.join(dir_data, csv_files[selected_file])
    
    # Load the CSV data
    data = load_data(file_path)
    
    # Search functionality
    search_query = st.text_input("Search")
    
    filtered_data = filter_data(data, search_query)
    
    # Display the dataframe with sortable and filterable columns
    st.dataframe(filtered_data, height=1000)
    
    # Allow the user to download the filtered data
    csv = filtered_data.to_csv(index=False)
    st.download_button(
        label="Download data as CSV",
        data=csv,
        file_name='filtered_data.csv',
        mime='text/csv',
    )

Last but not least we run our application.

# Streamlit app
def main():
    st.sidebar.title("Navigation")
    page = st.sidebar.selectbox("Select a page", ["Main", "About"])
    
    if page == "Main":
        show_main()
    elif page == "About":
        show_about()

if __name__ == "__main__":
    main()

End Result

When we run this Streamlit application we get the magnificent site pictured below for our end users. Quick note, the screenshot is in dark mode. We have enabled the following features:

  1. Selectable list of datasets
  2. Filter dataset with search
  3. Sort with interactive headers
  4. Download dataset