# Combining Elm and D3.js

**URL:** <https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103>\
**Category:** Learn\
**Created:** [April 24, 2023, 4:14pm UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103 "2023-04-24T16:14:09Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vani\_Murarka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/vani_murarka/32/4777_2.png) [@Vani\_Murarka](https://discourse.elm-lang.org/u/Vani_Murarka)\
**Post date:** [April 24, 2023, 4:14pm UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/1 "2023-04-24T16:14:09Z")

</div>

Is there a way to expose a div created in Elm such that D3.js may generate SVG within that div? The communication between Elm and D3.js can happen via ports.

I’m making an app where the whole UI is Elm generated. Now I want to add data visualisations to this, for which I’d like to use D3.js. I’d prefer to be able to do this without using the [elm-d3](https://github.com/seliopou/elm-d3) library. Since the whole UI is generated by Elm, the place where I want to keep the d3.js generated visualisation is within the Elm generated UI.

Alternatively, does anyone here have experience with the elm-d3? How reliable is it? Are there any D3.js features that cannot be used via elm-d3?

Or can I have D3.js generate SVG as data which is passed to Elm via a port for rendering? That is more of a D3 question, but throwing it in too – incase anyone knows.

TIA

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [April 24, 2023, 4:47pm UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/2 "2023-04-24T16:47:42Z")

</div>

You can use a [custom element](https://guide.elm-lang.org/interop/custom_elements.html) for this. It’s a way of creating an element with Elm that JavaScript can do whatever it wants to inside.

---

<div class="post-metadata">

**Author:** ![Vani\_Murarka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/vani_murarka/32/4777_2.png) [@Vani\_Murarka](https://discourse.elm-lang.org/u/Vani_Murarka)\
**Post date:** [April 25, 2023, 2:27am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/3 "2023-04-25T02:27:57Z")

</div>

Thank you Lydell! I will look into this.

---

<div class="post-metadata">

**Author:** ![klaftertief](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/klaftertief/32/5338_2.png) [@klaftertief](https://discourse.elm-lang.org/u/klaftertief)\
**Post date:** [April 25, 2023, 6:42am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/4 "2023-04-25T06:42:27Z")

</div>

It’s nor D3, but [elm-vegalite 5.4.3](https://package.elm-lang.org/packages/gicentre/elm-vegalite/latest/) and [elm-vega 5.7.1](https://package.elm-lang.org/packages/gicentre/elm-vega/latest/) are other options for creating visualisations.

---

<div class="post-metadata">

**Author:** ![Vani\_Murarka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/vani_murarka/32/4777_2.png) [@Vani\_Murarka](https://discourse.elm-lang.org/u/Vani_Murarka)\
**Post date:** [April 25, 2023, 7:09am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/5 "2023-04-25T07:09:39Z")

</div>

Thank you for telling me about this Klafterif. In case I face issues making D3 work with Elm, good to be aware of this alternative.

---

<div class="post-metadata">

**Author:** ![solificati](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@solificati](https://discourse.elm-lang.org/u/solificati)\
**Post date:** [April 25, 2023, 7:29am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/6 "2023-04-25T07:29:12Z")

</div>

It is not worth it. Just use `elm-charts`. Model of d3 is really incompatible with ideas of Elm. You will trip over dom modification, global variables for behaviours and you can’t use d3 functions synchronously.

---

<div class="post-metadata">

**Author:** ![Vani\_Murarka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/vani_murarka/32/4777_2.png) [@Vani\_Murarka](https://discourse.elm-lang.org/u/Vani_Murarka)\
**Post date:** [April 25, 2023, 7:53am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/7 "2023-04-25T07:53:36Z")

</div>

Oh! That sounds very discouraging. Let’s see. Your words are a good forewarning but I’ll still give it a go. If nothing else I’ll learn to create custom elements as per Lydell’s suggestion.

I like D3 so much. Have been using it since 2012. Don’t want to give it up just because I’ve chosen to adopt Elm. That would be quite a bummer.

---

<div class="post-metadata">

**Author:** ![stoft](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/stoft/32/753_2.png) [@stoft](https://discourse.elm-lang.org/u/stoft)\
**Post date:** [April 25, 2023, 8:50am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/8 "2023-04-25T08:50:32Z")

</div>

You may also want to take a look at [elm-visualization](https://elm.dmy.fr/packages/gampleman/elm-visualization/latest/), I found that at least the force directed graph was very similar to D3’s FDG and quite easy to transition to. And there are some pretty good examples with code available.

---

<div class="post-metadata">

**Author:** ![wondible](https://avatars.discourse-cdn.com/v4/letter/w/e9c0ed/32.png) [@wondible](https://discourse.elm-lang.org/u/wondible)\
**Post date:** [April 25, 2023, 12:11pm UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/9 "2023-04-25T12:11:26Z")

</div>

I use leaflet maps by reserving a div with id and Html.Keyed (I’m actually using Element.Keyed from elm-ui) I key elements all the way to the root to try and make sure elem doesn’t do anything with the content. I’ve got a pretty simple layout though - just the map and a toggle-able sidebar.

---

<div class="post-metadata">

**Author:** ![Vani\_Murarka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/vani_murarka/32/4777_2.png) [@Vani\_Murarka](https://discourse.elm-lang.org/u/Vani_Murarka)\
**Post date:** [April 25, 2023, 12:31pm UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/10 "2023-04-25T12:31:18Z")

</div>

Had seen a post about Html.keyed on Stack Overflow that I didn’t completely follow. Could you share some sample code without elm-ui?

---

<div class="post-metadata">

**Author:** ![gampleman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/gampleman/32/43_2.png) [@gampleman](https://discourse.elm-lang.org/u/gampleman)\
**Post date:** [April 26, 2023, 8:58am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/11 "2023-04-26T08:58:11Z")

</div>

elm-d3 is not compatible with Elm versions above 0.15 - which is probably not something you should be attempting to use at this point.

[gampleman/elm-visualization](https://package.elm-lang.org/packages/gampleman/elm-visualization/latest/) is a good bet for most things you would use D3 for, since it’s conceptually relatively similar, but embraces more functional patterns and VDOM based rendering for a smoother Elm interior story. The #visualization slack channel on the Elm slack is a good place for asking questions, you may also like the examples gallery:

> **[elm-visualization Examples](https://elm-visualization.netlify.app)**
>
> Examples of using elm-visualization to make charts and data graphics

---

<div class="post-metadata">

**Author:** ![Vani\_Murarka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/vani_murarka/32/4777_2.png) [@Vani\_Murarka](https://discourse.elm-lang.org/u/Vani_Murarka)\
**Post date:** [April 26, 2023, 9:35am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/12 "2023-04-26T09:35:21Z")

</div>

Oh, that is bad news about elm-d3. Thank you for all the info and links.

So elm-visualization is your package. I don’t know whether it’s proper to ask a question like this, but you are at present committed to maintaining it?

---

<div class="post-metadata">

**Author:** ![gampleman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/gampleman/32/43_2.png) [@gampleman](https://discourse.elm-lang.org/u/gampleman)\
**Post date:** [April 26, 2023, 10:13am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/13 "2023-04-26T10:13:08Z")

</div>

> I don’t know whether it’s proper to ask a question like this, but you are at present committed to maintaining it?

Yes, although the package has been quite stable for a long time. I have new features planned, but am looking for sponsors to kick start new feature development, so I would recommend (as always) to evaluate it based on what’s already there.

---

<div class="post-metadata">

**Author:** ![wondible](https://avatars.discourse-cdn.com/v4/letter/w/e9c0ed/32.png) [@wondible](https://discourse.elm-lang.org/u/wondible)\
**Post date:** [April 26, 2023, 11:48am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/14 "2023-04-26T11:48:17Z")

</div>

> [@Vani\_Murarka](#):
>
> Could you share some sample code without elm-ui?

> <https://github.com/JustinLove/ohol-map/blob/e9688eb7876fd236ce461390962d99631d63de7f/src/View.elm#L143>

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [May 6, 2023, 11:48am UTC](https://discourse.elm-lang.org/t/combining-elm-and-d3-js/9103/15 "2023-05-06T11:48:29Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.