Update app.py

app.py

@@ -1,31 +1,32 @@
 import streamlit as st
-import math
-from functools import reduce
+import altair as alt
+import pandas as pd
 
 # Custom CSS for background, fonts, and text styling
 st.markdown("""
     <style>
     body {
-        background-color: #f5f5f5;
+        background-color: #f7f7f7;
     }
     h1 {
         color: #d63384;
-        font-family: 'Arial', sans-serif;
+        font-family: 'Roboto', sans-serif;
         font-weight: bold;
         text-align: center;
+        margin-bottom: 20px;
     }
     h2 {
         color: #1f77b4;
-        font-family: 'Arial', sans-serif;
+        font-family: 'Roboto', sans-serif;
         font-weight: bold;
     }
     h3 {
         color: #6c757d;
-        font-family: 'Arial', sans-serif;
+        font-family: 'Roboto', sans-serif;
     }
     .custom-subheader {
         color: #2ca02c;
-        font-family: 'Arial', sans-serif;
+        font-family: 'Roboto', sans-serif;
         margin-bottom: 0;
     }
     p {
@@ -35,6 +36,7 @@ st.markdown("""
     }
     .icon-bullet {
         list-style-type: none;
+        padding-left: 0;
     }
     .icon-bullet li::before {
         content: "✔️";
@@ -43,11 +45,15 @@ st.markdown("""
     </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)
+""", unsafe_allow_html=True)
 
 # Header Section
 st.header("*What does the term data refer to?*")
@@ -65,7 +71,7 @@ st.markdown("""
 </ul>
 """, unsafe_allow_html=True)
 
-# Data Classification Section
+# Data Classification Section with a chart
 st.header("DATA is classified into 3 types.")
 st.subheader("**Structured Data**")
 st.markdown("""
@@ -77,6 +83,21 @@ st.markdown("""
 """, 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:
@@ -107,7 +128,7 @@ st.markdown("""
     _Statistics is a branch of mathematics focused on collecting, analyzing, interpreting, and structuring data. It is classified into two types:_
 """)
 
-# Descriptive Statistics Section
+# 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:
@@ -118,8 +139,13 @@ st.markdown("""
     </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.
-""") 
+""")