Longer chapter(s) on interactive graphs

We’ve already mentioned a few times that the part on plotly graphs in Dash applications should be expanded. I’m trying here to summarize what could go into a new version:

• the different ways to set dcc.Graph.figure: dict or plotly figure, which can be created with plotly.graph_objects or plotly.express (possibly using fig.update_traces and fig.update_layout). provide a link to plot.ly/python/creating-and-updating-figures/ -[ ] existing example capturing user interaction (clickData etc.)

• existing example Update Graphs on Hover

• example of editable (`config={'editable":True}) figure triggering a callback when edited

• explain the shape of selectedData and how to access the components of it

• explain how we recommend selectedData with clicking instead of clickData

• explain how the user interface for selectedData works: clicking, shift clicking, double clicking to unselect, and more.

• explain what selected data looks like for other chart types including sunbursts

• datashader examples

• rasterly examples

• mention clientside callbacks for graphs (see #754 )

• subplots vs multiple dcc.Graph components

• real world examples of restyleData (responding to legend events, like keeping two graphs in sync)

• real world examples of hoverData, including:

  • using hover data to update the graph itself. For example:

  You can thicken a trace when hovering over it in Dash without needing to use javascript by creating a callback with the input hoverData. The hoverData includes the index of the trace that’s being hovered on so you would be able to use that info to generate a thicker version of the trace in that callback (I would simply append this thicker trace to the list of existing traces because that is easier than deleting the thin trace first).

  Then if you set clear_on_unhover=True in the dcc.Graph, hoverData will change to None when a trace is unhovered so your callback would look something like this:

  @app.callback(Output('graph', 'figure'), [Input('graph', 'hoverData')], [State('graph', 'figure')])
  update_graph_on_hover(hoverData, fig):
    if not hoverData is None:
      trace = create_thicker_version_of_hovered_over_trace(hoverData)
      fig['data'].append(trace)
      return fig
  
    # delete that last trace if hoverdata is cleared
    else:
      fig['data'].pop()
  

  If you go the above route, you may need to add a dummy trace that’ll get popped before any hover action takes place.

  • using hover data to update something different

• Examples of the config. For example, how to change the size and resolution of the PNG graph when downloading it

Does that make sense? Anything else missing? It’s a lot of work but I think it makes sense to consider this as a whole. A lot of questions on the forum would probably disappear with the above additions.

[chriddyp]

for the R version, instead of datashader we’ll document rasterly

[emmanuelle]

extendData often triggers questions in the forum since there is no doc example and some links (including the release notes of dash 0.41) point to https://github.com/plotly/dash-core-components/pull/461, where the example code block is not valid any more (different syntax). See for example https://community.plotly.com/t/what-is-a-correct-usage-of-extenddata-property-to-achieve-adding-data-to-existing-graph-instead-of-constantly-updating-it/39569/4