Py.Cafe

huong-li-nguyen/

vizro-bug-filter-interaction

Visualizing Gapminder Data with Filter Interaction

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# 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.actions import filter_interaction
from vizro.models.types import capture

df_gapminder = px.data.gapminder().query("year == 2007")


@capture("graph")
def custom_chart(x: str, y: str, color: str, data_frame: pd.DataFrame = None):
    fig = px.box(
        df_gapminder,
        x=x,
        y=y,
        color=color,
        custom_data=[color],  # this does not get picked up if defined here?
    )
    return fig


dashboard = vm.Dashboard(
    pages=[
        vm.Page(
            title="Filter interaction",
            components=[
                vm.Graph(
                    figure=custom_chart(data_frame=df_gapminder, x="continent", y="lifeExp", color="continent"),
                    actions=[vm.Action(function=filter_interaction(targets=["scatter_relation_2007"]))],
                ),
                vm.Graph(
                    id="scatter_relation_2007",
                    figure=px.scatter(
                        df_gapminder,
                        x="gdpPercap",
                        y="lifeExp",
                        size="pop",
                        color="continent",
                    ),
                ),
            ],
            controls=[vm.Filter(column="continent")],
        ),
    ]
)

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