Observable Cell Behavior for yield-ed vs return-ed animated svg element

Community Help
1

Reproduction: SVG Yield vs Return / Mario Delgado / Observable

Please explain why:

  • svg1 is re-rendered when referenced again in a cell
  • svg2 is not re-rendered when referenced again in a cell
2

Not sure why, but if you make an HTML cell it updates the SVG element

${svg2}
3

In short, when you write a variable in a cell, you’re not just defining or referencing it like in plain linear JavaScript or Python, you are attaching it to the DOM. So when a variable is already attached and you make a cell with it a second time, Observable does not try to reattach the var or duplicate it. It invokes Inspector to show var type and content.

This is a dynamic Observable feature that I don’t think is explained anywhere except in this notebook by @mootari.

Maybe the inspector should also hint at the bottom of its output that “the variable is already attached (here), see (docs)”. That would make this feature more self-discoverable.

1 Like
4

Very helpful discussion in the notebook. It’s share-able and not officially published yet, so I’ve added comments suggesting that @mootari publish it so it will show up in searches.

1 Like