Observable: Discovering a New World

When you look at technology today, you probably group things into categories such as “Relevant to me” or “Not something I’ll ever use”. However, there are things that you come across as “What is this?” or “What’s the big deal?” where you are unsure as to whether this new thing you are encountering will be a distraction or a possible new source of benefit to you. You hear about things like blockchain, AI, Augmented Reality, and new languages like Rust or GO and you struggle to find a way to make it relevant to your day to day work.

I had that same experience when I was coming across a site called Observable. I saw some interesting posts by folks - mostly dataviz folks creating interesting procedurally generated images - and I simply dismissed the site as a curiosity and moved on.

But then, there was a watershed post by Lionel Radisson called “Observable & Creative Coding”. The article was in Observable, yet it was self-referential in that it walked the reader through the process of discovery that he had been through with Observable himself. Many things resonated with me with that article - especially since I was a “creative coder” myself and it looked like you could do much more than make pretty procedurally generated images on the site. You could do actual work?

I was surprised and intrigued. I began my own “Observable Journey” from that day forward. I committed myself to get over whatever learning curve it took to figure out how to do some of the amazing things I saw from that post. At first I created some notebooks and just nothing worked. The JavaScript was strange and I couldn’t just create scripts with var and have them work. There was an underlying approach to developing on Observable that I was hitting my head against as a “traditional” web developer. I began to pore over tutorials from Anjana Vakil, as well as walking through Observable’s documentation.

Now, mind you, I was still thoroughly on the “frustrated at every turn” side of things. I would read about reactivity, functional programming, and things like generators and run into roadblocks on trying to include some JavaScript into my “Notebooks” as they are called. I was still not convinced that there was something there that was worth my time to invest, but there was a tantalizing taste of this when I would go and look at the “latest” Notebooks that folks were creating.

People were not writing whole complex applications. They were working on visualizing data in new ways that allowed the reader to explore the idea they were trying to convey in dynamic ways. Instead of having some static chart about COVID-19 cases, you could interact with the visualization and that process would allow you to more fully understand the information the author was trying to bring across. But, also, there was an air of “back of the napkin” kind of notebooks. Folks would “fork” other notebooks that kinda sorta did what they wanted, and adapt them to what they themselves needed. But they didn’t spend days trying to learn D3 or trying to shoehorn React into a notebook. Instead they were just “getting things done.”

I decided then to try to immerse myself into this playful idea and I created a notebook a day for 31 days - I called it ( unimaginatively ) 31 Days of Observable. Instead of trying to overthink things, I just had fun and tried to create something interesting and small that explored some aspect of Observable’s capabilities. During that time, I came across one of the learning notebooks entitled “Observable’s not Javascript” which felt, at first glance pretty pretentious since obviously it WAS JavaScript. I mean virtually every notebook you see on the site contains some block of script running. So, what did this mean?

It took me several re-reads and lots of dead ends in my own notebooks to finally get this. And it opened the door for me finally realizing the answer to that question I posed at the beginning of this article : “Is this something useful for me or just some novelty and distraction?” I realized that I had been fighting against the core ideas behind Observable notebooks - and just had been trying to use it as an awkward jsFiddle or CodePen replacement. It’s not like that at all.

In a way, Observable has more affinity to a spreadsheet than a JavaScript runner. Every cell runs independently of the others, can render all kinds of content, and communicates with other cells in a logical and interesting fashion. Every cell can essentially exist as a promise (a coding concept where you can treat the output of some pending action as already returned even though it hasn’t yet). You can leverage this to do things like:

• Gather information from remote resources like .csv or .json data.
• Pull in JavaScript libraries from the huge NPM ecosystem and run them in the browser.
• Upload images, source files, and data into your notebook and share it.
• Generate amazing visualizations of data and put reactive hooks into your view so that the user can manipulate ( “reactivity” ) aspects of the data and see changes in real time.
• Fork existing notebooks and modify your own version to get to a solution quickly (or use a template built for this purpose). Import cells between notebooks and pull directly into a new notebook (“importing”). This feature alone is fantastically powerful - imagine if you came across some functionality in a notebook you viewed, but didn’t want to cut and paste the code? Just reference the cell in the other notebook!
• Leverage Observable’s dataviz roots and natively create D3 or Vega-lite charts.
• Create interactive tutorials that not only explain a concept, but give your students the tools to interact with the concepts “live”.
• Display any notebook into its own stand alone site.
• Embed any cell into another site and all the context is carried over as well!

Now that I understand this, I now think of Observable as an exciting NEW tool that I can leverage in my own projects. I am starting to use some notebooks for the work I do at eBay where I am visualizing the workload for my team and helping make our sprints more effective. You can even create private Notebooks that have more functionality like utilizing secrets for API calls, or shared notebooks that you can co-edit like a Google Doc.

I hope that I’ve given you some food for thought! Observable is a site that is a new kind of interactive concept on the web. Before now we had “sites” that featured mainly static information - best for reading and moving on, “apps” which are primarily interfaces to help us do some task like banking or buying a Playstation 4, and now “notebooks” which are a fusion of both, yet more than that because they allow in one location the learning, practice, and application of a concept. And its ecosystem of capabilities keeps growing every day! What will YOU build there? Let me know!

(Note: Disclaimer. My opinions stated here are my own. No endorsement is implied or explicit from my employer. It's just me gushing about this cool site! )