PyCafe - Vizro - Visualizing Iris Dataset with Vizro and Plotly

assets/
app.py
custom_components.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
# 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 vizro.plotly.express as px
from vizro import Vizro
import vizro.models as vm
from custom_components import CustomDashboard, CustomNavLink

df = px.data.iris()

page = vm.Page(
    title="Page 1",
    layout=vm.Grid(grid=[[0, 1], [2, 2], [2, 2], [3, 3], [3, 3]], row_min_height="140px"),
    components=[
        vm.Card(
            text="""
                ### What is Vizro?
                An open-source toolkit for creating modular data visualization applications.
                
                Rapidly self-serve the assembly of customized dashboards in minutes - without the need for advanced coding or design experience - to create flexible and scalable, Python-enabled data visualization applications."""
        ),
        vm.Card(
            text="""
                ### Github 

                Checkout Vizro's GitHub page for further information and release notes. Contributions are always welcome!""",
            href="https://github.com/mckinsey/vizro",
        ),
        vm.Graph(id="scatter_chart1", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(id="hist_chart1", figure=px.histogram(df, x="sepal_width", color="species")),
    ],
    controls=[vm.Filter(column="species"), vm.Filter(column="petal_length"), vm.Filter(column="sepal_width")],
)

page_1 = vm.Page(
    title="Page 2",
    layout=vm.Grid(grid=[[0, 1], [2, 2], [2, 2], [3, 3], [3, 3]], row_min_height="140px"),
    components=[
        vm.Card(
            text="""
                ### What is Vizro?
                An open-source toolkit for creating modular data visualization applications.
                
                Rapidly self-serve the assembly of customized dashboards in minutes - without the need for advanced coding or design experience - to create flexible and scalable, Python-enabled data visualization applications."""
        ),
        vm.Card(
            text="""
                ### Github

                Checkout Vizro's GitHub page for further information and release notes. Contributions are always welcome!""",
            href="https://github.com/mckinsey/vizro",
        ),
        vm.Graph(id="scatter_chart2", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(id="hist_chart2", figure=px.histogram(df, x="sepal_width", color="species")),
    ],
    controls=[vm.Filter(column="species"), vm.Filter(column="petal_length"), vm.Filter(column="sepal_width")],
)

page_2 = vm.Page(
    title="Page 3",
    layout=vm.Grid(grid=[[0, 1], [2, 2], [2, 2], [3, 3], [3, 3]], row_min_height="140px"),
    components=[
        vm.Card(
            text="""
                ### What is Vizro?
                An open-source toolkit for creating modular data visualization applications.
                
                Rapidly self-serve the assembly of customized dashboards in minutes - without the need for advanced coding or design experience - to create flexible and scalable, Python-enabled data visualization applications."""
        ),
        vm.Card(
            text="""
                ### Github

                Checkout Vizro's GitHub page for further information and release notes. Contributions are always welcome!""",
            href="https://github.com/mckinsey/vizro",
        ),
        vm.Graph(id="scatter_chart3", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(id="hist_chart3", figure=px.histogram(df, x="sepal_width", color="species")),
    ],
    controls=[vm.Filter(column="species"), vm.Filter(column="petal_length"), vm.Filter(column="sepal_width")],
)


dashboard = CustomDashboard(
    pages=[page, page_1, page_2],
    navigation=vm.Navigation(
        pages=["Page 1", "Page 2", "Page 3"],
        nav_selector=vm.NavBar(
            items=[
                CustomNavLink(
                    text="First section",
                    label="First section",
                    pages=["Page 1", "Page 2"]
                ),
                 CustomNavLink(
                    text="Second section",
                    label="Second section",
                    pages=["Page 3"]
                )
            ]
        )
    )
    )
Vizro().build(dashboard).run()
Py.Cafe

vizro-horizontal-navigation

Visualizing Iris Dataset with Vizro and Plotly
