Rename pages/Child_mortality_rate_vs_Population.py to pages/Child Mortality Rate vs Population.py

pages/{Child_mortality_rate_vs_Population.py → Child Mortality Rate vs Population.py}

@@ -2,12 +2,14 @@ import streamlit as st
 import pandas as pd
 import altair as alt
 
+# Load data
 child_mortality_path = "child_mortality_0_5_year_olds_dying_per_1000_born.csv"
 population_path = "pop.csv"
 
 child_mortality = pd.read_csv(child_mortality_path)
 population = pd.read_csv(population_path)
 
+# Data Cleaning
 def convert_population(value):
     if isinstance(value, str):
         if 'B' in value:
@@ -22,13 +24,22 @@ def convert_population(value):
 
 population.iloc[:, 1:] = population.iloc[:, 1:].applymap(convert_population)
 
+# Title and Description
 st.title("Child Mortality Rate vs Population")
 
+st.write("""
+    This visualization explores the relationship between child mortality rates (per 1,000 live births) and population size for a selected country over time. 
+    By displaying both metrics side-by-side on a dual-y-axis chart, the visual aims to provide insights into how population trends and child mortality rates have evolved across decades.
+    The visualization is interactive, allowing users to select a country from the dropdown menu. This enables tailored exploration of trends specific to different countries.
+    Hovering over the chart provides tooltips with detailed information for each data point, including the year, population size, and child mortality rate.
+""")
+
 st.subheader("Select a Country")
 countries = sorted(child_mortality['country'].unique())
 selected_country = st.selectbox("Country", countries, index=0)
 
 if selected_country:
+   
     mortality_country = child_mortality[child_mortality['country'] == selected_country].melt(
         id_vars='country', var_name='year', value_name='child_mortality'
     )
@@ -39,39 +50,32 @@ if selected_country:
     merged_country_data = pd.merge(mortality_country, population_country, on=['country', 'year'], how='inner')
     merged_country_data['year'] = merged_country_data['year'].astype(int)
     merged_country_data = merged_country_data[merged_country_data['year'] % 20 == 0]
-    merged_country_data['child_mortality_rate'] = (
-        merged_country_data['child_mortality'] * merged_country_data['population'] / 1_000
-    )
-
-    st.subheader("About the Visualization")
-    st.write("""
-        This visualization explores the trends in child mortality and population over time for a selected country. 
-        The data combines population estimates and child mortality rates (deaths per 1,000 live births) 
-        into a unified scale by calculating the total child mortality as a proportion of the population. 
 
-        **Scaling Explanation**:
-        - The child mortality rate is computed using the formula: 
-          \[
-          \\text{Child Mortality Rate} = \\frac{\\text{Child Mortality (per 1,000 live births)} \\times \\text{Population}}{1,000}
-          \]
-        - Both metrics are plotted on the same y-axis to enable direct comparison, providing a holistic view of population and child mortality trends.
-        - Data is shown in 20-year intervals for better clarity and simplicity.
-    """)
-
-    chart = alt.Chart(merged_country_data).transform_fold(
-        ['child_mortality_rate', 'population'],
-        as_=['Metric', 'Value']
-    ).mark_line(point=True).encode(
-        x=alt.X('year:O', title='Year (Every 20 Years)', axis=alt.Axis(labelAngle=0)),
-        y=alt.Y('Value:Q', title='Value (Scaled)', scale=alt.Scale(type='linear')),
-        color=alt.Color('Metric:N', title='Metrics', legend=alt.Legend(orient='top')),
-        tooltip=['year', 'Metric:N', 'Value:Q']
+    # Dual-Y Axis Chart
+    dual_axis_chart = alt.layer(
+        # First Layer: Child Mortality
+        alt.Chart(merged_country_data).mark_line(point=True).encode(
+            x=alt.X('year:O', title='Year (Every 20 Years)', axis=alt.Axis(labelAngle=0)),
+            y=alt.Y('child_mortality:Q', title='Child Mortality Rate (per 1,000 live births)', axis=alt.Axis(titleColor='lightblue')),
+            tooltip=['year', 'child_mortality']
+        ).properties(
+            width=800,
+            height=400,
+        ),
+        # Second Layer: Population
+        alt.Chart(merged_country_data).mark_line(color='orange', point=True).encode(
+            x=alt.X('year:O'),
+            y=alt.Y('population:Q', title='Population (in millions)', axis=alt.Axis(titleColor='orange')),
+            tooltip=['year', 'population']
+        )
+    ).resolve_scale(
+        y='independent'
     ).properties(
-        width=800,
-        height=400,
-        title=f"Child Mortality Rate and Population Trends in {selected_country} (Every 20 Years)"
+        title=f" Child Mortality and Population Trends in {selected_country}"
     )
 
-    st.altair_chart(chart, use_container_width=True)
-else:
-    st.warning("Please select a country to view the trends.")
+    st.altair_chart(dual_axis_chart, use_container_width=True)
+
+st.write("""
+Initially, I planned to calculate the child mortality rate per population as a combined metric to represent both trends in one graph. However, this approach proved misleading because large populations could distort the results, masking the distinct trends of each metric. As a solution, I switched to a dual-axis chart, separating child mortality (per 1,000 live births) and population size (in millions) into independent axes. This made the comparison clearer, improved interpretability, and allowed for better interactivity and analysis of the two trends over time.
+""")