# Reactives, timed events and updating vis

**URL:** <https://talk.observablehq.com/t/reactives-timed-events-and-updating-vis/402>\
**Category:** Uncategorized\
**Created:** [February 22, 2018, 1:52pm UTC](https://talk.observablehq.com/t/reactives-timed-events-and-updating-vis/402 "2018-02-22T13:52:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sdwfrost](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/sdwfrost/32/139_2.png) [@sdwfrost](https://talk.observablehq.com/u/sdwfrost)\
**Post date:** [February 22, 2018, 1:52pm UTC](https://talk.observablehq.com/t/reactives-timed-events-and-updating-vis/402/1 "2018-02-22T13:52:06Z")

</div>

Dear All,

I have a notebook visualising a dynamic graph:

[https://beta.observablehq.com/@sdwfrost/visualisation-of-contact-networks](https://beta.observablehq.com/@sdwfrost/visualisation-of-contact-networks)

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.

Best  
Simon

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [February 22, 2018, 9:23pm UTC](https://talk.observablehq.com/t/reactives-timed-events-and-updating-vis/402/2 "2018-02-22T21:23:45Z")

</div>

Hey Simon,

Here’s a forked version that addresses your concerns:

[https://beta.observablehq.com/@jashkenas/visualisation-of-contact-networks](https://beta.observablehq.com/@jashkenas/visualisation-of-contact-networks)

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](https://beta.observablehq.com/@tmcw/untitled/5). 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.

Using `this`, and Mike’s reference for modifying a force layout: [https://bl.ocks.org/mbostock/1095795](https://bl.ocks.org/mbostock/1095795)

… 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](https://beta.observablehq.com/@mbostock/introduction-to-asynchronous-iteration) 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.

Let me know if you have any questions!

---

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [February 23, 2018, 1:30pm UTC](https://talk.observablehq.com/t/reactives-timed-events-and-updating-vis/402/3 "2018-02-23T13:30:56Z")

</div>

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](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.