Observable

Observable is a reactive, notebook-style, JavaScript-ish programming environment for the web. It was founded in 2016 by Mike Bostock (d3) and later joined by Jeremy Ashkenas (CoffeeScript, Backbone, Underscore). The tool is particularly useful for the interactive exploration of data. It is an alternative to other browser-based notebooks, such as Jupyter and Wolfram, and data exploration platforms, such as RStudio.

Product Feel

• 👍Modern, slick, magical, cutting-edge
• 👍Has “cool factor” that Medium used to have. I feel proud to write in it and to share it.
• 👎Batteries not entirely included

Basic Usage

The above video (6 min) produced this doc and demonstrates the following features:

• markdown
• html
• variables
• reactivity
• inputs
• require()
• yield() to inspect intermediate results
• data
• object inspection
• block of code
• data visualization graph
• animation
• downloading CSV

Reactivity

It's eponymous feature is its reactivity: like a spreadsheet, cells in the document evaluate when dependencies update.

This contrasts the linear order of other code notebooks, such as Jupyter and Wolfram, which are non-reactive. Below I demonstrate how evaluation order can cause issues in Jupyter:

This one feature is not to be underestimated. For one, it makes notebooks trivially reproducible -- no more worrying about evaluation order.

Paired with a slightly-modified JavaScript syntax, it also greatly reduces the complexity of asynchronous code by automatically awaiting cells that return Promises.

Literate programming

Markdown with JavaScript template literals is a very ergonomic way to combine text and data.

Imports

Easily require modules from npm and from other Observable notebooks.

Portable

• Share via link, 100% browser-based / client-side
• Open runtime
• Embeddable

Wishes

• More cohesive documentation
• Being able to search (ctrl-f) within a notebook for code and/or data
• Undo (ctrl-z) support across all cells in a notebook
• The ability to hide data
• The ability to select multiple cells at once (to move or delete them)
• More/better autocomplete suggestions, such as on require()
• More fluidly accomplish standard tasks (maybe through augmented standard library) to work with immutable values, dates, and data import and export
• Better story around mutability and bidirectional reactivity

Past wishes that were granted:

• Work well on half-width screen
• Move cells via dragging
• Default to showing code

Pricing

They recently released a $9/month/user plan for teams.

Further Reading

• A Better Way to Code by Mike Bostock, ObservableHQ founder and creator of d3