Py.Cafe

JiaYuanChng/

ME

Interactive Visualizations

DocsPricing
  • data/
  • 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
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
import vizro.models as vm
import plotly.graph_objects as go
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.models.types import capture
from vizro.figures import kpi_card
import dash
from dash import dcc, html, Input, Output, callback, clientside_callback
import pandas as pd
import copy

df = pd.read_csv('data/dashboard.csv')

@capture("graph")
def custom_scatter_click(data_frame, width=500, height=400):
    data_frame = data_frame
    fig = px.scatter(
        data_frame, 
        x='tsne1', 
        y='tsne2',
        color='metal_cat',
        hover_data={'metal': True, 'elastomer': True, 'tsne1': False, 'tsne2': False, 'metal_cat':False}
    )

    fig.update_layout(width=width, height=height, xaxis_title="Reduced dimension 1",
                    yaxis_title="Reduced dimension 2",
                    xaxis=dict(tickfont=dict(size=16, color='black')),
                    yaxis=dict(tickfont=dict(size=16, color='black'))
                    )
    

    fig.update_layout(
    xaxis=dict(showticklabels=False),
    yaxis=dict(showticklabels=False)
    )
    fig.update_layout(showlegend=False, xaxis_showgrid=False, yaxis_showgrid=False)

    return fig

@capture("graph")
def custom_hist(data_frame, x):
    fig = px.histogram(data_frame, x=x)
    fig.update_layout(#width=500, height=400, 
                      xaxis_title=None,
                      xaxis=dict(tickfont=dict(size=16, color='black')),
                      yaxis=dict(tickfont=dict(size=16, color='black'))
                     )
    fig.update_xaxes(categoryorder='total descending')
    fig.update_xaxes(tickangle=80)
    return fig

first_page = vm.Page(
    title="Data",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(df),
        ),
    ],
)

second_page = vm.Page(
    title="Materials Analysis",
    layout=vm.Grid(grid=[[0, 0, -1], [1, 1, -1], [1, 1, -1]],
                   row_gap="10px", col_gap="20px", 
                   row_min_height='450px', col_min_width='230px'),
    components = [
        vm.Graph(
            figure=custom_hist(df, x='metal_cat'), 
            title="Metals"
            ),
        vm.Graph(figure=custom_scatter_click(df, width=650, height=650), 
                 title="Metal-Elastomer Universe"
                )
        
    ]
)

dashboard = vm.Dashboard(
    pages=[first_page, second_page],
    title = "Metal-Elastomer",
    navigation=vm.Navigation(nav_selector=vm.NavBar(
        items = [
            vm.NavLink(label='Data', pages=["Data"], icon="database"),
            vm.NavLink(label='Charts', pages=["Materials Analysis"], icon="bar_chart"),
            ]
            )
        )
    )
Vizro().build(dashboard).run()