Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Dash Treemap Implementation

Dear Dash Community

I’m struggeling to implement the treemap chart as outlined here https://plot.ly/python/treemaps/ in Dash. I might be missing out something here, so any help would bey very welcome. Thank you very much.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import plotly.graph_objs as go
import squarify

app = dash.Dash()
server = app.server
app.config.supress_callback_exceptions = True

app.layout = html.Div([
    dcc.Graph(id='treemap')
])

@app.callback(
    Output('treemap', 'figure'),
    [Input('treemap', 'value')])
def treemap():
    
    x = 0.
    y = 0.
    width = 100.
    height = 100.
    
    values = [500, 433, 78, 25, 25, 7]

    normed = squarify.normalize_sizes(values, width, height)
    rects = squarify.squarify(normed, x, y, width, height)

    # Choose colors from http://colorbrewer2.org/ under "Export"
    color_brewer = ['rgb(166,206,227)','rgb(31,120,180)','rgb(178,223,138)',
                    'rgb(51,160,44)','rgb(251,154,153)','rgb(227,26,28)']
    shapes = []
    annotations = []
    counter = 0

    for r in rects:
        shapes.append( 
            dict(
                type = 'rect', 
                x0 = r['x'], 
                y0 = r['y'], 
                x1 = r['x']+r['dx'], 
                y1 = r['y']+r['dy'],
                line = dict( width = 2 ),
                fillcolor = color_brewer[counter]
            ) 
        )
        annotations.append(
            dict(
                x = r['x']+(r['dx']/2),
                y = r['y']+(r['dy']/2),
                text = values[counter],
                showarrow = False
            )
        )
        counter = counter + 1
        if counter >= len(color_brewer):
            counter = 0

    figure = {
    'data': [go.Scatter(
        x = [ r['x']+(r['dx']/2) for r in rects ], 
        y = [ r['y']+(r['dy']/2) for r in rects ],
        text = [ str(v) for v in values ], 
        mode = 'text',
        )
    ],
    'layout': go.Layout(
        height=700, 
        width=700,
        xaxis={'showgrid':False, 'zeroline':False, 'showticklabels': False},
        yaxis={'showgrid':False, 'zeroline':False, 'showticklabels': False},
        shapes=shapes,
        annotations=annotations,
        hovermode='closest',
        )
    }
    return figure

if __name__ == '__main__':
    app.run_server(debug=True)

I changed “def treemap():” to “def treemap(value):”, then it works.

Thank you very much. Sometimes it takes a day or two researching a code line. But this one was on my desk for quite a while. I nearly can’t believe that the solution was so close.