Treemap Click Events

Dash Python
1

Hi,

Is there any way to retrieve the current clicked-on region of a treemap? I’m trying to filter a dataframe using selections made on a treemap (pick rows that make up that subset of the data).

dash.dependencies.Input(‘treemap’,‘clickData’) doesn’t seem to do anything.

Does clickdata not work on treemaps? Hoverdata works but is not what i’m looking for…

Thanks!

2

Related: https://github.com/plotly/plotly.js/issues/4338

3

thanks @archmoj, how do i leverage that click event from python tho? Sorry should have specified i’m using python api.

4

With Javascript now the events is called plotly_treemapclick
Here is a demo.
But we are working on the mentioned issue and that may change to plotly_clicked in the next minor/patch.

5

Thanks, i appreciate the response. the issue is when using a treemap in Dash, so for example:

from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
from plotly.utils import PlotlyJSONEncoder
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dashtab
from plotly import tools
import plotly.graph_objs as go


fig = go.Figure(go.Treemap(
    labels = ["Eve","Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
    parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"]
))


#DASH LAYOUT

app = dash.Dash(__name__
                   )
app.layout =html.Div([
    dcc.Graph(figure=fig,id='mytree')
    ,html.Div(id='place4')
])


@app.callback(dash.dependencies.Output('place4','children')
             ,[dash.dependencies.Input('mytree','hoverData')
              ,dash.dependencies.Input('mytree','clickData')]
             )
def industry_selection(hov,click):
    return('HOVER DATA IS {0}~~~~~~~~~~~~~~~~CLICK DATA IS {1}'.format(hov,click))


app.run_server(debug = False)

This will produce the following result:
image

Note that the clickData Input never actually populates. So the plotly_treemapclick isn’t exposed to python. Is that what you’re saying by

But we are working on the mentioned issue and that may change to plotly_clicked in the next minor/patch

?

Thanks!

6

Yes. Exactly.

8

Is there any rough estimate of when this next update would happen? Just trying to decide whether to hold off or use an alternative approach in the meantime…

Thanks again

9

Most likely by the end of the year. The change we’re discussing is bigger than we’re comfortable putting in a patch release so it’ll wait for the next minor.

10

Hi, any updates on this feature?
Thanks

11

The plotly.js PR is in review https://github.com/plotly/plotly.js/pull/4454, will be included in plotly.js 1.52, which we will then bundle with dash 1.8

12

Sounds great, thanks for the response!

13

click events are now available for all sectors in plotly.js 1.52, which is shipped with Dash 1.8.0.

14

Thank you cant wait to try it out! :partying_face: :fireworks:

15

Hi has this feature been implemented in dash?

16

Hi @sjl070707 welcome to the forum! Sure you can capture the clickData events of a treemap in a Dash callback, as explained in the interactive graphing Dash tutorial.

17

Thank you Very much,
it was very helpful.

It looks like clickData works well with the frequency_figure but it doesn’t work with treemap
is this the limitation of the treemap?

this is how my treemap is plotted
treemap_trace = go.Treemap(
labels=word_list_top, parents=[""] * len(word_list_top), values=freq_list_top
)
treemap_layout = go.Layout({“margin”: dict(t=10, b=10, l=5, r=5, pad=4)})
treemap_figure = {“data”: [treemap_trace], “layout”: treemap_layout}

image
image1134×1095 49.8 KB

18

what is your version of plotly.py and of Dash? You need a recent version for it to work.

1 Like
19

Hi emmanuelle,

plotly 4.5.2
dash 1.7.0

20

Thank you for your help, updated both plotly and dash it works like charm!

1 Like