🏠 back to Observable

Zoom function for dynamic data in circle packing does not work

Hello, I am having trouble implementing a zoom function for dynamic data using this example Zoomable Circle Packing / D3 / Observable. What I mean by dynamic data is that I have an interval that runs every 4 seconds, in that interval, I am modifying the data and updating the visualization. The zoom function in that example works great for static data but not so much for dynamic data. Any suggestions on how to tackle this would be appreciated.

Hello, I suppose the problem comes from yielding a new version of the chart when new data comes in.

There are multiple ways to approach the problem, but in most cases I would recommend to create a chart (the SVG and its associated zoom system) that doesn’t depend on the data cell, and to return it with an associated update(data) function, that you then call whenever the data changes. See Modifying a Force-Directed Graph / D3 / Observable for an example of this technique.

Another possibility is to use this, which represents the previous value of the chart, to avoid regenerating everything on data updates; this approach is developed in D3 Chart Updates in Observable / Interactive Info Vis / Observable.

1 Like