low framerate using canvas and d3.interval()

I’m trying to port over an old visualization of a simple gravity simulation to observable, and rendering it with canvas rather than svg (so I can increase the complexity/number of particles)

To my surprise, the (stripped-down) observable+canvas version seems to be running slower - rendering about 10 times a second. When I try to monitor the performance (using Chrome’s dev tools) it says that the page is idle the vast majority of the time.

Am I misusing d3.interval (i also tried d3.timer with much the same result), inefficiently using observable or otherwise missing some obvious cause of syncopation?

This notebook discussing animation patterns optimized for the Observable architecture is very helpful in refactoring:

1 Like