Combining Elm and D3.js

Learn
1

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 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

2

You can use a custom element for this. It’s a way of creating an element with Elm that JavaScript can do whatever it wants to inside.

2 Likes
3

Thank you Lydell! I will look into this.

4

It’s nor D3, but elm-vegalite 5.4.3 and elm-vega 5.7.1 are other options for creating visualisations.

1 Like
5

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.

6

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.

1 Like
7

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.

8

You may also want to take a look at elm-visualization, 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.

1 Like
9

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.

1 Like
10

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?

11

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 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:

12

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?

13

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.

1 Like
14
1 Like
15

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