Observable plot re-rendering when data changes

Community Help
1

Hello all :slight_smile:

I have some data that is updated via a generator, and I’m using a mutable data cell that stores the full dataset that I’m later ploting using the Plot.

I’m trying to understand why the Plot is not updated when the data cell changes, I’d expect it to be modified, since the Plot cell depends on that data.

Here’s a minimal example notebook:

I know how to solve this using another generator for the plot (like below), I’m mostly trying to understand why the above is wrong.

{
  do {
    yield Plot.plot({
      marks: [
        Plot.lineY(
         data, 
          {y: "hello"},
        )
      ]
    })
    await Promises.delay(100)
  } while(true)
}

Thank you very much!

2

Mutable cells don’t trigger re-renders when their value changes; they trigger re-renders when they are assigned.

You would need to change this cell

mutable data.push({hello: a})

to one that assigns to data. You could do this for example:

mutable data = [...mutable data, {hello: a}]

However, I would suggest you avoid using mutable if you can avoid it. Instead, in this case, I would do something like this:

data = {
  let values = [];
  while (true) {
    yield values;
    values.push({hello: Math.random()});
    await Promises.delay(1000);
  }
}
1 Like
3

I just made a fork of your notebook that works a bit like mythmon describes: Untitled / Robert Kosara | Observable

You don’t need mutable for a value to change. Can you describe what you’re trying to accomplish?

2 Likes
4

Thank you both! This is really nice!
@eagereyes I think it’s mostly lack of experience with JavaScript :stuck_out_tongue:

5

It would be amazing if you could re post here the " fixed" notebook (or the same one you used as simplified example) with the corrected version for the posterity (or chatgp?)