Py.Cafe

# Vizro is an open-source toolkit for creating modular data visualization applications.
# check out https://github.com/mckinsey/vizro for more info about Vizro
# and checkout https://vizro.readthedocs.io/en/stable/ for documentation.

import pandas as pd
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro._themes._color_values import COLORS
from vizro.models.types import capture
from vizro.tables import dash_ag_grid

mortality_df = pd.read_csv("data/child-mortality.csv")
mortality_df["Quintiles"] = pd.qcut(mortality_df["Under-five mortality rate"], 5, labels=False)
mortality_df = mortality_df.sort_values('Year', ascending=True)

@capture("graph")
def line(data_frame, **kwargs):
    """Plotly line chart with post-fig updates."""
    fig = px.line(data_frame, **kwargs)
    fig.update_layout(legend_title="", yaxis_ticksuffix="%", xaxis_showgrid=False, yaxis_rangemode='nonnegative')
    return fig

@capture("graph")
def choropleth(data_frame, **kwargs):
    df_filtered = data_frame[data_frame['Year'] % 5 == 0]
    fig = px.choropleth(data_frame=df_filtered, **kwargs)
    fig.update_layout({"margin": {"t": 0, "b": 0, "r": 0, "l": 0}})
    fig.update_coloraxes(colorbar_ticksuffix="%")
    return fig


CELL_STYLE = {
    "styleConditions": [
        {
            "condition": "params.data.Quintiles == 4",
            "style": {"backgroundColor": "#7e000c"},
        },
        {
            "condition": "params.data.Quintiles == 3",
            "style": {"backgroundColor": "#a1423a"},
        },
        {
            "condition": "params.data.Quintiles == 2",
            "style": {"backgroundColor": "#c2736b"},
        },
        {
            "condition": "params.data.Quintiles == 1",
            "style": {"backgroundColor": "#dea4a1"},
        },
        {
            "condition": "params.data.Quintiles == 0",
            "style": {"backgroundColor": "#f8d6da"},
        },
    ],
}

COLUMNDEFS = [
    {"field": "Entity", "cellDataType": "text"},
    {"field": "Code", "cellDataType": "text"},
    {"field": "Year", "cellDataType": "text"},
    {
        "field": "Under-five mortality rate",
        "headerName": "Under-five mortality rate in %",
           "valueFormatter": {"function": "d3.format(',.1f')(params.value)"},
           "cellStyle": CELL_STYLE
    },
]

chart_page = vm.Page(
    title="Chart  📈",
    id="chart",
    components=[
        vm.Graph(
            figure=line(
                data_frame=mortality_df,
                x="Year",
                y="Under-five mortality rate",
                color="Entity",
            ),
            title="Under-five child mortality rate by country",
            header="""
                 The estimated share of newborns who die before reaching the age of five.
                 """,
            footer="""
            **Data source:** Data source: UN IGME (2023); Gapminder (2015). [Learn more about this data](https://www.gapminder.org/data/documentation/gd005/).
            """,
        )
    ],
    controls=[
        vm.Filter(column="Year"),
        vm.Filter(
            column="Entity",
            selector=vm.Dropdown(
                title="Countries and Regions",
                value=["Brazil", "India", "United States", "France", "United Kingdom", "Sweden"],
            ),
        ),
    ],
)

map_page = vm.Page(
    title="Map 📍",
    id="map",
    components=[
        vm.Graph(
            figure=choropleth(
                data_frame=mortality_df,
                locations="Code",
                hover_name="Entity",
                color="Under-five mortality rate",
                color_continuous_scale=COLORS["SEQUENTIAL_RED"],
                animation_frame="Year",
            ),
            title="Under-five child mortality rate by country",
            header="""
                 The estimated share of newborns who die before reaching the age of five.
                 """,
            footer="""
            **Data source:** Data source: UN IGME (2023); Gapminder (2015). [Learn more about this data](https://www.gapminder.org/data/documentation/gd005/).
            """,
        )
    ],
)

table_page = vm.Page(
    title="Table 📑",
    id="table",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(mortality_df, columnSize="responsiveSizeToFit", columnDefs=COLUMNDEFS),
            title="Under-five child mortality rate by country",
            header="""
                 The estimated share of newborns who die before reaching the age of five.
                 """,
            footer="""
            **Data source:** Data source: UN IGME (2023); Gapminder (2015). [Learn more about this data](https://www.gapminder.org/data/documentation/gd005/).
            """,
        )
    ],
    controls=[
        vm.Filter(column="Year"),
        vm.Filter(
            column="Entity",
            selector=vm.Dropdown(title="Countries and Regions"),
        ),
    ],
)


dashboard = vm.Dashboard(
    pages=[chart_page, map_page, table_page],
    title="Figure Friday - Week 37",
    navigation=vm.Navigation(
        nav_selector=vm.NavBar(
            items=[
                vm.NavLink(pages=["chart"], icon="Show Chart", label="Chart"),
                vm.NavLink(pages=["map"], icon="Globe", label="Map"),
                vm.NavLink(pages=["table"], icon="Table", label="Table"),
            ]
        )
    ),
    theme="vizro_light",
)

Vizro().build(dashboard).run()