Streamlit Example

This time, we’ll build a "Student Performance Dashboard" that allows users to upload student data, filter by grades, visualize the results, and download reports.

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

# App Title
st.title("Student Performance Dashboard")

# Sidebar for Input
st.sidebar.header("Student Data Filters")

# Text Input for a Teacher's Name
teacher_name = st.sidebar.text_input("Enter your name (Teacher):")

# File uploader to upload student data
uploaded_file = st.sidebar.file_uploader("Upload a CSV with student data", type=["csv"])

# Sidebar Slider to filter grades
min_grade = st.sidebar.slider("Minimum Grade Filter", 0, 100, 50)

# Sidebar Dropdown for Grade Level Selection
grade_level = st.sidebar.selectbox("Select Grade Level", options=['All', 'Freshman', 'Sophomore', 'Junior', 'Senior'])

# Button to confirm report generation
generate_report = st.sidebar.button("Generate Performance Report")

# Display simple welcome message using st.text()
st.text(f"Hello {teacher_name}, please upload the student data and apply filters!")

# Markdown for Instructions
st.markdown("""
### Instructions:
1. Upload a CSV file containing student data (Name, Grade, Class, and Performance).
2. Apply the filters to see how the student performance changes.
3. Generate a report by clicking the button in the sidebar.
""")

# If file is uploaded, process the data
if uploaded_file is not None:
    data = pd.read_csv(uploaded_file)

    # Filter data by grade and level
    if grade_level != 'All':
        data = data[data['Grade_Level'] == grade_level]
    filtered_data = data[data['Grade'] >= min_grade]

    # Display filtered data
    st.subheader("Filtered Student Data")
    st.dataframe(filtered_data)

    # Static Table View
    st.subheader("Static Table of Student Data")
    st.table(filtered_data.head())

    # Line Chart - Grade progression over time
    st.subheader("Line Chart of Grades Over Time")
    st.line_chart(filtered_data.set_index('Student_Name')['Grade'])

    # Bar Chart - Distribution of Grades
    st.subheader("Bar Chart of Grade Distribution")
    st.bar_chart(filtered_data['Grade'].value_counts())

    # Area Chart - Grade Trends
    st.subheader("Area Chart of Performance")
    st.area_chart(filtered_data.set_index('Student_Name')['Performance'])

    # Display Summary using st.write()
    st.subheader("Summary Statistics")
    st.write(filtered_data.describe())

    # If button is clicked, display a success message
    if generate_report:
        st.success("Performance report generated successfully!")

    # Code block to show the process
    st.code('''
# Sample Code for processing student data
import pandas as pd
df = pd.read_csv('student_data.csv')
filtered_data = df[df['Grade'] > 50]
print(filtered_data)
    ''')

    # Display an image (dummy school logo) and play an audio file
    st.subheader("School Logo and Anthem")
    st.image("https://placekitten.com/300/200", caption="School Logo")
    st.audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3")

else:
    # If no file is uploaded, show a default message
    st.warning("Please upload a CSV file to get started.")

# Footer text
st.text("Thank you for using the Student Performance Dashboard.")
    

Breakdown of Streamlit Functions Used:

1. st.write() – Displays summaries and statistics of the student data.
2. st.title() – Displays the app’s title.
3. st.header() – Adds headers to different sections.
4. st.subheader() – Adds smaller section headers (used for charts and filtered data).
5. st.text() – Simple text to welcome the teacher and provide a footer.
6. st.markdown() – Displays Markdown-formatted text to provide instructions.
7. st.code() – Displays a block of formatted code as an example for the user.
8. st.dataframe() – Displays an interactive table for the filtered student data.
9. st.table() – Displays a static table with student data.
10. st.line_chart() – Line chart showing student grades over time.
11. st.bar_chart() – Bar chart for grade distribution.
12. st.area_chart() – Area chart to show performance trends.
13. st.selectbox() – Dropdown for selecting grade levels.
14. st.slider() – Slider widget to filter student grades.
15. st.text_input() – Text input box to capture the teacher’s name.
16. st.file_uploader() – File uploader for uploading student data in CSV format.
17. st.button() – Button to trigger report generation.
18. st.sidebar() – Adds a sidebar for filtering and user inputs.
19. st.image() – Displays a school logo (or any image).
20. st.audio() – Plays an audio file (school anthem or any audio).

How It Works:

1. Data Upload and Processing: Users can upload a CSV with student performance data (e.g., Name, Grade, Class, Performance).
2. Filtering: Filters are applied based on grade and grade level using a slider and dropdown.
3. Visualizations: The app displays various visualizations like line charts, bar charts, and area charts for student grades and performance.
4. Report Generation: Users can click a button to simulate report generation and display a success message.
5. Media Elements: A logo image and school anthem audio are displayed and played.

This example demonstrates how to combine interactive filters, data visualizations, and media elements in a more practical dashboard-like scenario.