webgl-vs-svg.md

jupyter

jupytext kernelspec language_info plotly notebook_metadata_filter text_representation all extension format_name format_version jupytext_version .md markdown 1.1 1.1.7 display_name language name Python 3 python python3 codemirror_mode file_extension mimetype name nbconvert_exporter pygments_lexer version name version ipython 3 .py text/x-python python python ipython3 3.6.5 description display_as language layout name order permalink thumbnail Implement WebGL for increased speed, improved interactivity, and the ability to plot even more data! basic python base WebGL vs SVG 14 python/webgl-vs-svg/ thumbnail/webgl.jpg

Here we show that it is possible to represent millions of points with WebGL. For larger datasets, or for a clearer visualization of the density of points, it is also possible to use datashader.

Compare WebGL and SVG

Checkout this notebook to compare WebGL and SVG scatter plots with 75,000 random data points

WebGL with Plotly Express

The rendermode argument to supported Plotly Express functions can be used to enable WebGL rendering.

Here is an example that creates a 100,000 point scatter plot using Plotly Express with WebGL rendering enabled.

import plotly.express as px

import pandas as pd
import numpy as np
np.random.seed(1)

N = 100000

df = pd.DataFrame(dict(x=np.random.randn(N),
                       y=np.random.randn(N)))

fig = px.scatter(df, x="x", y="y", render_mode='webgl')

fig.update_traces(marker_line=dict(width=1, color='DarkSlateGray'))

fig.show()

WebGL with 100,000 points

The Scattergl trace type can be used to create a WebGL enabled scatter plot.

import plotly.graph_objects as go

import numpy as np

N = 100000

# Create figure
fig = go.Figure()

fig.add_trace(
    go.Scattergl(
        x = np.random.randn(N),
        y = np.random.randn(N),
        mode = 'markers',
        marker = dict(
            line = dict(
                width = 1,
                color = 'DarkSlateGrey')
        )
    )
)

fig.show()

WebGL with 1 Million Points

import plotly.graph_objects as go

import numpy as np

N = 1000000

# Create figure
fig = go.Figure()

fig.add_trace(
    go.Scattergl(
        x = np.random.randn(N),
        y = np.random.randn(N),
        mode = 'markers',
        marker = dict(
            line = dict(
                width = 1,
                color = 'DarkSlateGrey')
        )
    )
)

fig.show()

WebGL with many traces

import plotly.graph_objects as go

import numpy as np

fig = go.Figure()

trace_num = 10
point_num = 5000
for i in range(trace_num):
    fig.add_trace(
        go.Scattergl(
                x = np.linspace(0, 1, point_num),
                y = np.random.randn(point_num)+(i*5)
        )
    )

fig.update_layout(showlegend=False)

fig.show()

Reference

See https://plotly.com/python/reference/#scattergl for more information and chart attribute options!