We’ve Been [Observable] Frame[work]’d!

Thursday’s Drop was waylaid by bandits. Said bandits included a continued resurgence of long covid exhaustion combined with a bonkers cool discovery that had me vapor locked when not doing work-work. There is an upside, though, since I’m using that discovery and distraction for the weekend project edition!

Meet Observable Framework

The Observable Framework is an open-source system for building data apps, dashboards, and reports that combines the utility of JavaScript on the front-end for interactive graphics with any language on the back-end for data preparation and analysis. It consists of a local development server, a static site generator, and a command-line interface to quickly and securely share your insights with others.

With this new Framework, you can create projects, develop them iteratively, and then publish them for self-hosting or deploy directly to Observable’s revamped platform. The Framework also supports continuous deployment on GitHub to publish your site automatically on commit or on schedule.

Under the covers, Framework is a Node.js application published to npm and runs in the terminal. It includes a helper script for creating new projects and a variety of recommended libraries by default, including Plot, which is used for creating charts. The framework also provides features such as live preview, data loaders, file attachments, components, and layout helpers.

The Observable Framework is a versatile tool for creating data-driven applications and reports, and it can be used to build interactive dashboards for various purposes. It provides a seamless development experience with features like live preview and automatic data loading, making it easier to create and share data visualizations and applications.

A Framework Report Walkthrough

I made an example report that is also a walkthrough for how to make one on your own (using itself as an example). There’s more info on Framework in it, and the source code is on Codeberg.

Please see it for your WPE mission!

Back Up Your Notebooks With The Official Tool

You should read the full report example before reading this section.

The obserbable tool that ships with Framework has a feature that lets you back up your Observable notebooks. It’s very similar to my Quarto tools for converting Observable notebooks to Quarto format, but is geared to being more compatible with Framework.

Lets back up this notebook:

$ mkdir convert-test
$ npm init -y 
$ npm add @observablehq/framework

Now, modify package.json to look like this:

{
  "name": "convert-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  scripts": {
    "observable": "observable"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@observablehq/framework": "^1.0.0"
  }
}

Run the converter:

$ npm run observable convert d9b5e64b673f8015

> observable
> observable convert d9b5e64b673f8015

┌   observable convert
│
◇  Downloaded d9b5e64b673f8015.md in 272ms
│
◇  Downloaded all-no-3wh.csv in 350ms
│
◇  Downloaded total-no-3wh.csv in 154ms
│
◇  Downloaded events.csv in 166ms
│
└  1 notebook converted; 4 files written

and, let’s see what we have:

$ tree -CFL 1
./
├── all-no-3wh.csv
├── d9b5e64b673f8015.md
├── events.csv
├── node_modules/
├── package-lock.json
├── package.json
└── total-no-3wh.csv

2 directories, 6 files

$ head -3  d9b5e64b673f8015.md
# [GreyNoise](https://greynoise.io) Noise Storms

Change the slider to set the minimum # of daily IPs w/o a 3WH to be defined as a "noise storm".

I suspect there’ll be many more Framework-centric Drops this year.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️