Investigate Observable Framework for prototyping

hancush commented 3 weeks ago

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 commented 3 weeks ago

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

hancush commented 2 weeks ago

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 commented 2 weeks ago

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

hancush commented 2 weeks ago

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.

datamade / how-to