[solved] many many rects updated in real time -> slow plot update

[val]

hi i’m plotting a real-time updated spectrogram with d3js

i’m calculatng several tens of thousands of rectangles (growing over time) and then plotting them alongside some other values (currently only one line, but other values will be added as well)

this results in a very slow rendering and updating for all these rectangles

it also results in pixel-unperfect rendering, due to sub-pixel values of the rectangles.

what is the right approach to plot this data efficiently?

see plot attached

i

[mootari]

Have a look at Plot’s Raster mark which produces a canvas:

Raster mark | Observable Plot

[val]

thanks! i went for a solution where i created a <canvas> and used the fillRect function to fill all my rectangles on the canvas!