Investigate Observable Framework for prototyping

[hancush]

Background

@fgregg has used Observable notebooks for a number of really cool data projects, and we've talked at length about its usefulness as a prototyping tool. Yet, the notebook interface is confusing to some clients. Enter Observable Framework, which allows us to do the same rapid development, but publish it in a format that looks like a website.

Observable Framework is an open-source static site generator for data apps, dashboards, reports, and more. Framework includes a preview server for local development, and a command-line interface for automating builds & deploys.

Proposal

We're making some charts for the CPS OSP project. I'd like to use Observable Framework to create and publish them.

Deliverables

A single-page static site with a few charts, hosted on Observable Framework.

Timeline

I expect this to take less than a day.

[hancush]

Set up a site and made some charts in 2 hours. PR: https://github.com/datamade/cps-osp/pull/11 (private repo)

[hancush]

Prototyped a new site in a day: https://github.com/datamade/tpc-noah-prototype (private repo)

Includes data loaders (e.g., https://github.com/datamade/tpc-noah-prototype/blob/main/src/data/msa_clusters.geojson.sh), several maps, multiple pages, and a GitHub Actions workflow to build and deploy the site to GitHub Pages (https://github.com/datamade/tpc-noah-prototype/blob/main/.github/workflows/deploy.yml).

Demo with the client went super well! It was so nice to be able to think together using their real data.

[hancush]

Their docs are excellent: https://observablehq.com/framework/getting-started

[hancush]

Oh, and I used Observable Plot for mapping / charts: https://observablehq.com/plot/

One really cool feature is that it includes faceting out of the box. So, you don't have to wrangle your flat data, you just let Plot do the work for you, for example: https://github.com/datamade/cps-osp/blob/main/exemplary-charts/src/prevalence-of-sexual-harassment-over-time.md#by-raceethnicity-and-sex

I also love how easy it is to include data tables. (See Inputs.table) below the plot block in the last link.

[hancush]

How to use Observable Plot in React: https://codesandbox.io/p/sandbox/observable-plot-in-react-demo-7kwdi

[fgregg]

one downside of framework vs observablehq.com is that there's not an easy way to get svg or png of an image, yet. https://github.com/observablehq/framework/issues/869

[antidipyramid]

After the McCormick project is wrapped we can make a formal recommendation for adopting Observable.