notated.org notes on learning, design, tools, & life

Observable: Five-Minute Introduction

I discovered Observable, a new project from Mike Bostock just yesterday. It’s a modern web-based programming notebook for JavaScript.

I remember the first time a friend of mine showed me something he’d written in Mathematica, about 15 years ago. I had no idea what was going on. I hadn’t studied any computer science, I didn’t really understand what this tool was supposed to be doing, or why anyone would use it. There was a big gap between how impressed my friend was with what he’d been able to do with it, and my feelings at looking at it with him. (I feel like it had something to do with simulating sheep populations?)

Fast forward to a couple of years ago, when I was working on the launch of a data science course and saw a Jupyter notebook in action running Python. The scales came off my eyes. This was an interactive programming environment that I had never really imagined! The possibilities for teaching were immediately obvious. You could create notebooks that showed code and results for students to tinker with, demonstrate with live examples you could update on the fly, leave blanks for students to fill in like worksheet, etc.

It was only later that I realized I was seeing a new take on a set of paradigms that I’d seen in Mathematica so many years earlier.

Observable uses the same notebook model, in a way that feels very much web-technology native. It’s web interface is nicer than Jupyter already. I’m also encouraged to see some early community on the site (although at first glance it seems heavily male-leaning). I’ll be curious to see how it grows. As far as I can tell, there’s not currently a way to download and work locally on Observable notebooks, whereas part of what I like about the Jupyter format is its portability. Observable is still young, so I hope that there is a chance this may happen in the future.

In the meantime, if I was teaching JavaScript, I would give this a serious look.