Specify a Camera Perspective in Plotly

When working with three-dimensional plots, you must understand how the camera and view perspective works. This allows you to easily manage and specify the custom view perspectives for your various plots.

This article helps you get started with Plotly camera controls, essential camera control parameters, and more.

How Camera Works in Plotly

Two main factors determine how you view a 3D plot. First, the camera position and directions determine the view of the plot in Plotly.

Three main vectors manage these parameters:

Up
Center
Eye

The Up vector is used to control the up direction on the page. By default, the camera z-axis always points up. Hence, the default vector values for the up parameter are x=1.25, y=1.25, z=1.25.

On the other hand, the Center parameter controls the translation of the scene’s center. By default, the figure contains no translation. Hence, the default vector values for the center parameter are x=0, y=0, z=0.

Finally, the Eye parameter determines the camera’s position at the point of origin. By default, the eye vector holds the following values: x=1.25, y=1.25, x=1.25.

Default Camera Controls

You can specify the camera parameters using the update_layout function(). An example is as shown in the following:

import plotly.express as px
df = px.data.gapminder().query("country=='Ireland'")
fig = px.line_3d(df, x='gdpPercap', y='pop', z='year')
camera_params = dict(
up=dict(x=0,y=0,z=1),
center=dict(x=0,y=0,z=0),
eye=dict(x=1.25,y=1.25,z=1.25)
)

fig.update_layout(scene_camera=camera_params)
fig.show()

The given example uses the default camera parameters defined as dictionary. Plotly uses these values if the camera controls are not specified.

Customizing the Camera View Point

We can customize the camera view point by modifying the values of the eye vector. For example, to set the camera view point at a lower point, we can use the following values:

camera_params = dict(
up=dict(x=0,y=0,z=1),
center=dict(x=0,y=0,z=0),
eye=dict(x=2.25,y=2.25,z=.25)
)

fig.update_layout(scene_camera=camera_params)
fig.show()

The given eye values set the camera lower. The resulting figure is as shown in the following:

Set the Camera View from Above

We can set the camera view from a top view elevation by setting the z axis of the eye vector.

An example is as shown in the following:

camera_params = dict(
up=dict(x=0,y=0,z=1),
center=dict(x=0,y=0,z=0),
eye=dict(x=0,y=0,z=2.00)
)

fig.update_layout(scene_camera=camera_params)
fig.show()

Note that we only modify the z value in the eye vector. You can customize this value to match the view point that you wish to accomplish.

The previous example returns a figure as shown in the following:

Tilt the Camera Vertically

We can customize the tilt position of the camera by modifying the up parameter. For example:

camera_params = dict(
up=dict(x=2.25,y=0,z=0),
center=dict(x=0,y=0,z=0),
eye=dict(x=0,y=2.5,z=0)
)

fig.update_layout(scene_camera=camera_params)
fig.show()

In this case, we specify the up vector and modify the x parameter. This returns a figure as shown in the following:

Set the Focal Point

To change the camera focal point, we can customize the values of the center vector. For example, to look up, we can customize the z parameter as:

camera_params = dict(
up=dict(x=0,y=0,z=1),
center=dict(x=0,y=0,z=.3),
eye=dict(x=1.25,y=1.25,z=1.25)
)
fig.update_layout(scene_camera=camera_params)
fig.show()

This returns the following figure:

Feel free to modify the value as you see fit.

Conclusion

Thanks for this guide, you now have an understanding of how the camera positioning in Plotly works. Feel free to explore the documents for more.

Thanks for reading. Happy coding!!