Jupyter-ObservableHQ Bridge

Real time 2-way communication

Olivier Borderies
2 min readMay 20, 2020

TL;DR

This article is a very short introduction to this long notebook: @oscar6echo/jupyter-observablehq-bridge

Golden Gate: an iconic bridge —
Maarten van den Heuvel

I have been using Jupyter notebooks with Python kernels for about 6 years now and they have proven super useful ! However to display results I have gradually used more and more JavaScript. So quite naturally I came across ObservableHQ notebooks, which I also find fantastic.

There is no need to introduce the Jupyter project which virtually everybody knows — or so is my biased view. I suspect ObservableHQ is maybe less well known — yet. In short, the CTO is Mike Bostock, of d3 fame. Other leading tech guys include Jeremy Ashkenas (CoffeeScript, LiveScript, Backbone.js) and Tom Macwright (geojson.io, Mapbox Studio, Mapbox GL JS). So you are in good company. And boy, it shows in their notebooks !

I would venture Mike Bostock in particular could be described as the Karl Lagerfeld of Code ! 😄 Indeed d3 is quitessentially elegant: its realizations (e.g. see here, there, and there, and my all time favorite) as well as the underlying concepts (e.g. data joins) and code ! But it is hard, you need be quite fit to leverage its power. Arguably if d3 is haute-couture, ObservableHQ is akin to prêt-à-porter. A lot more people can hope to successfully use it as a wealth of live examples are available to immediately play with and fork. Moreover the tech leads on the forum are VERY helpful.

After using Jupyter and ObservableHQ separately for some time, I thought it would be great to be able to work with both of them, leveraging their respective strengths. And I wrote a Jupyter ObservableHQ Bridge (JOB) in an attempt to do so.

If interested you can read the documentation in this notebook: @oscar6echo/jupyter-observablehq-bridge —including approach, architecture, user guide, examples, videos.

--

--