Plotly with images

Scripting
1

Hello! I’ve noticed that the design explorer app appears to use plotly for the parallel coordinates plot, and is also linked to the images shown via what configurations are selected in the plotly plot.
I personally have spent a decent bit of time googling how to do similar via plotly to no avail.
Is the design explorer app’s code available to view, or is there a code sample or link to a code sample that can be shared? it would definitely be appreciated.

Best
-trevor

1 Like
3

Hi @tfedyna,

Here is the repository: GitHub - pollination-apps/design-explorer: A design explorer app.

This is a Dash app. The plot and the images are two separate things. The default plot with all entries in the CSV is created here and added to the app layout here. The images are created here, and added to the app layout here.

When you make a selection in the plot, the images (and table) will get updated through a series of callback functions.

  1. This function is run every time there is a change in the ‘restyleData’ component property. So whenever you make a selection in the plot. The callback output is Output('active-filters', 'data'), which is just a placeholder for all the active selections in the plot.
  2. The function above will trigger this function. The output is Output('active-records', 'data'), which is a DataFrame* representation of all the entries in the active filers.
  3. Now that the ‘data’ property in ‘active-records’ has been changed, this callback function is triggered. This will update all the images.

*Really it is records since we cannot store a DataFrame object. That is why I use df.to_dict('records').

1 Like
4

Awesome, thank you @mikkel for such a detailed rundown on the functionality in question, I really appreciate it!