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

How to plot two 3D spheres in the same graph? .[3D SOLAR SYSTEM]

i am creating a 3D solar system in plotly. i have used multiple chart types. In this, i have created 3D sphere as Earth using 3D surface and orbit using scatter3D. For satellite, i have used scatter3D markers(red color). but i need to plot a another small 3D sphere in the place of marker (red color).

my code.

import dash
#from astroquery.jplhorizons import Horizons
from datetime import datetime, timedelta
from datetime import datetime
from dateutil import tz
import plotly
from plotly.graph_objs import Scatter, Layout
import plotly.graph_objs as go
import plotly.graph_objects as go
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import math
from textwrap import dedent as d
import json
import plotly.tools as tls
from numpy import *
import numpy as np

with open(‘geocentric.json’,‘r’) as json_file:
c_data = json.load(json_file)

ch2x = []
ch2y = []
ch2z = []
chvx = []
chvy = []
chvz = []
date = []

for data in c_data:
date.append(data[‘date’][5:])
ch2x.append(data[‘cx’]*149597870.691)
ch2y.append(data[‘cy’]*149597870.691)
ch2z.append(data[‘cz’]*149597870.691)
#chvx.append(data[‘cvx’]*149597870.691/86400)
#chvy.append(data[‘cvy’]*149597870.691/86400)
#chvz.append(data[‘cvz’]*149597870.691/86400)

theta = linspace(0,2pi,100)
phi = linspace(0,pi,100)
x = 6371
outer(cos(theta),sin(phi))
y = 6371outer(sin(theta),sin(phi))
z = 6371
outer(ones(100),cos(phi)) # note this is 2d now

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name,external_stylesheets=external_stylesheets)
colors = {
‘background’: ‘#111111’,
‘text’: ‘#7FDBFF
}

app.layout = html.Div([
dcc.Graph(id=‘graph’,style={‘height’:‘110vh’,‘color’:‘black’},figure={
‘data’: [
go.Scatter3d(
)],‘layout’: go.Layout(
xaxis={‘showgrid’:False,‘zeroline’: False,‘showticklabels’:False},
yaxis={‘showgrid’:False,‘zeroline’: False,‘showticklabels’:False},
hovermode=‘closest’ )
}
),html.Button(‘Geocentric view’, id=‘btn-1’,n_clicks_timestamp=0)

])

@app.callback(Output(‘graph’, ‘figure’),[Input(‘btn-1’, ‘n_clicks_timestamp’)])
def displayClick(btn1):

trace1 = go.Surface(x=x,y=y,z=z)



trace2 = go.Scatter3d(x=ch2x[:300],
                y= ch2y[:300],
                z= ch2z[:300],
                mode = 'lines',
                line=dict(width=3,color='orange'),
                #marker=dict(size=5,color='red'),
                text='ch2',
                name = 'ch2',
                hoverinfo='text')

trace22 = go.Scatter3d(x=[ch2x[250]],
                y= [ch2y[250]],
                z= [ch2z[250]],
                mode = 'markers',
                #line=dict(width=3,color='orange'),
                marker=dict(size=5,color='red'),
                text='ch2',
                name = 'ch2',
                hoverinfo='text')




layout = go.Layout(scene = dict(
                xaxis = dict(
                     backgroundcolor="black",
                     gridcolor="black",
                     color = 'black',
                     showbackground=True,showticklabels=False,
                     zerolinecolor="orange"),
                yaxis = dict(
                    backgroundcolor="black",
                    gridcolor="black", color = 'black',
                    showbackground=True,showticklabels=False,
                    zerolinecolor="orange"),
                zaxis = dict(
                    backgroundcolor="black",
                    gridcolor="black", color = 'black',
                    showbackground=True,showticklabels=False,
                    zerolinecolor="orange",),),scene_aspectmode='data',
              margin=dict(r=0, l=100, b=80, t=11),paper_bgcolor='black',
plot_bgcolor='black')    


data = [trace1,trace2,trace22]
fig = go.Figure(data=data,layout=layout)

return fig

if name == ‘main’:
app.run_server(debug=True)

i need to plot a another small 3d sphere in the place of scatter3d marker(red color).

@bas

As long as you have defined the first sphere of center (x1, y1, z1) and radius r1=6371,

x  = x1 + r1 * np.outer()
y  = y1 + r1 * np.outer()
z  = z1 + r1 * np.outer()

then the second sphere of center (x2, y2, z2) and radius r2 will be:

defined by:

x  = x2 + r2 * np.outer()
y  = y2 +  r2 * np.outer()
z =  z2 + r2  *np.outer()

The arguments for np.outer() are the same for both spheres.
Hence you have to set x2, y2, z2, and r2.

For the already plotted sphere, the center is (0,0,0).

Thank you very much empet. worked!.

1 Like

I’ using Plotly JS.
I would like to do this solar system above and animate the planets rotation.

Is this possible?
How can I do it?