# Best practice for library that depends on d3

**URL:** https://talk.observablehq.com/t/best-practice-for-library-that-depends-on-d3/7704
**Category:** Help
**Created:** [March 7, 2023, 4:52pm UTC](https://talk.observablehq.com/t/best-practice-for-library-that-depends-on-d3/7704 "2023-03-07T16:52:04Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mxposed](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mxposed/32/7523_2.png) [@mxposed](https://talk.observablehq.com/u/mxposed)
#### Post date: [March 7, 2023, 4:52pm UTC](https://talk.observablehq.com/t/best-practice-for-library-that-depends-on-d3/7704/1 "2023-03-07T16:52:04Z")

</div>

Hi, thank you for these amazing set of tools!  
I’m writing a library that should be easily usable in notebooks (and quarto ojs cells), but I stumble on the best way to build & package this library, because it has a dependency on d3.

I wonder what are the best practices for that? I couldn’t really find examples like this.

My current implementation leads to this:

```auto
funkyheatmap = (await require('d3@7').then(d3 => {
  window.d3 = d3;
  return import('/funkyheatmap.js');
})).default;

```

And the library is build with d3 dependency aliased to global object `d3`.

Hope my question makes sense.  
Thank you!

---

<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: [March 7, 2023, 5:09pm UTC](https://talk.observablehq.com/t/best-practice-for-library-that-depends-on-d3/7704/2 "2023-03-07T17:09:56Z")

</div>

Mark d3 as [peerDependency](https://nodejs.org/es/blog/npm/peer-dependencies/) and import it. Bundlers should take care of resolving and injecting the dependencies.

---

<div class="post-metadata">

### Author: ![mxposed](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mxposed/32/7523_2.png) [@mxposed](https://talk.observablehq.com/u/mxposed)
#### Post date: [March 7, 2023, 6:22pm UTC](https://talk.observablehq.com/t/best-practice-for-library-that-depends-on-d3/7704/3 "2023-03-07T18:22:00Z")

</div>

Thanks! Is there an example somewhere?

I’m trying to get to

```auto
funkyheatmap = import('/funkyheatmap.js');

```

without bundling a copy of d3 inside that file.

---

<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: [March 7, 2023, 6:37pm UTC](https://talk.observablehq.com/t/best-practice-for-library-that-depends-on-d3/7704/4 "2023-03-07T18:37:49Z")

</div>

You will need some level of bundling. Either by bundling as UMD and making sure that you pass in d3 as dependency when requiring your package, or by using any of the bundling services like esm.sh, skypack.dev etc.

There are a few d3 plugins out there that are published to npm. I’d probably look to those for examples.