Observable Plot in Astro

Sat Jul 06 2024

I’ve been playing with Observable Framework and Evidence for a while. One thing that I keep wishing is for those data focused static site generators to have a way to render everything at build time and only ship the fully rendered charts. No DuckDB WASM and querying things at loading time!

Since I’m not very familiar with front end, I don’t know how easy or hard is to get there though.

At the same time, this is an opportunity for learning. Let’s see how hard it is to embed Observable Plot in Astro in a lightweight way.

The Plot

The Code

Start by creating a component, Plot.astro:

<div id="myplot"></div>
<script type="module">
  import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/+esm";

  const plot = Plot.rectY({ length: 10000 }, Plot.binX({ y: "count" }, { x: Math.random })).plot();
  const div = document.querySelector("#myplot");
  div.append(plot);
</script>

Then, you can use it in any .astro, .html and .mdx file like this:

import Plot from "../../components/Plot.astro";

<Plot />

Next, let’s see if we can get data from external sources at buildtime and pass it to the plot in a smart way.