Update app.py

app.py

@@ -5,49 +5,69 @@ import pandas as pd
 # Custom CSS for background, fonts, and text styling
 st.markdown("""
     <style>
+    /* Set a soft background color */
     body {
-        background-color: #f7f7f7;
+        background-color: #eef2f7;
     }
+    /* Style for main title */
     h1 {
         color: #d63384;
         font-family: 'Roboto', sans-serif;
-        font-weight: bold;
+        font-weight: 700;
         text-align: center;
-        margin-bottom: 20px;
+        margin-bottom: 25px;
     }
+    /* Style for headers */
     h2 {
         color: #1f77b4;
         font-family: 'Roboto', sans-serif;
-        font-weight: bold;
-        margin-top: 20px;
+        font-weight: 600;
+        margin-top: 30px;
     }
     h3 {
         color: #6c757d;
         font-family: 'Roboto', sans-serif;
-        margin-top: 15px;
+        font-weight: 500;
+        margin-top: 20px;
     }
+    /* Style for subheaders */
     .custom-subheader {
         color: #2ca02c;
         font-family: 'Roboto', sans-serif;
-        margin-bottom: 10px;
+        font-weight: 600;
+        margin-bottom: 15px;
     }
+    /* Paragraph styling */
     p {
         font-family: 'Georgia', serif;
-        line-height: 1.6;
-        color: #343a40;
-        margin-bottom: 15px;
+        line-height: 1.8;
+        color: #495057;
+        margin-bottom: 20px;
     }
+    /* List styling with checkmark bullets */
     .icon-bullet {
         list-style-type: none;
-        padding-left: 0;
-        margin-bottom: 15px;
+        padding-left: 20px;
     }
     .icon-bullet li {
-        margin-bottom: 8px;
+        font-family: 'Georgia', serif;
+        font-size: 1.1em;
+        margin-bottom: 10px;
+        color: #495057;
     }
     .icon-bullet li::before {
         content: "✔️";
         padding-right: 10px;
+        color: #17a2b8;
+    }
+    /* Sidebar styling */
+    .sidebar .sidebar-content {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 15px;
+    }
+    .sidebar h2 {
+        color: #495057;
     }
     </style>
     """, unsafe_allow_html=True)
@@ -57,36 +77,36 @@ 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.title("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*.
+    In this section, we'll explore the basics of data analysis using Python. **Data Analysis** involves collecting, cleaning, and analyzing data to extract valuable insights. Let's start by understanding what we mean by *data*.
 """, unsafe_allow_html=True)
 
 # Header Section
-st.header("*What does the term data refer to?*")
-st.subheader(":blue[DATA]")
+st.header("What does the term 'data' refer to?")
+st.subheader("DATA")
 
 st.markdown("""
-    Data is a collection of information gathered from observation. There are many sources of information. Below are some examples:
+    Data refers to a collection of information gathered from various sources. Here are a few examples:
 """, unsafe_allow_html=True)
 
 st.markdown("""
 <ul class="icon-bullet">
-    <li>IMAGE</li>
-    <li>TEXT</li>
-    <li>VIDEO</li>
-    <li>AUDIO</li>
+    <li>Images</li>
+    <li>Text</li>
+    <li>Videos</li>
+    <li>Audio recordings</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.header("Data Classification")
+st.subheader("Structured Data")
 st.markdown("""
-    This type of data is well-organized, typically in rows and columns. Examples include:
+    Structured data is organized and formatted, making it easy to search, analyze, and store in databases. Common examples include:
     <ul class="icon-bullet">
-        <li>EXCEL DOCUMENT</li>
-        <li>STRUCTURED QUERY LANGUAGE DATABASE</li>
+        <li>Excel Documents</li>
+        <li>SQL Databases</li>
     </ul>
 """, unsafe_allow_html=True)
 
@@ -98,36 +118,42 @@ data = pd.DataFrame({
     'Count': [45, 35, 30, 40]
 })
 chart = alt.Chart(data).mark_bar().encode(
-    x='Category',
-    y='Count',
-    color='Category'
+    x=alt.X('Category', title='Data Format'),
+    y=alt.Y('Count', title='Count'),
+    color=alt.Color('Category', legend=None)
 ).properties(
     title='Structured Data Types',
-    width=500
+    width=500,
+    height=300
+).configure_title(
+    fontSize=18,
+    anchor='middle',
+    font='Roboto',
+    color='#343a40'
 )
 st.altair_chart(chart)
 
-st.subheader("**Unstructured Data**")
+st.subheader("Unstructured Data")
 st.markdown("""
-    This type of data is not organized in a predefined manner. Examples include:
+    Unstructured data doesn't follow a specific format and is often difficult to organize. Examples include:
     <ul class="icon-bullet">
-        <li>IMAGE</li>
-        <li>VIDEO</li>
-        <li>TEXT</li>
+        <li>Images</li>
+        <li>Videos</li>
+        <li>Text documents</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.subheader("Semi-Structured Data")
 st.markdown("""
-    This data combines elements of both structured and unstructured data. Examples include:
+    Semi-structured data contains 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>
+        <li>CSV Files</li>
+        <li>JSON Files</li>
+        <li>Emails</li>
+        <li>HTML Documents</li>
     </ul>
 """, unsafe_allow_html=True)
 
@@ -136,17 +162,17 @@ st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c
 # 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:_
+    _Statistics is a branch of mathematics focused on collecting, analyzing, interpreting, and presenting data. It can be divided into two main categories:_
 """, 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:
+    Descriptive statistics summarize and describe the main features of a dataset. 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>
+        <li>Measures of Central Tendency (Mean, Median, Mode)</li>
+        <li>Measures of Dispersion (Range, Variance, Standard Deviation)</li>
+        <li>Data Distributions (e.g., Gaussian, Random, Normal)</li>
     </ul>
 """, unsafe_allow_html=True)
 
@@ -158,5 +184,5 @@ 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.
+    Inferential statistics involve making predictions or inferences about a population based on a sample. These methods are used to test hypotheses and estimate population parameters.
 """, unsafe_allow_html=True)