app.py

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

# Custom CSS for background, fonts, and text styling
st.markdown("""
    <style>
    body {
        background-color: #f7f7f7;
    }
    h1 {
        color: #d63384;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }
    h2 {
        color: #1f77b4;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        margin-top: 20px;
    }
    h3 {
        color: #6c757d;
        font-family: 'Roboto', sans-serif;
        margin-top: 15px;
    }
    .custom-subheader {
        color: #2ca02c;
        font-family: 'Roboto', sans-serif;
        margin-bottom: 10px;
    }
    p {
        font-family: 'Georgia', serif;
        line-height: 1.6;
        color: #343a40;
        margin-bottom: 15px;
    }
    .icon-bullet {
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 15px;
    }
    .icon-bullet li {
        margin-bottom: 8px;
    }
    .icon-bullet li::before {
        content: "✔️";
        padding-right: 10px;
    }
    </style>
    """, unsafe_allow_html=True)

# Sidebar for navigation
st.sidebar.title("Navigation")
st.sidebar.markdown("Use the sidebar to navigate through different sections.")

# Title Section
st.title(":red[**1 : INTRODUCTION TO STATISTICS**]")
st.markdown("""
    In this field, we will be dealing with data using the programming language Python. The term **DATA ANALYSIS** itself indicates working with data. We will collect, clean, and analyze the data to gain insights. Let's first understand the term *data*.
""", unsafe_allow_html=True)

# Header Section
st.header("*What does the term data refer to?*")
st.subheader(":blue[DATA]")

st.markdown("""
    Data is a collection of information gathered from observation. There are many sources of information. Below are some examples:
""", unsafe_allow_html=True)

st.markdown("""
<ul class="icon-bullet">
    <li>IMAGE</li>
    <li>TEXT</li>
    <li>VIDEO</li>
    <li>AUDIO</li>
</ul>
""", unsafe_allow_html=True)

# Data Classification Section with a chart
st.header("DATA is classified into 3 types.")
st.subheader("**Structured Data**")
st.markdown("""
    This type of data is well-organized, typically in rows and columns. Examples include:
    <ul class="icon-bullet">
        <li>EXCEL DOCUMENT</li>
        <li>STRUCTURED QUERY LANGUAGE DATABASE</li>
    </ul>
""", unsafe_allow_html=True)

st.image('https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/dSbyOXaQ6N_Kg2TLxgEyt.png', width=400)

# Visualization example for Structured Data
data = pd.DataFrame({
    'Category': ['Excel', 'SQL', 'CSV', 'JSON'],
    'Count': [45, 35, 30, 40]
})
chart = alt.Chart(data).mark_bar().encode(
    x='Category',
    y='Count',
    color='Category'
).properties(
    title='Structured Data Types',
    width=500
)
st.altair_chart(chart)

st.subheader("**Unstructured Data**")
st.markdown("""
    This type of data is not organized in a predefined manner. Examples include:
    <ul class="icon-bullet">
        <li>IMAGE</li>
        <li>VIDEO</li>
        <li>TEXT</li>
        <li>Social Media Feeds</li>
    </ul>
""", unsafe_allow_html=True)

st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/xhaNBRanDaj8esumqo9hl.png", width=400)

st.subheader("**Semi-Structured Data**")
st.markdown("""
    This data combines elements of both structured and unstructured data. Examples include:
    <ul class="icon-bullet">
        <li>COMMA SEPARATED VARIABLE (CSV)</li>
        <li>JSON FILES</li>
        <li>E-MAILS</li>
        <li>HTML</li>
    </ul>
""", unsafe_allow_html=True)

st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/Nupc6BePInRVo9gJwLfWH.png", width=400)

# Introduction to Statistics
st.title("2 : INTRODUCTION TO STATISTICS")
st.markdown("""
    _Statistics is a branch of mathematics focused on collecting, analyzing, interpreting, and structuring data. It is classified into two types:_
""", unsafe_allow_html=True)

# Descriptive Statistics Section with interactive elements
st.subheader("2.1 Descriptive Statistics")
st.markdown("""
    Descriptive Statistics describes the main features of data. It can be performed on sample data as well as population data. Key concepts include:
    <ul class="icon-bullet">
        <li>Measurement of Central Tendency (Mean, Median, Mode)</li>
        <li>Measurement of Dispersion (Range, Variance, Standard Deviation)</li>
        <li>Distribution (e.g., Gaussian, Random, Normal)</li>
    </ul>
""", unsafe_allow_html=True)

# Example of an interactive chart for Central Tendency
values = st.slider('Select a range of values', 0, 100, (25, 75))
mean_value = sum(values) / len(values)
st.write(f"Mean Value: {mean_value}")

# Inferential Statistics Section
st.subheader("2.2 Inferential Statistics")
st.markdown("""
    Inferential Statistics makes predictions about a population based on sample data.
""", unsafe_allow_html=True)