Friday, May 10, 2019

Published May 10, 2019 by with 1 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++) {
  y.push(5*Math.random() + 10*(i/100) + (i%1500));
  if (i%100 === 99) {

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.


This does lose the ability to get the trace id from the default hover or from a default legend. You can include arbitrary values in traces so you can still get it in a custom hover or click, and you can always create your own legend pretty easily.


1 comment:

  1. สล็อตออนไลน์ แต่ละเกม มีการจ่ายเงินต่างกัน ก่อนที่จะเล่น สล็อ ควรอ่านรีวิวที่อธิบาย ว่าเล่น สล็อตแตกง่าย มีเคล็ดลับ วิธีการเล่นอย่างไร ให้ได้เงินจริง ปล่อยรางวัล แจ็กพอตบ่อย มีโบนัส และ ฟรีสปิน มากแน่นอนว่า โอกาสที่จะชนะ เกมสล็อต นั้น ขึ้นอยู่กับทักษะ และโชคของผู้เล่น แต่เปอร์เซ็นต์การ