# Dynamically create variables which are observed?

**URL:** <https://talk.observablehq.com/t/dynamically-create-variables-which-are-observed/663>\
**Category:** Help\
**Created:** [April 20, 2018, 5:18pm UTC](https://talk.observablehq.com/t/dynamically-create-variables-which-are-observed/663 "2018-04-20T17:18:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [April 20, 2018, 5:18pm UTC](https://talk.observablehq.com/t/dynamically-create-variables-which-are-observed/663/1 "2018-04-20T17:18:19Z")

</div>

Hi, first I want to thank you all for creating this amazing tool. It surprisingly simplified my flow in many ways

Right now I am tackling with one issue

I want to use this syntax

```
md`

${svg`
 <svg width=200 height="200">
<rect width=100 height=${animate(100)} />
 </svg>  
`}
`

```

To create charts which would have corresponding properties anymated

Animate itself is an async function which yields values

But I can’t seem to make it work.

If I try to create a separate cell for this and assign function result to it

`animated = animate(100)`

Then it works using this syntax

```
 md`
${svg`
 <svg width=200 height="200">
    <rect width=100 height=${animated} />
 </svg>  
`}

`

```

But the thing is I don’t want to create separate cell variables when I try to animate some property (a.k.a. asynchronously assign some value )

How can I achieve the desired result?

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [April 20, 2018, 6:07pm UTC](https://talk.observablehq.com/t/dynamically-create-variables-which-are-observed/663/2 "2018-04-20T18:07:29Z")

</div>

Hi David!

Async & generator functions aren’t expanded to their values in Observable, because it’s likely that developers want to consume their outputs some other way - like with a `for of` loop or re-yielding their values with `yield *`. So calling those methods in a separate cell - as you do in this notebook - is the best way to expose the values they return, if you want to keep them as methods.

But if you don’t need them to be methods, you can use blocks instead:

```auto
animate = {
  let value = 100;
  let defaultTime = 40000;
  let defaultDelay = 10;
  let tickCounts = defaultTime/defaultDelay;
  for (let i = 0; i <= tickCounts; ++i) {
    await Promises.delay(defaultDelay);
    yield i*value/tickCounts;
  }
  yield value;
}

```

Blocks, unlike methods, _are_ exposed as their values, and [here’s a fork that demonstrates that in this notebook](https://beta.observablehq.com/@tmcw/animating-static-svg-using-generator). That said, they don’t take parameters like functions do, so you wouldn’t be able to customize `delay` and such in the same way as you’re doing now in this notebook.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [April 20, 2018, 7:02pm UTC](https://talk.observablehq.com/t/dynamically-create-variables-which-are-observed/663/3 "2018-04-20T19:02:18Z")

</div>

Here’s a notebook that explains the difference between _generator cells_, _generator functions_ and _generator objects_ (or _generators_):

> **[Generator Cells, Functions and Objects](https://observablehq.com/@mbostock/generator-cells-functions-and-objects)**
>
> An Observable notebook.

---

<div class="post-metadata">

**Author:** ![bumbeishvili](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bumbeishvili/32/4220_2.png) [@bumbeishvili](https://talk.observablehq.com/u/bumbeishvili)\
**Post date:** [April 20, 2018, 9:13pm UTC](https://talk.observablehq.com/t/dynamically-create-variables-which-are-observed/663/4 "2018-04-20T21:13:16Z")

</div>

Thanks  
Tom, mike

I will try to approach this topic differently