About Elm Notebook

[jxxcarlson]

Hello all,

A little note about Elm Notebook. The goal of the project is to provide something akin to Jupyter Notebooks, but for Elm: an app with cells in which you can put both text and code, and where code in a cell can be executed, producing output of various kinds — text, image, chart, animation, etc. The engine that makes everything work is elm-interpreter by @minibill (Leonardo Taglialegne).

Elm notebook is work-in-progress with various bugs, lacunae, and rough spots. It will no doubt change a lot. I look forward to your suggestions and to making the app something that everybody in the community can profit from. I’ve thought of it mainly as a teaching tool. Here’s the code: github.com/jxxcarlson/elm-notebook.

Examples

Below are three examples of what one can do as of this writing.

1. First, a cell with some pure Elm code. It produces text output.

2. Next, a cell with some Elm code that defines a list b of Svg images and another cell which renders
the content of b:

3. Finally, a cell which draws a scatter plot and regression line for the data from Edwin Hubble’s
1929 paper on the correlation between the speed at which galaxies are moving
away from Earth versus their distance from us. This is the first experimental evidence
establishing the fact that the universe is expanding. The code you see below is a little interface to Tereza Sokol’s elm-charts.

The data in question was uploaded from a CSV file and stored in hubble for later use. The syntax of the chart command is chart KIND OPTIONS SOURCE where KIND is line, scatter, bar, etc., OPTIONS is a possibly empty list of items that can appear in any order, and SOURCE is the name of the persistent variable in which the data is stored.

Trying things out

You can try out the public notebooks without signing in to the app. For example, for the beacon animation, follow this link: elm-notebook.lamdera.app/p/beacon. Just read the directions in the top cell to run the animation.

You will also see a list of public notebooks. Click on any one to try it out. To create or modify notebooks, you will need to sign in.

PS. Another thing to try out is elm-notebook.lamdera.app/p/random. It is a simulation of 2D random walk (Brownian motion). Below is a screenshot of one run of this notebook. It describes the 5000-step history of a random walker who began his journey at the center of the translucent red disk.

Note 1. (7/18/2023) I’ve added some crude error messages. It will likely be a good while before they get much better.

Note 2. (7/19/2020) Evaluation of expressions in a cell no longer depends on the order of the cells or the order of the declarations (definitions) within a cell. In addition, cells can now have more than one expression, as illustrated below.

Note 3.(7/29/2023) I’ve made some esthetic changes, squashed a bug or two … see below

[jwoLondon]

See also litvis and the notebook plugin for VSCode for literate Elm that’s been around for a few years. It uses run-elm as the engine for running Elm in the notebook. I’d be interested in hearing more about what the elm-interpreter brings here (I guess web-embedding for a start).

[jxxcarlson]

Hi @jwoLondon, thanks so much for the heads-up. I saw the presentation on Litvis at Elm Europe in 2018, though until you jogged my memory, I had forgotten about it. Very nice indeed! I just rewatched the video and checked out some of the examples on the Litvis site: beautiful and effective. I’m sure that I can profit from studying the examples and the code. That said, Elm notebook will almost certainly not approach the level of visual and design sophistication of Litvis.

Elm notebook aims to fulfill a somewhat different need – more like Jupyter notebooks, but for Elm. Part of that goal is to have, as you note, something that runs in the browser. Elm-interpreter (and Elm-syntax) do all the heavy lifting: parsing and running the Elm code to produce a value which is then displayed. For this I needed something that depends only on Elm — no node.js, for example.

This project is not quite a month old, still in an early experimental phase, and could change a lot. In addition to a few bugs of which I am aware, many things to improve, and things I haven’t gotten to, there are some big missing pieces, among which is error handling.

Thanks again!

[jwoLondon]

Thanks for the additional info. I think it’s a great idea to see what can be achieved for the browser with no other dependencies. The lack of browser support is probably the biggest limitation of Litvis. I look forward to seeing how your project progresses.

When thinking about the comparison with Jupyter - I think one of the problems Jupyter has is the lack of reactive dependency between cells. One of the nice things about Elm is that a truly reactive approach that isn’t dependent on cell order is much easier to implement, and of immediate benefit to users.

[jxxcarlson]

At the moment the evaluation model in Elm Notebook is very simple: cell N is aware of definitions made in cells 1 … (N - 1). I plan to change this. One possibility is for the evaluation function to build the dependency graph of the definitions a given cell refers to and use those, regardless of position. I think this is what you have in mind, no?

[jwoLondon]

Yes, exactly - essentially the dependencies form a graph and if one performs a topological sort on that dependency graph one can update only the downstream dependencies. This is how, for example, Litvis and Observable create reactive notebooks that are independent of cell order. With Elm being a pure functional language with minimal side effects, those dependency graphs are much easier to maintain and process.

[jxxcarlson]

Excellent! That is what I will try to do.

[jxxcarlson]

re evalution order, done — see Note 2 above.