Multi value inputs & generataors

I forked the multi-value inputs Notebook from @mbostock and saved the generators into an array. Then I see that I can display those values as their own cells. But I can’t interpolate the values into html unless each generator is it’s own cell?

Why?— I don’t understand why the last cell doesn’t work.

Thank you!

Take a look at the generated HTML (by tacking .outerHTML onto the last cell):

<div style="height:33px;width:33px;background:rgb([object Object],[object Object],[object Object]);"></div>

If a cell returns a generator, then the value of the cell will be the most-recently yielded value from this generator (which changes over time). However, if you interpolate a generator directly into HTML, it’ll simply to-string the generator object (not its yield values), giving you the less than useful “[object Object]”. In other words, the reactivity you get from generators in Observable only happens automatically at the cell level, not within a cell. Hence you need separate cells for each generator (or you need to do the reactivity yourself by consuming the generators).

In any case, I’d recommend just using the newer Inputs.form, which will handle this for you: