# Check out Observable! Could Elm be used for this sort of thing?

**URL:** <https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379>\
**Category:** Show and Tell\
**Created:** [March 24, 2019, 6:56am UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379 "2019-03-24T06:56:58Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon5324703](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@anon5324703](https://discourse.elm-lang.org/u/anon5324703)\
**Post date:** [March 24, 2019, 6:56am UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/1 "2019-03-24T06:56:58Z")

</div>

[https://observablehq.com/](https://observablehq.com/)  
An embeddable, live, reactive notebook for the browser.

Just heard of this tool, looks awesome! I think @evancz mentioned that something like a jupyter notebook would be great for Elm!

In the guides, they discuss many of the principles of functional programming. Do you think Elm could be suited for this sort of domain?

Short tangent,  
In your own opinion, how does `elm-visualization` compare to D3.js? They are strictly different paradigms, the latter being highly procedural. What are the advantages of each?

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [March 24, 2019, 5:34pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/2 "2019-03-24T17:34:09Z")

</div>

You might find this talk interesting:

[https://youtu.be/p8cHarclNnc](https://youtu.be/p8cHarclNnc)

---

<div class="post-metadata">

**Author:** ![anon5324703](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@anon5324703](https://discourse.elm-lang.org/u/anon5324703)\
**Post date:** [March 24, 2019, 8:37pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/3 "2019-03-24T20:37:23Z")

</div>

That is definitely promising

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jwolondon/32/605_2.png) [@jwoLondon](https://discourse.elm-lang.org/u/jwoLondon)\
**Post date:** [March 24, 2019, 10:01pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/4 "2019-03-24T22:01:31Z")

</div>

There’s also [litvis](https://github.com/gicentre/litvis), which allows you to embed literate elm in formatted markdown output (also see [Alex Kachkaev’s talk](https://youtu.be/K-yoLxnm95A) on this at Elm-Europe 2018).

It also allows you to embed d3-like [Vega](https://vega.github.io/vega/) in the same environment (via [elm-vega](https://package.elm-lang.org/packages/gicentre/elm-vega/latest/)).

---

<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:** [March 25, 2019, 10:51am UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/5 "2019-03-25T10:51:53Z")

</div>

I’m a big fan of Observable and also author of elm-visualization.

> Do you think Elm could be suited for this sort of domain?

In the long term yes. But there is a long way to go before it can compete head to head with JS on what I would call explorative programming. The main Elm brings to the table for application programming is stability and maintainability. Those are less useful for building a notebook. Also in my experience for notebooks the Elm Architecture kind of gets in the way as most notebooks need to perform effects in various ways.

> In your own opinion, how does `elm-visualization` compare to D3.js? They are strictly different paradigms, the latter being highly procedural. What are the advantages of each?

elm-visualization is highly inspired by D3. One thing to understand about D3 is that it is a whole bunch of libraries covering all sorts of things, many exist because at the time they were written there were no good solutions to these problems. So for example D3 has a notion of “selections” which exist to manage DOM mutation. In my opinion this is the trickiest part of D3 and the one that elm-visulization doesn’t have, since in Elm you have the virtual DOM which is a much easier abstraction.

On the other hand, most of the core bits of D3 that actually implement **visualization** algorithms are fairly functional in nature. They mostly follow the pattern of:

```javascript
const fun = d3.makeFun(someConfig)
                   .setSomeMoreConfig(3);

const output = fun(input);

```

This is essentialy the Elm type of:

```elm
fun : Config -> Input -> Output

```

except it allows you to mutate the config after it has been partially applied.

So in essence elm-visualization and D3 are quite similar - one is in Elm and omits a lot of the legacy cruft (and a lot of useful features too as I haven’t had time to implement everything I’d like!) the other in JS and is somewhat tied to its own specific DOM management system).

---

<div class="post-metadata">

**Author:** ![anon5324703](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@anon5324703](https://discourse.elm-lang.org/u/anon5324703)\
**Post date:** [March 25, 2019, 12:49pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/6 "2019-03-25T12:49:54Z")

</div>

@gampleman, do you see elm-visualization heading in this direction, or do you see another solution emerging that better takes advantage of elm’s strengths?

---

<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:** [March 25, 2019, 3:43pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/7 "2019-03-25T15:43:33Z")

</div>

What direction?

* * *

---

<div class="post-metadata">

**Author:** ![anon5324703](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@anon5324703](https://discourse.elm-lang.org/u/anon5324703)\
**Post date:** [March 25, 2019, 7:26pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/8 "2019-03-25T19:26:02Z")

</div>

In the direction of interactive notebooks. Essentially, Im asking what your vision for your package is.

---

<div class="post-metadata">

**Author:** ![brasilikum](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/brasilikum/32/524_2.png) [@brasilikum](https://discourse.elm-lang.org/u/brasilikum)\
**Post date:** [March 25, 2019, 8:48pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/9 "2019-03-25T20:48:17Z")

</div>

Something not yet mentioned is [Elm Markup](https://package.elm-lang.org/packages/mdgriffith/elm-markup/latest/). This might help with the „Notrbook“ side of things.

---

<div class="post-metadata">

**Author:** ![Erkal\_Selman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/erkal_selman/32/269_2.png) [@Erkal\_Selman](https://discourse.elm-lang.org/u/Erkal_Selman)\
**Post date:** [March 26, 2019, 7:05am UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/10 "2019-03-26T07:05:34Z")

</div>

Here is the talk about elm-markup: [https://youtu.be/8Zd3ocr9Di8](https://youtu.be/8Zd3ocr9Di8)

---

<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:** [March 26, 2019, 8:45am UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/11 "2019-03-26T08:45:08Z")

</div>

Personally that’s not something I’ve looked into too much. I believe that’s where elm-vega is going as has been mentioned above in this thread.

---

<div class="post-metadata">

**Author:** ![anon5324703](https://avatars.discourse-cdn.com/v4/letter/a/97f17d/32.png) [@anon5324703](https://discourse.elm-lang.org/u/anon5324703)\
**Post date:** [March 26, 2019, 12:17pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/12 "2019-03-26T12:17:47Z")

</div>

That live demo looked very cool!

---

<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:** [April 5, 2019, 12:17pm UTC](https://discourse.elm-lang.org/t/check-out-observable-could-elm-be-used-for-this-sort-of-thing/3379/13 "2019-04-05T12:17:57Z")

</div>

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