Black Lives Matter. Please consider donating to Black Girls Code today.

3D Scatter Plot in Real Time

I am trying to use Plotly and Python in order to visualize some data real-time in a 3D Scatter Plot.

So far I have created and plotted a scatter plot in 3d of random values.

I am now trying to update the position of these particles in the plot to see them change live in real time. (so they appear to be moving)

I would appreciate any help on this.

Thank you.


@soali You can animate your points, i.e. in each frame add new points. Here is the Plotly tutorial for offline and online animation:

1 Like

Thank You! @empet I appreciate it. I have been playing around with animations and am still not able to achieve the goal. Is there a way, using animations and the frames, to update an existing plot as new data (a trace) is being received by the program? Something like this:

Thanks again for your help!

@soali, You can animate 3d points as in your gif. This example of 3d animation could inspire you to simulate the motion of those 3d points:

Hi, I am complete newbie to dash. I have requirement to create something like

I have created this in matplotlib. Could you please tell me what is the way to reproduce this in dash?
2D live plotting I am able to achieve. How to do 3D?

Hi @rahulrajpl,

I’m sorry I didn’t notice your question before.

You can rotate your line just replacing the scatter3d that displays only markers, in my code pasted here , as an answer to a similar question, into a scatter3d of mode =‘lines’.

This is the only change you have to make to get your lines rotated:

t = np.linspace(0, 10, 12)
x, y, z = np.cos(t), np.sin(t), t

fig= go.Figure(go.Scatter3d(x=x, y=y, z=z, mode='lines', line_width=5))  #you can define your own lines here

Eventually you can change in updatemenus, the frame duration to get the desired speed of rotation.

Hi @empet,

Thank you for your reply. I have achieved phenomenal graphing in both 2D and 3D, interactive, live, transparent and much more. I will be putting up the code in some time for others to refer.

Meanwhile, I’m stuck with one issue. I have a 2D Graph component. I have pan and zoom option available by default. But how do I achieve rotate option also along the 2D plane interactively with a mouse click like this jsfiddle:

PS: I have statically enabled rotation with CSS transform property. But I want to be interactive to the user to set the orientation. I tried implementing the code from above fiddle into Dash but failed. It doesn’t seem to work.

Kindly help with this. Thanks.

@Hi @rahulrajpl,
I reproduced the square rotation in this notebook, but the rotation is controlled by a slider not the mouse.
With Plotly you cannot use the mouse to rotate a shape clockwise with some angle, and then suddenly to change the sense of rotation.

As you can notice, playing with the animated rotation, when the slider is moved to the right, the square rotates clockwise about its center, while moving it to the left, the direction of rotation is counter-clockwise.

I think that you should ask this question under a separate title, because here the title is irrelevant for this answer.

Thank you so much. This was helpful.

@rahulrajpl, Could you, please, (re)open a new question with the title: " Animating rotation of a planar shape about a point" , such that interested users can find it when searching a related topic topic?

Sure. Done here Animating rotation of a planar shape about a point