# Get value of variable set in script from one cell in a different cell without using \`mutable\`

**URL:** https://talk.observablehq.com/t/get-value-of-variable-set-in-script-from-one-cell-in-a-different-cell-without-using-mutable/5897
**Category:** Help
**Created:** [December 3, 2021, 5:39am UTC](https://talk.observablehq.com/t/get-value-of-variable-set-in-script-from-one-cell-in-a-different-cell-without-using-mutable/5897 "2021-12-03T05:39:25Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![emilyd5077](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/emilyd5077/32/5851_2.png) [@emilyd5077](https://talk.observablehq.com/u/emilyd5077)
#### Post date: [December 3, 2021, 5:39am UTC](https://talk.observablehq.com/t/get-value-of-variable-set-in-script-from-one-cell-in-a-different-cell-without-using-mutable/5897/1 "2021-12-03T05:39:25Z")

</div>

Hello! I’ll preface this by saying that I’m new to Observable (and Observable Talk), and so apologies if this topic has already been addressed elsewhere and I’m missing it.

I’m building a notebook that explores a data set via an interactive visualization (built with D3). The interactive visualization is the output from one of the Observable cells. The data set includes a very long text string (a speech transcript) for each entry; in this visualization, users can click on an element in the interactive visualization, and I’m trying to get the speech transcript to display in a scrollable text box as an output from the subsequent cell. The click event sets a variable `mutable DisplayText` to be the transcript string from the selected data element. I can get the selected text to display in the text box output from the subsequent cell this way; however, the issue is that I have to declare the `mutable DisplayText` variable in a cell (Cell 1, below) prior to using it in my visualization code (Cell 2, below), and it also updates and displays the long transcript text in that initial cell (Cell 1, below) when you click on the visualization. It seems like I can’t hide the output of the initial cell, but having the transcript text show up here is irritating. Is there any way to get the `DisplayText` value in my text box cell (Cell 3, below) without using `mutable`?

This is how I have it implemented so far:  
Cell 1:

```auto
mutable DisplayText = "" // the output of this cell also shows the transcript text - I don't want this.

```

Cell 2:  
[Relevant part of code for visualization]

```auto
{
   svg.selectAll('circle')
      .data(data)
      .join('circle')
      .on('click', function(event, d) {
           mutable DisplayText = d.Transcript // d.Transcript is the transcript text string I want to display
       });
 }

```

Cell 3:

```auto
html`
  <div style="height:300px;width:900px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;" id="TransriptBox1">
  ${DisplayText} // This is the only place I want the transcript text to display
  </div>`

```

---

<div class="post-metadata">

### Author: ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)
#### Post date: [December 3, 2021, 1:53pm UTC](https://talk.observablehq.com/t/get-value-of-variable-set-in-script-from-one-cell-in-a-different-cell-without-using-mutable/5897/2 "2021-12-03T13:53:06Z")

</div>

To avoid `mutable` altogether, you might name your `html` cell, `d3.select` it in your response to the click, and then change it directly there. Thus, your `html` cell might be:

```
info = html``

```

Then, your response to the click might look like:

```
.on("click", function (event, d) {
  d3.select(info).text(d.Transcript);
});

```

Here’s a similar example where I base the info text on a title element, rather than a transcript.

https://observablehq.com/embed/826c7c7a751a8578?cells=plot%2Cinfo

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [December 3, 2021, 5:01pm UTC](https://talk.observablehq.com/t/get-value-of-variable-set-in-script-from-one-cell-in-a-different-cell-without-using-mutable/5897/3 "2021-12-03T17:01:10Z")

</div>

I recommend Observable’s `viewof` macro:

```auto
viewof DisplayText = {
   const svg = /* ... */;
   svg.selectAll('circle')
      .data(data)
      .join('circle')
      .on('click', function(event, d) {
           svg
             .property('value', d.Transcript) // Assign text to (<svg>).value
             .dispatch('input'); // Notify Observable that you updated the value
       });
  return svg.node();
}

```

Now you can get rid of Cell 1. No changes to Cell 3 are necessary.

To learn more about `viewof`, have a look at this introduction:

> **[What has viewof ever done for us?!](https://observablehq.com/@mootari/what-has-viewof-ever-done-for-us)**
>
> A short introduction to \\\`viewof\\\`, in response to this post. \\\`viewof\\\` is an Observable macro (i.e., a "magic word") that allows you to create user interfaces for your values. Observable cells by themselves are rather boring: they can only store...

---

<div class="post-metadata">

### Author: ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)
#### Post date: [December 3, 2021, 5:51pm UTC](https://talk.observablehq.com/t/get-value-of-variable-set-in-script-from-one-cell-in-a-different-cell-without-using-mutable/5897/4 "2021-12-03T17:51:17Z")

</div>

Here is a more direct implementation of how you can programatically set another cells value and initiate data flow on it using viewof magic. This is a bit closer to what you were asking than @mootari method (which is probably neater over all but not always applicable)

> **[How to 1-of-n switch Dataflow streams on Observable](https://observablehq.com/@tomlarkworthy/switch-dataflow)**
>
> In this series, I will explore programming techniques for the notebook platform Observable. Today I am looking at how to direct a reactive Dataflow stream to one-of-n downstream cells. This article assumes you are familiar with Observable's...

(Mcmcclur’s also valid way is doing direct DOM manipulation which is completely outside the observable runtime, which is portable to any webpage but does not engage the Observable reactive machinery)

---

<div class="post-metadata">

### Author: ![emilyd5077](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/emilyd5077/32/5851_2.png) [@emilyd5077](https://talk.observablehq.com/u/emilyd5077)
#### Post date: [December 6, 2021, 12:25am UTC](https://talk.observablehq.com/t/get-value-of-variable-set-in-script-from-one-cell-in-a-different-cell-without-using-mutable/5897/5 "2021-12-06T00:25:51Z")

</div>

Thank you! This worked perfectly - and I was also able to modify the HTML cell to include a few different div elements with different interactive text.

---

<div class="post-metadata">

### Author: ![emilyd5077](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/emilyd5077/32/5851_2.png) [@emilyd5077](https://talk.observablehq.com/u/emilyd5077)
#### Post date: [December 6, 2021, 12:26am UTC](https://talk.observablehq.com/t/get-value-of-variable-set-in-script-from-one-cell-in-a-different-cell-without-using-mutable/5897/6 "2021-12-06T00:26:56Z")

</div>

Thanks @mootari and @tomlarkworthy as well - the links you shared for viewof are something I’ll definitely look more into as well. Much appreciated!
