Plotly plotting thw wrong 2d mesh

plotly.js
1

I’m developing a web application (using html and js) for a finite element program that i developed in Python.

One of the features that i want to have is the ability to display the finite element mesh imported by the user. I’ve searched online and found that plotly would be the perfect library to do that, but I’ve encountered some problems… To demonstrate this, i’ll show what i obtain (and what i should obtain) when i try to plot a 4element 1x1 square:

expectations

As you can see, one of the element is cut in half and it shouldn’t. I’ve found that the reason why plotly isn’t plotting the correct mesh, is because of its algorithm: Basically you have two arrays (x and y) which contain an ordered sequence of point coordinates. So, to plot a line between (0,0) and (0,1), your arrays would have to be like: x=[0,0] and y=[0,1].
The problem is that i can’t make good algorithm that converts my “mesh format” into plotly’s “mesh format”.

Here’s my mesh format for the above example:

mesh

nodes=[[0, 0],
       [1, 0],
       [1, 1],
       [0, 1],
       [0.5, 0],
       [1, 0.5],
       [0.5, 1],
       [0, 0.5],
       [0.5, 0.5]]

elements: [[0, 4, 8, 7],
           [7, 8, 6, 3],
           [4, 1, 5, 8],
           [8, 5, 2, 6]]

The algorithm i used (and the one wish isn’t working) is the following:

y_plotly=[] 
z_plotly=[] 
for element in elements:
    for node in range(4):
        
        y_plotly.append(nodes[element[node]][0])
        z_plotly.append(nodes[element[node]][1]) 
        
    y_plotly.append(nodes[element[0]][0])
    z_plotly.append(nodes[element[0]][1])

Can you guys help me out sorting this algorithm? Thanks in advance!!

2

probably better for the folks in #api:python

3

Ok, i’ll ask them then! If you can delete this post, so it’s not a duplicate.
Thank you