# Chart-generating function outside Observable

**URL:** <https://talk.observablehq.com/t/chart-generating-function-outside-observable/7019>\
**Category:** Help\
**Created:** [September 9, 2022, 9:13am UTC](https://talk.observablehq.com/t/chart-generating-function-outside-observable/7019 "2022-09-09T09:13:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mavromatika](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mavromatika/32/6924_2.png) [@Mavromatika](https://talk.observablehq.com/u/Mavromatika)\
**Post date:** [September 9, 2022, 9:13am UTC](https://talk.observablehq.com/t/chart-generating-function-outside-observable/7019/1 "2022-09-09T09:13:31Z")

</div>

I’m trying to translate a notebook I’ve made into plain javascript to include it in a webpage. I’d like to use a function similar to the `calendar` one found in this notebook ([Calendar / D3 | Observable](https://observablehq.com/@d3/calendar)), that is with destructured arguments, and reusable.

My problem is that I don’t know what happens in Observable after `svg.node()` has been returned. My attempts with plain d3 in a webpage have all failed. I tried d3.selection.call( myFunction ) and d3.selection.append( myFunction ).

Thanks in advance for your help.

---

<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:** [September 9, 2022, 9:56am UTC](https://talk.observablehq.com/t/chart-generating-function-outside-observable/7019/2 "2022-09-09T09:56:55Z")

</div>

Observable’s Inspector will read the return value (the DOM element) and attach it to the cell’s output wrapper.

In your case you’ll have to append the returned element somewhere in the DOM, e.g.:

```javascript
document.body.appendChild(Calendar(data))

```

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [September 9, 2022, 9:58am UTC](https://talk.observablehq.com/t/chart-generating-function-outside-observable/7019/3 "2022-09-09T09:58:14Z")

</div>

Here’s an example:

> **[em](https://bl.ocks.org/Fil/a14dee6e7e895c3e5e8d48a012b68f16)**
>
> Philippe Rivière’s Block a14dee6e7e895c3e5e8d48a012b68f16