What does "yield" do?

Community Help
#1

There seem to be 2 ways of rendering a chart in Observable:

  1. Returning Container.node() at the end of your chart-drawing function

  2. Calling your chart-drawing function within a block of html, e.g. Elijah Meeks - Particle Sankey / Ben Davis / Observable

However, the latter will only work if you use “yield” before your html tags.
E.g.:
{yield html
<div id = 'container'> </div>
drawChart()}

Why is this? What job is yield doing here?

Many thanks,
Ben

1 Like
#2

yield is a Javascript constructed used to pause and resume a generator function*. It’s described in the context of Observable in their Introduction to Generators notebook. It’s used in the Particle Sankey notebook to allow the generator cell to run repeatedly to yield the animation.

1 Like
#3

Thanks Mark! I’ll check out that notebook.

RE: the Particle Sankey notebook. Would the animation not work if the cell was run only run once, since the animations are driven by d3.timer?

1 Like
#4

In fact, the flowing dots continue to run without a return, since they are driven by the timer. Everything in the drawChart command, before the definition of tick, though, seems to stop.

I don’t think that code is really idiomatic Observable - probably because it’s been ported from an old-style block.

1 Like
#5

Here is an article on animation that may help:

1 Like