Search code examples
pythonsvgplotlyscatter-plot

Plotly scatter with many datapoints yield blurry svg

When I export a scatterplot with 10000 datapoints to svg with fig.write_image("filename.svg") as recommended by plotly, I get a blurry svg. Downsampling the data to 1000 datapoints does yield a nice vector image that remains sharp. The limit between sharp and pixelated images lies somewhere between 1000 and 1500 scatterpoints since downsampling to 1500 yields a pixelated image again.

How can I avoid this since I'd like to export figures with more than 1000 datapoints.

import pandas as pd
import plotly.express as px
import numpy as np
df = pd.DataFrame(np.random.randn(10000, 2), columns=list('XY'))
fig =px.scatter(df, x='X', y='Y')
fig.write_image("images/fig1.svg")

10000 points

screenshot of sharp svg with 10000 datapoints

1500 points

screenshot of sharp svg with 1000 datapoints

1000 points

screenshot of sharp svg with 1000 datapoints

(I had to make screenshots since stackoverflow does not allow .svg images)

Solution

  • I believe the answer lies here in the plotly documentation for px.scatter...

    render_mode (str) – One of 'auto', 'svg' or 'webgl', default 'auto' Controls the browser API used to draw marks. 'svg’ is appropriate for figures of less than 1000 data points, and will allow for fully-vectorized output. 'webgl' is likely necessary for acceptable performance above 1000 points but rasterizes part of the output. 'auto' uses heuristics to choose the mode.

    If you add render_mode = 'svg' you should see this pixilation go away.

    fig =px.scatter(df, x='X', y='Y', render_mode = 'svg')