Update pages/RoadMap.py

pages/RoadMap.py

@@ -1,140 +1,246 @@
 import streamlit as st
 
-# Custom CSS to change the background color and add 3D arrows
+# Custom CSS to style the page with 3D features
 st.markdown("""
     <style>
     .main {
-        background-color: #f0f2f6;
+        background-color: #ffffff;
     }
-    .separator {
-        border-top: 3px solid #bbb;
+    .center-image {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        width: 60%;
+        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
+        border-radius: 15px;
         margin-top: 20px;
-        margin-bottom: 20px;
     }
     .content {
         color: #333333;
+        padding: 20px;
+        font-size: 18px;
+        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
+        border-radius: 15px;
+        background: #f8f9fa;
+        margin-left: 20px;
+        margin-top: 20px;
     }
-    .arrow {
-        font-size: 24px;
-        text-align: center;
-        margin-top: -10px;
-        margin-bottom: -10px;
+    .button {
+        font-size: 20px;
+        margin-bottom: 20px;
+        padding: 15px;
+        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+        border-radius: 10px;
+        background: #007bff;
+        color: white;
+        transition: transform 0.2s, background 0.2s;
+        border: none;
+        width: 100%;
+        text-align: left;
     }
-    .center-image {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        width: 50%;
+    .button:hover {
+        box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
+        transform: scale(1.05);
+        cursor: pointer;
+        background: #0056b3;
+    }
+    .button:focus {
+        outline: none;
+        box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3);
+        transform: scale(1.05);
+        background: linear-gradient(to bottom, #003580, #002060);
     }
     </style>
     """, unsafe_allow_html=True)
 
-# Initialize session state
-if 'open_expander' not in st.session_state:
-    st.session_state.open_expander = None
-
 # Page title
 st.title("Data Analysis Roadmap")
 
-# Centered Image
-st.image("images/data_analysis.png", use_column_width='always', output_format='PNG')
-
-# Introduction
-st.header("Introduction")
-st.markdown("<div class='content'>This roadmap is designed for individuals with a basic understanding of Data Analysis. "
-         "It outlines the key topics and tools essential for advancing your skills in data analysis.</div>", unsafe_allow_html=True)
-
-# Helper function to add images with 3D arrows
-def add_skill_section(title, image_path, description, key):
-    if st.session_state.open_expander == key:
-        with st.expander(title, expanded=True):
-            st.image(image_path, width=100)
-            st.markdown(f"<div class='content'>{description}</div>", unsafe_allow_html=True)
-            st.session_state.open_expander = key
-    else:
-        with st.expander(title):
-            if st.button("Expand", key=key):
-                st.session_state.open_expander = key
-                st.experimental_rerun()
-
-    #st.markdown('<div class="arrow">⬇️</div>', unsafe_allow_html=True)
-
-# Excel Section
-add_skill_section("Excel", "images/excel_logo.png", """
-Excel is a powerful tool for data manipulation and visualization. It's widely used due to its accessibility and robust features.
-
-**Skills:**
-- **Data Cleaning**: Removing errors and inconsistencies to ensure data quality.
-  - *Example*: Cleaning a sales dataset to remove duplicates.
-- **Data Visualization**: Creating charts and graphs to represent data visually.
-  - *Example*: Visualizing sales trends over time with line charts.
-- **Pivot Tables**: Summarizing data for easy analysis.
-  - *Example*: Summarizing sales by region and product.
-- **Formulas and Functions**: Automating calculations and data manipulation.
-  - *Example*: Using VLOOKUP to combine data from multiple sheets.
-- **Data Analysis Toolpak**: Advanced statistical analysis.
-  - *Example*: Running regression analysis on marketing data.
-""", key="excel")
-
-# SQL Section
-add_skill_section("SQL", "images/sql_logo.png", """
-SQL is essential for querying and managing databases. It's used to extract, manipulate, and analyze data stored in relational databases.
-
-**Skills:**
-- **Basic Queries (SELECT, INSERT, UPDATE, DELETE)**: Retrieving and modifying data.
-  - *Example*: Fetching customer information from a database.
-- **Joins (INNER, LEFT, RIGHT, FULL)**: Combining data from multiple tables.
-  - *Example*: Joining customer and order tables to get complete order details.
-- **Aggregations (GROUP BY, HAVING)**: Summarizing data.
-  - *Example*: Calculating total sales per region.
-- **Subqueries and CTEs**: Writing complex queries.
-  - *Example*: Finding customers with orders above a certain amount.
-- **Indexing and Optimization**: Improving query performance.
-  - *Example*: Adding an index to speed up search queries.
-""", key="sql")
-
-# Python Section
-add_skill_section("Data Analysis Python", "images/python_logo.png", """
-Python is a versatile language used for data analysis, offering powerful libraries for various data-related tasks.
-
-**Skills:**
-- **Libraries: pandas, numpy, matplotlib, seaborn**: Essential libraries for data manipulation and visualization.
-  - *Example*: Using pandas for data cleaning, matplotlib for plotting sales trends.
-- **Data Cleaning and Preparation**: Preparing data for analysis.
-  - *Example*: Handling missing values in a dataset.
-- **Data Visualization**: Creating detailed and interactive plots.
-  - *Example*: Creating scatter plots to visualize relationships between variables.
-- **Statistical Analysis**: Performing statistical tests and analyses.
-  - *Example*: Running a t-test to compare means of two groups.
-- **Automating Data Workflows**: Automating repetitive tasks.
-  - *Example*: Writing a script to fetch and process data daily.
-""", key="python")
-
-# Data Visualization Tools Section
-
-add_skill_section("Power BI", "images/powerbi_logo.png", """
-Power BI is a business analytics tool that provides interactive visualizations and business intelligence capabilities.
-
-**Skills:**
-- **Report Creation**: Designing detailed reports.
-  - *Example*: Creating financial reports for stakeholders.
-- **DAX Functions**: Using Data Analysis Expressions for complex calculations.
-  - *Example*: Calculating year-over-year growth.
-- **Data Modeling**: Structuring data for efficient analysis.
-  - *Example*: Creating a data model to analyze customer behavior.
-""", key="powerbi")
-
-# Statistics Section
-add_skill_section("Statistics", "images/statistics_logo.png", """
-Statistics form the backbone of data analysis, enabling data-driven decision-making.
-
-**Skills:**
-- **Descriptive Statistics (Mean, Median, Mode)**: Summarizing data.
-  - *Example*: Calculating average customer age.
-- **Inferential Statistics (Hypothesis Testing, Confidence Intervals)**: Making predictions and generalizations.
-  - *Example*: Testing if a new marketing strategy increases sales.
-- **Regression Analysis**: Understanding relationships between variables.
-  - *Example*: Analyzing the impact of price changes on sales volume.
-- **Probability Theory**: Assessing risk and uncertainty.
-  - *Example*: Calculating the likelihood of customer churn.
-""", key="statistics")
+# Center image at the top
+st.image("images/data_analysis.png", use_column_width='always')
+
+# Two-column layout
+col1, col2 = st.columns([1, 2])
+
+# Left column with the buttons
+with col1:
+    st.header("Topics")
+    
+    selection = None
+    if st.button("Basic Python", key="basic_python"):
+        selection = "Basic Python"
+    if st.button("Intermediate Python", key="intermediate_python"):
+        selection = "Intermediate Python"
+    if st.button("Descriptive Statistics", key="descriptive_statistics"):
+        selection = "Descriptive Statistics"
+    if st.button("NumPy", key="numpy"):
+        selection = "NumPy"
+    if st.button("Pandas", key="pandas"):
+        selection = "Pandas"
+    if st.button("Matplotlib", key="matplotlib"):
+        selection = "Matplotlib"
+    if st.button("Seaborn", key="seaborn"):
+        selection = "Seaborn"
+    if st.button("Inferential Statistics", key="inferential_statistics"):
+        selection = "Inferential Statistics"
+
+# Right column with the topic description
+with col2:
+    if selection:
+        if selection == "Basic Python":
+            st.image("images/python_logo.png", width=50)
+            st.markdown("""
+            <div class='content'>
+            <b>Basic Python:</b>
+            <p>Basic Python covers the fundamental aspects of the Python programming language.</p>
+            
+            <b>Subtopics:</b>
+            <ul>
+            <li>Syntax: Understanding the basic syntax and structure of Python code.</li>
+            <li>Data Types: Working with strings, lists, dictionaries, and tuples.</li>
+            <li>Control Flow: Using loops, conditionals, and functions.</li>
+            <li>File Handling: Reading from and writing to files.</li>
+            </ul>
+
+            <b>Example:</b>
+            <p>Writing simple programs to automate repetitive tasks, such as renaming files in bulk.</p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+        elif selection == "Intermediate Python":
+            st.image("images/python_logo.png", width=50)
+            st.markdown("""
+            <div class='content'>
+            <b>Intermediate Python:</b>
+            <p>Intermediate Python includes more advanced features of Python programming.</p>
+
+            <b>Subtopics:</b>
+            <ul>
+            <li>Modules and Packages: Importing and organizing code into modules.</li>
+            <li>List Comprehensions: Creating lists in a more readable way.</li>
+            <li>Error Handling: Using try, except blocks to handle errors.</li>
+            <li>Classes and Objects: Understanding object-oriented programming concepts.</li>
+            </ul>
+
+            <b>Example:</b>
+            <p>Building reusable code modules and handling exceptions in data processing scripts.</p>
+            </div>
+            """, unsafe_allow_html=True)
+    
+        elif selection == "Descriptive Statistics":
+            st.image("images/statistics_logo.png", width=50)
+            st.markdown("""
+            <div class='content'>
+            <b>Descriptive Statistics:</b>
+            <p>Descriptive statistics summarize and describe the main features of a dataset.</p>
+
+            <b>Subtopics:</b>
+            <ul>
+            <li>Central Tendency: Mean, median, mode.</li>
+            <li>Dispersion: Variance, standard deviation, range.</li>
+            <li>Distribution: Quartiles, percentiles, histograms.</li>
+            </ul>
+
+            <b>Example:</b>
+            <p>Summarizing sales data to understand the average sales per month and the variability in sales.</p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+        elif selection == "NumPy":
+            st.image("images/numpy_logo.png", width=50)
+            st.markdown("""
+            <div class='content'>
+            <b>NumPy:</b>
+            <p>NumPy is a fundamental package for numerical computing in Python.</p>
+
+            <b>Subtopics:</b>
+            <ul>
+            <li>Arrays: Creating and manipulating arrays.</li>
+            <li>Mathematical Operations: Performing element-wise and matrix operations.</li>
+            <li>Statistical Functions: Using built-in functions for analysis.</li>
+            <li>Data Transformation: Reshaping and slicing arrays.</li>
+            </ul>
+
+            <b>Example:</b>
+            <p>Performing fast and efficient calculations on large datasets, such as computing the sum of all elements in an array.</p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+        elif selection == "Pandas":
+            st.image("images/pandas_logo.png", width=100)
+            st.markdown("""
+            <div class='content'>
+            <b>Pandas:</b>
+            <p>Pandas is a powerful library for data manipulation and analysis in Python.</p>
+
+            <b>Subtopics:</b>
+            <ul>
+            <li>DataFrames: Creating and manipulating DataFrames.</li>
+            <li>Data Cleaning: Handling missing values and duplicates.</li>
+            <li>Data Transformation: Merging, joining, and concatenating DataFrames.</li>
+            <li>Data Analysis: Grouping and aggregating data.</li>
+            </ul>
+
+            <b>Example:</b>
+            <p>Cleaning and analyzing sales data from different regions to find total sales per product category.</p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+        elif selection == "Matplotlib":
+            st.image("images/matplotlib_logo.png", width=100)
+            st.markdown("""
+            <div class='content'>
+            <b>Matplotlib:</b>
+            <p>Matplotlib is a plotting library for creating static, interactive, and animated visualizations in Python.</p>
+
+            <b>Subtopics:</b>
+            <ul>
+            <li>Basic Plots: Creating line, bar, and scatter plots.</li>
+            <li>Customization: Customizing plots with titles, labels, and legends.</li>
+            <li>Subplots: Creating multiple plots in a single figure.</li>
+            </ul>
+
+            <b>Example:</b>
+            <p>Visualizing sales trends over time with a line chart and customizing it to include titles and labels.</p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+        elif selection == "Seaborn":
+            st.image("images/seaborn_logo.png", width=100)
+            st.markdown("""
+            <div class='content'>
+            <b>Seaborn:</b>
+            <p>Seaborn is a data visualization library based on Matplotlib that provides a high-level interface for drawing attractive statistical graphics.</p>
+
+            <b>Subtopics:</b>
+            <ul>
+            <li>Statistical Plots: Creating plots like histograms, box plots, and violin plots.</li>
+            <li>Customization: Advanced customization of plots.</li>
+            <li>Integration: Seamless integration with pandas DataFrames.</li>
+            </ul>
+
+            <b>Example:</b>
+            <p>Creating a box plot to visualize the distribution of exam scores across different classes.</p>
+            </div>
+            """, unsafe_allow_html=True)
+            
+        elif selection == "Inferential Statistics":
+            st.image("images/statistics_logo.png", width=50)
+            st.markdown("""
+            <div class='content'>
+            <b>Inferential Statistics:</b>
+            <p>Inferential statistics allow us to make predictions or inferences about a population based on a sample of data.</p>
+
+            <b>Subtopics:</b>
+            <ul>
+            <li>Hypothesis Testing: Determining the validity of assumptions.</li>
+            <li>Confidence Intervals: Estimating population parameters.</li>
+            <li>Regression Analysis: Modeling relationships between variables.</li>
+            <li>ANOVA and Chi-Square Tests: Comparing group means and categorical variables.</li>
+            </ul>
+
+            <b>Example:</b>
+            <p>Using regression analysis to predict future sales based on past data trends and conducting hypothesis tests to determine if a new marketing strategy significantly impacts sales.</p>
+            </div>
+            """, unsafe_allow_html=True)
+