How to speed up interactive plot rendering

Community Help
1

Hi all,

I’m new to observablehq and am hoping someone might be able to help me. I’ve created an interactive map but the rendering is really slow. I tried using an update function to speed things up but I’m not sure I’ve done it correctly because it hasn’t improved the speed.

Thanks in advance for any help!

Here is the notebook:

2

The 50% opacity is hurting the rendering performance, but it also seems that you draw each circle multiple times, which effectively negates any transparency.

Can you share more details about the data in plant_locs@3.csv? I see a lot of seemingly duplicate entries in there.

3

That did it! When I had merged the power data with the plant locations I hadn’t deleted duplicates. Thank you so much for spotting it!

For the future, is there a way to tell how long different aspects of the rendering are taking? Something like timeit in python?

Thanks again!

4

Some time ago I wrote an FPS counter which you can use like this:

import {fpsCounter, meter} from "@mootari/fps-counter"

{
  const counter = fpsCounter(20); // samples
  const graph = meter(600, 50); // steps, height
  while(true) yield (graph.update(counter.next().value), graph);
}

This will update the graph on every animation frame (because that’s how often generator values are yielded by Observable’s Runtime).

image
image1380×508 55.7 KB

Chrome’s developer tools also have an FPS meter that you can enable through the command menu, but as far as I can tell that one only updates while scrolling.