# Help plotting 2d mesh

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:

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:

``````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!!

@empet, do you have any existing notebooks that might be helpful for @mafiaskafia here?

Here is a code that displays the elements:

``````import numpy as np
import plotly.graph_objs as go

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]]

nodes=np.asarray(nodes)
xn, yn=nodes.T

y_plotly=[]
z_plotly=[]
for elem in elements:
elem.append(elem[0])
y_plotly.extend(xn[elem].tolist()+[None])
z_plotly.extend(yn[elem].tolist()+[None])

trace=dict(type='scatter',
x=y_plotly,
y=z_plotly,
mode='lines',
line=dict(color='blue', width=2))

layout=dict(width=400, height=300,
xaxis=dict(showgrid=False, zeroline=False),
yaxis=dict(showgrid=False, zeroline=False)
)
fw=go.FigureWidget(data=[trace], layout=layout)
fw
``````