Initial commit

app.py

@@ -0,0 +1,332 @@
+import dash
+import dash_mantine_components as dmc
+import plotly.express as px
+from dash import Input, Output, callback, dcc, html
+from dash_iconify import DashIconify
+
+
+app = dash.Dash(__name__)
+server = app.server
+
+df = px.data.gapminder()
+
+
+def create_scatter_plot(selected_year, selected_continent=None):
+    filtered_df = df[df["year"] == selected_year]
+
+    if selected_continent and selected_continent != "All":
+        filtered_df = filtered_df[filtered_df["continent"] == selected_continent]
+
+    fig = px.scatter(
+        filtered_df,
+        x="gdpPercap",
+        y="lifeExp",
+        size="pop",
+        color="continent",
+        hover_name="country",
+        log_x=True,
+        size_max=60,
+        title=f"Life Expectancy vs GDP per Capita ({selected_year})",
+    )
+
+    fig.update_layout(
+        template="plotly_dark",
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+    )
+
+    return fig
+
+
+def create_line_chart(selected_country):
+    country_data = df[df["country"] == selected_country]
+    fig = px.line(
+        country_data,
+        x="year",
+        y="lifeExp",
+        title=f"{selected_country} - Life Expectancy",
+    )
+    fig.update_layout(
+        template="plotly_dark",
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+    )
+    return fig
+
+
+def create_bar_chart(selected_year):
+    year_data = df[df["year"] == selected_year]
+    continent_stats = year_data.groupby("continent")["lifeExp"].mean().reset_index()
+    fig = px.bar(
+        continent_stats,
+        x="continent",
+        y="lifeExp",
+        color="continent",
+        title=f"Average Life Expectancy by Continent ({selected_year})",
+    )
+    fig.update_layout(
+        template="plotly_dark",
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+        showlegend=False,
+    )
+    return fig
+
+
+def create_datacard(title, value, icon, color):
+    return dmc.Card(
+        [
+            dmc.Group(
+                [
+                    DashIconify(icon=icon, width=30, color=color),
+                    html.Div(
+                        [
+                            dmc.Text(value, size="xl", fw=700, c="white"),
+                            dmc.Text(title, size="sm", c="dimmed"),
+                        ]
+                    ),
+                ],
+                align="center",
+                gap="md",
+            )
+        ],
+        p="md",
+        className="datacard",
+    )
+
+
+app.layout = dmc.MantineProvider(
+    [
+        html.Link(
+            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap",
+            rel="stylesheet",
+        ),
+        dmc.Group(
+            [
+                DashIconify(icon="twemoji:globe-with-meridians", width=45),
+                dmc.Text(
+                    "Gapminder World Data Explorer", ml=10, size="xl", fw=900, c="white"
+                ),
+            ],
+            align="center",
+            className="header",
+            mb="md",
+        ),
+        dmc.Grid(
+            [
+                dmc.GridCol(
+                    [
+                        dmc.Stack(
+                            [
+                                dmc.Card(
+                                    [
+                                        dmc.Text("Controls", size="lg", mb="md"),
+                                        dmc.Stack(
+                                            [
+                                                html.Div(
+                                                    [
+                                                        dmc.Text(
+                                                            "Year:", size="sm", mb=5
+                                                        ),
+                                                        dmc.Slider(
+                                                            id="year-slider",
+                                                            min=1952,
+                                                            max=2007,
+                                                            step=5,
+                                                            value=2007,
+                                                            marks=[
+                                                                {
+                                                                    "value": year,
+                                                                    "label": str(year),
+                                                                }
+                                                                for year in [
+                                                                    1952,
+                                                                    1967,
+                                                                    1982,
+                                                                    1997,
+                                                                    2007,
+                                                                ]
+                                                            ],
+                                                        ),
+                                                    ]
+                                                ),
+                                                html.Div(
+                                                    [
+                                                        dmc.Text(
+                                                            "Continent Filter:",
+                                                            size="sm",
+                                                            mb=5,
+                                                        ),
+                                                        dmc.Select(
+                                                            id="continent-dropdown",
+                                                            data=[
+                                                                {
+                                                                    "value": "All",
+                                                                    "label": "All Continents",
+                                                                }
+                                                            ]
+                                                            + [
+                                                                {
+                                                                    "value": cont,
+                                                                    "label": cont,
+                                                                }
+                                                                for cont in sorted(
+                                                                    df[
+                                                                        "continent"
+                                                                    ].unique()
+                                                                )
+                                                            ],
+                                                            value="All",
+                                                        ),
+                                                    ]
+                                                ),
+                                                html.Div(
+                                                    [
+                                                        dmc.Text(
+                                                            "Select Country:",
+                                                            size="sm",
+                                                            mb=5,
+                                                        ),
+                                                        dmc.Select(
+                                                            id="country-dropdown",
+                                                            data=[
+                                                                {
+                                                                    "value": country,
+                                                                    "label": country,
+                                                                }
+                                                                for country in sorted(
+                                                                    df[
+                                                                        "country"
+                                                                    ].unique()
+                                                                )
+                                                            ],
+                                                            value="United States",
+                                                            searchable=True,
+                                                        ),
+                                                    ]
+                                                ),
+                                            ],
+                                            gap="lg",
+                                        ),
+                                    ],
+                                    p="md",
+                                    className="control-card",
+                                )
+                            ]
+                        )
+                    ],
+                    span=3,
+                ),
+                dmc.GridCol(
+                    [
+                        dmc.Stack(
+                            [
+                                html.Div(id="stats-cards"),
+                                dmc.Card(
+                                    [dcc.Graph(id="scatter-plot")],
+                                    p="sm",
+                                    className="chart-card",
+                                ),
+                            ],
+                            gap="md",
+                        )
+                    ],
+                    span=9,
+                ),
+            ],
+            gutter="md",
+        ),
+        dmc.Grid(
+            [
+                dmc.GridCol(
+                    [
+                        dmc.Card(
+                            [dcc.Graph(id="line-chart")], p="sm", className="chart-card"
+                        )
+                    ],
+                    span=6,
+                ),
+                dmc.GridCol(
+                    [
+                        dmc.Card(
+                            [dcc.Graph(id="bar-chart")], p="sm", className="chart-card"
+                        )
+                    ],
+                    span=6,
+                ),
+            ],
+            gutter="md",
+            mt="md",
+        ),
+    ],
+    forceColorScheme="dark",
+    theme={"colorScheme": "dark"},
+)
+
+
+@callback(
+    Output("scatter-plot", "figure"),
+    [Input("year-slider", "value"), Input("continent-dropdown", "value")],
+)
+def update_scatter_plot(selected_year, selected_continent):
+    return create_scatter_plot(selected_year, selected_continent)
+
+
+@callback(Output("line-chart", "figure"), Input("country-dropdown", "value"))
+def update_line_chart(selected_country):
+    return create_line_chart(selected_country)
+
+
+@callback(Output("bar-chart", "figure"), Input("year-slider", "value"))
+def update_bar_chart(selected_year):
+    return create_bar_chart(selected_year)
+
+
+@callback(Output("stats-cards", "children"), Input("year-slider", "value"))
+def update_stats(selected_year):
+    year_data = df[df["year"] == selected_year]
+
+    avg_life_exp = round(year_data["lifeExp"].mean(), 1)
+    total_pop = year_data["pop"].sum()
+    num_countries = len(year_data)
+    avg_gdp = round(year_data["gdpPercap"].mean(), 0)
+
+    return dmc.Grid(
+        [
+            dmc.GridCol(
+                create_datacard(
+                    "Life Expectancy",
+                    f"{avg_life_exp} years",
+                    "mdi:heart-pulse",
+                    "#ff6b35",
+                ),
+                span=3,
+            ),
+            dmc.GridCol(
+                create_datacard(
+                    "Population",
+                    f"{total_pop / 1e9:.1f}B",
+                    "mdi:account-group",
+                    "#1f77b4",
+                ),
+                span=3,
+            ),
+            dmc.GridCol(
+                create_datacard(
+                    "Countries", str(num_countries), "mdi:earth", "#2ca02c"
+                ),
+                span=3,
+            ),
+            dmc.GridCol(
+                create_datacard(
+                    "GDP per Capita", f"${avg_gdp:,.0f}", "mdi:currency-usd", "#d62728"
+                ),
+                span=3,
+            ),
+        ],
+        gutter="sm",
+    )
+
+
+if __name__ == "__main__":
+    app.run(debug=True, port=8050)

assets/styles.css

@@ -0,0 +1,107 @@
+body {
+    font-family: 'Outfit', sans-serif;
+    background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
+    margin: 0;
+    padding: 20px;
+    min-height: 100vh;
+}
+
+.header {
+    background: linear-gradient(135deg, #ff6b35, #d43425);
+    padding: 20px 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
+    margin-bottom: 20px;
+}
+
+.control-card {
+    background: rgba(15, 15, 20, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.chart-card {
+    background: rgba(15, 15, 20, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.datacard {
+    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(212, 52, 37, 0.1));
+    border: 1px solid rgba(255, 107, 53, 0.3);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.datacard:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(255, 107, 53, 0.2);
+}
+
+.year-slider .mantine-Slider-track {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.year-slider .mantine-Slider-bar {
+    background: linear-gradient(90deg, #ff6b35, #d43425);
+}
+
+.year-slider .mantine-Slider-thumb {
+    background: #ff6b35;
+    border: 2px solid white;
+}
+
+.continent-select .mantine-Select-input,
+.country-select .mantine-Select-input {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.continent-select .mantine-Select-input:focus,
+.country-select .mantine-Select-input:focus {
+    border-color: #ff6b35;
+    box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
+}
+
+/* Custom scrollbar for dropdowns */
+.mantine-Select-dropdown {
+    background: rgba(15, 15, 20, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.mantine-Select-item {
+    color: white;
+}
+
+.mantine-Select-item:hover {
+    background: rgba(255, 107, 53, 0.2);
+}
+
+/* Graph styling adjustments */
+.js-plotly-plot {
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+    
+    .header {
+        padding: 15px 20px;
+    }
+    
+    .control-card,
+    .chart-card {
+        margin: 10px 0;
+    }
+}

requirements.txt

@@ -0,0 +1,5 @@
+dash
+dash-mantine-components
+dash-iconify
+plotly
+pandas