Python

Plotly.graph_objects.Scattergl

Depending on your environment, Plotly renders your figures using a web browser. A Web browser supports SVG API and WebGL rendering capabilities. SVG rendering uses vector rendering while WebGL uses canvas API, faster rendering using GPU and the WebGL API.

Typically, you will not notice the difference between the SVG and WebGL rendered figure unless you are plotting a large amount of dataset. This is because WebGL is designed to handle large amounts of computation by using the GPU.

In this article, we will attempt to show you how to use the scattergl class from Plotly graph_objects to plot a scatter plot using WebGL.

Plotting 1 Million Points Using Plotly Express

Although Plotly graph_objects provides a great deal of customization and low-level control, it is good to understand the quickest and most efficient method of creating a WebGL rendered plot.

This is where Plotly express comes in. Using the render_mode parameter, you can create a scatter plot and tell Plotly to use WebGL instead of SVG to render a figure.

An example is as shown in the following:

import plotly.express as px
import numpy as np
import pandas as pd
n = 100000
df = pd.DataFrame(dict(
    x=np.random.randn(n),
    y=np.random.randn(n)
))
fig = px.scatter(df, x='x', y='y')
fig.show()

The previous code creates a scatter plot of 10000 points using the WebGL renderer enable.

Using Plotly Graph_Objects

Luckily, in Plotly graph_objects, we can use the Scattergl function which uses the WebGL by default.

The example code is as shown in the following:

import plotly.graph_objects as go
import numpy as np
n = 100000
fig = go.Figure()
fig.add_trace(
    go.Scattergl(
        x = np.random.randn(n),
        y = np.random.randn(n),
        mode = 'markers'
    )
)

fig.show()

Render Time (SVG vs WebGL)

As mentioned, WebGL offers a performance advantage over SVG. This can be illustrated when plotting a large dataset.

Example 1: Using ScatterGL

import plotly.graph_objects as go
import numpy as np
n = 10000000
fig = go.Figure()
fig.add_trace(
    go.Scattergl(
        x = np.random.randn(n),
        y = np.random.randn(n),
        mode = 'markers'
    )
)
fig.show()

The previous code renders in about 3m 8.3sec.

Example 2: Without WebGL

import plotly.express as px
import numpy as np
import pandas as pd
n = 10000000
df = pd.DataFrame(dict(
    x=np.random.randn(n),
    y=np.random.randn(n)
))
fig = px.scatter(df, x='x', y='y')
fig.show()

This code renders in about 5min 12.5secs.

Keep in mind that the previous values are from a one time but do not accurately reflect the advantage of WebGL over SVG and vice versa.

We recommend you do your test that matches your environment and computation needs.

Conclusion

In this article, we illustrated how we can create a scatter plot using SVG and WebGL rendering in Plotly.

About the author

John Otieno

My name is John and am a fellow geek like you. I am passionate about all things computers from Hardware, Operating systems to Programming. My dream is to share my knowledge with the world and help out fellow geeks. Follow my content by subscribing to LinuxHint mailing list