Why Observable Framework?

I've built dashboards with Shiny, Streamlit, and PowerBI. They're all great, but sometimes you just want something that loads instantly. No server spin-up time, no websocket connections—just pure, static HTML and JavaScript speed.

Enter Observable Framework. It's a static site generator specifically designed for data apps. It combines the best of modern web development with the power of D3 and Observable Plot.

The Project

I decided to take it for a spin to visualize some data I had lying around. The goal? A clean, interactive dashboard that I could host for free on GitHub Pages.

You can check out the final result here: Live Dashboard

How it Works

The magic of Observable Framework is in its architecture. It runs data loaders (scripts in Python, R, SQL, etc.) during the build process. This means your heavy data crunching happens once, on your machine or CI/CD, and the user just gets a lightweight JSON file.

1. Initialization

Getting started was as easy as running:

npm init @observablehq

This sets up a scaffold with everything you need.

2. The Data Loader

Instead of making the browser fetch and parse a massive CSV every time, I wrote a simple data loader. It processes the raw data and outputs a clean JSON file that the dashboard consumes.

3. Visualizations

For the charts, I used Observable Plot. If you're coming from ggplot2 in R, it feels remarkably familiar. It's a "grammar of graphics" library for JavaScript.

Plot.plot({
  marks: [
    Plot.barY(data, {x: "category", y: "value", fill: "steelblue"}),
    Plot.ruleY([0])
  ]
})

(That's pseudo-code, but it's really that simple!)

4. Deployment

This is the best part. Since the output is just valid HTML/JS/CSS, you can host it anywhere. I set up a simple GitHub Actions workflow to build the site and push it to the gh-pages branch depending on the source.

Conclusion

Building with Observable Framework was a breath of fresh air. It forces you to think about performance and data structure upfront, which pays off in the final user experience.

If you're looking to build a dashboard that feels more like a polished web app and less like a BI tool, give it a shot!

👉 Check out the dashboard here

Building a Simple Dashboard with Observable Framework 🚀