## Friday, May 10, 2019

Published 9:34 PM by with 0 comment

# How to Make Plotly Faster with Many Traces?

Plotly slows down with a lot of traces. I found a workaround to speed it up in certain situations.

#### Basic idea

If you need to split traces for whatever reason (e.g., you don't want the interpolating line to draw right to left), a method that is faster than just making a new trace each time the plot moves to the left is to add a NaN value to split the trace. Plotly works much faster this way.

#### Specific use case I had

The problem I was working on was visualizing a massive number of frequency sweeps. Basically, you measure a signal at a bunch of different frequencies from low to high, change your configuration slightly (e.g., turn on a preamp), then measure again, and repeat for a lot of different configurations. It looks something like this:

As you can see, you ideally want each trace to be separated. If you made it all one trace, the end point of one trace and the starting point of the next trace would be connected by a line like below:

That's ugly and hard to read. A way around that is to add a NaN in between the point at the end of one line on the right and the beginning of the next line on the left. Here is a simple example code snippet:

```let x = [];
let y = [];

for (let i = 0; i < 1000; i++) {
x.push(i%100);
y.push(5*Math.random() + 10*(i/100) + (i%1500));
if (i%100 === 99) {
x.push(NaN);
y.push(NaN);
}
}

Plotly.react('plot', [{ x: x, y: y, type: 'scattergl', line: { color: 'magenta' }}], { showlegend: false });
```

Try running that with the if statement there, then commented out (code is here).

#### Example implementation

I used the NaN trick above to plot thousands of traces without the many-trace slowdown you normally see in plotly. Basically, I wanted traces to ramp from left to right, have the left and right sides be different colors, and have no interpolating lines going from right to left. If you click the checkbox a couple of times, you can clearly see the performance improvement with the NaN trick. You can also see it by hovering over the plot and moving the mouse around. Without the NaN trick, you get really noticeable lag.