{
  "$type": "site.standard.document",
  "content": {
    "$type": "site.standard.content.markdown",
    "text": "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!\n\nSince I'm not very familiar with front end, I don't know how easy or hard is to get there though.\n\nAt 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.\n\n## The Plot\n\nimport Plot from \"../../components/Plot.astro\";\n\n<Plot />\n\n## The Code\n\nStart by creating a component, `Plot.astro`:\n\n```html\n<div id=\"myplot\"></div>\n<script type=\"module\">\n  import * as Plot from \"https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm\";\n\n  const plot = Plot.rectY({ length: 10000 }, Plot.binX({ y: \"count\" }, { x: Math.random })).plot();\n  const div = document.querySelector(\"#myplot\");\n  div.append(plot);\n</script>\n```\n\nThen, you can use it in any `.astro`, `.html` and `.mdx` file like this:\n\n```mdx\nimport Plot from \"../../components/Plot.astro\";\n\n<Plot />\n```\n\nNext, let's see if we can get data from external sources at buildtime and pass it to the plot in a smart way.",
    "version": "1.0"
  },
  "description": "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...",
  "path": "/observable-plot-astro",
  "publishedAt": "2024-07-06T00:00:00.000Z",
  "site": "at://did:plc:4z5i7njrld66ew36htufcwry/site.standard.publication/3mo43d2tmt2ov",
  "textContent": "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!\n\nSince I'm not very familiar with front end, I don't know how easy or hard is to get there though.\n\nAt 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.\n\nThe Plot\n\nimport Plot from \"../../components/Plot.astro\";\n\nThe Code\n\nStart by creating a component, Plot.astro:\n\nThen, you can use it in any .astro, .html and .mdx file like this:\n\nNext, let's see if we can get data from external sources at buildtime and pass it to the plot in a smart way.",
  "title": "Observable Plot in Astro"
}