Annotated Heatmap Sorting

Dash Python
8

This is some cut and pastes from my code. So it’s not complete, but just about everything you need is present. Let me know if you need any more help. Dash is very simple once you get the gist of it.

import pandas as pd
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.figure_factory as ff
import math

#initialize App
app = dash.Dash()
app.css.append_css({'external_url': 'https://cdn.rawgit.com/plotly/dash-app-stylesheets/2d266c578d2a6e8850ebce48fdb52759b2aef506/stylesheet-oil-and-gas.css'})  # noqa: E501

app.layout = html.Div(
    [
        html.Div(
            [
                 html.Div(
                     [
                         dcc.Graph(id='big-map'),
                     ],
                     className = 'six columns'
                 )                
             ],
             className = 'row'
         )
    ],
    className='ten columns offset-by-one'
)

@app.callback(
    dash.dependencies.Output('big-map', 'figure'),
    [dash.dependencies.Input('type-select', 'value'),
     dash.dependencies.Input('small-select', 'value'),
     dash.dependencies.Input('DD', 'value')])
def big_build(type_select, id_, s):    
    
    "Manipulation code based on above inputs" 

    mean_data = "a pd.series with mean values and index values which are the annotations." 

    vals = np.array(mean_data.tolist())
    vals = np.resize(vals, (math.ceil(len(vals))//5, 5))
    vals = np.flipud(vals)

    vals_text = np.array(mean_data.index.tolist())
    vals_text = np.resize(vals_text, (math.ceil(len(vals_text))//5, 5))
    vals_text = np.flipud(vals_text)
    
    fig = ff.create_annotated_heatmap(vals, annotation_text = vals_text, zmin = 0)   
    
    fig.layout.margin.update({
        "l": 5,
        "r": 0,
        "b": 100,
        "t": 80,
        "pad": 0
    })
    
    return fig
2 Likes