In D3.js and Phoenix (2019), @peerreynders provided a way to link up the JS library to Phoenix. I’m wondering whether the state of the art may have progressed since then.

Looking on hex.pm, I don’t see anything listed for ds, ds.js, or dsjs. So, I’ve been speculating on what the interface should be. (ducks)

JS embedding

Although the idea of LiveView is to avoid the hassles and perils of JS, one possible approach would be to accept the JS notation and embed it in the client-side code. For example, it seems like phx-hook could work for this, eg:

<div phx-hook="my-javascript-hook">
  select('.chart').selectAll('div')...
</div>

This approach is simple and direct, so it should be relatively easy to create and maintain. There is also the advantage that D3 code can be used “as-is”, easing the programming burden.

Pipeline Magic

Alternatively, one might might wish for a way to write Elixir pipelines and have them turn into JS dot notation, eg:

foo |> select(".chart") |> selectAll("div") |> ...

I assume that this could be managed using macros and related magic. However, I’m not convinced that it brings much value to the party. For example, is it likely that there are Elixir-side things that one might want to add to a pipeline, etc? Dunno…

Anyway, I thought I’d toss this topic back out for discussion…

-r