How to create a matrix like interaction control

Dash Python
1

I would like to show this interaction control on the browser
image
I think I can use scatter plot for this. I created a data frame with index from A to H and columns from 1 to 12. But I don’t know how to paste in the X, and Y data.
Could you please guide me how to do this as a scatter plot or even better if there is another option to present this control?

Thanks in advance.

2

i think it’s possible with scatter plot. Try to count x,y coordinates of every dot’s center. when counting that we need to keep in mind dot size and distance beetween dots. After that it would be easy to plot dots wia their center coordinates. dont know is it good idea or not =)

3

@roman: look like I have to create two lists of coordinator for 96 data point. Am I correct?

4

hard to say =) have you plot them?

5

Here it is. I still have to reverse the row and find out how to show all of X mark and the gap between the marks

image
image.png1750×429 29.3 KB

6

we can tune dots size to make them closer to each other

go.Scatter(
            x=df_by_continent['gdpPercap'],
            y=df_by_continent['lifeExp'],
          
            marker={
                'size': 15
               
            }
        )
7

I did that :slight_smile: but the gap between columns need to be similar to the gap between rows