Each edge is labelled with the hour of the day, and I create links in the network if they match the hour as set using a slider. At the moment, the graph is made from scratch every time I move the slider. What’s the best way to separate initialisation from updating so I can enter and exit links to get smooth transitions between the networks?
I’d also like to ‘play’ the simulation forward in addition to using a slider, which I am doing using a mutable; however things aren’t working smoothly as I’m not sure about the best way to plumb the slider and the mutable together.
The best way to separate initialization from updating, within a cell, is to rely on this. In an Observable notebook, this is the previous value of the cell. So, for a cell that is a D3 SVG visualization, this is undefined the first time the cell runs, and can be the running SVG visualization on every cell re-evaluation thereafter.
… you wind up with a cell that reuses its own svg element, force simulation and link list, and can restart the simulation when the list of links changes.
As for the playable slider, I’ve relied on the slider’s value as the mutable source of truth, and have a little playloop as an asynchronous generator that updates the slider’s value before waiting two seconds to proceed.
There are other ways to glue this together, but this seemed like the easiest one that required minimal-ish changes to your code.
That’s really interesting about this. I ran into the same question and ended up initializing the svg in one cell, and then selecting the svg from another cell, where I wrote the enter and update. https://beta.observablehq.com/@gallowayevan/beeswarm-with-dodge-and-transitions
However, it felt like a bit of a workaround, so the ability to use this for updating seems nice.