Trying to make a 2x2 or 2x3 layout grid with a plotly graph in each cell in a Dash App?

Dash Python
1

Hello Everyone:

I have been working on a Dash App for a while. Now on a particular page of the app, I want to include 2 sections:

  • Section 1: this will be some input fields (dropdown, parameter etc) which user will select to update the Section 2.
  • Section2: this will be a 2x2 or a 2x3 grid, where each cell of the grid will contain a plotly visualization governed by the parameters in Section 1.

What I need help on is in designing Section 2. I could simply create a div layout in this fashion and have a graph render in each cell, but I am trying to explore if there is a better and more slick looking way to do this?

I also recall that I came across a Dash post sometime in the past where they were doing the exact same thing, and in addition they also made the cells movable/draggable so that user can reposition the graphs on their screen which was pretty cool, although I am not able to find that post.

Any thoughts here folks?

Thank you! :slight_smile:

2

Hi @manish1022iiti

Are you looking for something like the image below?

Screenshot (245)
Screenshot (245)1920×970 103 KB

If so, you could find the code for the program here:

Are you familiar with Dash Bootstarp Components? Check out the layout section and (optionally) the card section in the documentation, there you will learn how to make all sorts of layout grids.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

3 Likes
3

Hello @mo.elauzei

Thanks for your response. This is super helpful. I ended up using dmc.SimpleGrid to achieve the same 2x2 grid effect as below:

# Create the 2x2 grid layout with Cards
ret_div = dmc.SimpleGrid(
  cols=2,  # Specify 2 columns per row to create a 2x2 grid
  spacing="md",  # Spacing between columns
  verticalSpacing="md",  # Spacing between rows
  children=cards,  # each card contains a visualization
)
1 Like