The "Getting Started" documentation at https://observablehq.com/plot/getting-started is missing one option, which is the one I want to use.
I'd like to use Observable Plot in a Vanilla HTML + JavaScript app that doesn't get built by webpack etc - so I don't want to use the npm option.
The Plot in vanilla HTML option is almost what I'm looking for:
<div id="myplot"></div>
<script type="module">
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
const plot = Plot.rectY({length: 10000}, Plot.binX({y: "count"}, {x: Math.random})).plot();
const div = document.querySelector("#myplot");
div.append(plot);
</script>
Except... I don't want to depend on a CDN for my application. I prefer to load assets from my own /static/ folder.
So what I'm trying to figure out is the right way to download Observable Plot such that I can have a file - or a bunch of files - in static/ in my own application, and then write code that looks like this:
<script type="module">
import * as Plot from "/static/observable-plot.js";
</script>
I'd prefer if this resulted in a single HTTP request to a bundled file because I can't be sure my users will be deploying to hosts that support efficient HTTP/2 for loading many files at once, but a solution that loads a few dozen ES modules would be OK with me too if the bundle option can't be easily created.
Guidance on how to best do this would be greatly appreciated! I tried to figure it out myself using npm and vite and suchlike but my JavaScript packaging knowledge isn't up to scratch.
The "Getting Started" documentation at https://observablehq.com/plot/getting-started is missing one option, which is the one I want to use.
I'd like to use Observable Plot in a Vanilla HTML + JavaScript app that doesn't get built by webpack etc - so I don't want to use the
npmoption.The Plot in vanilla HTML option is almost what I'm looking for:
Except... I don't want to depend on a CDN for my application. I prefer to load assets from my own
/static/folder.So what I'm trying to figure out is the right way to download Observable Plot such that I can have a file - or a bunch of files - in
static/in my own application, and then write code that looks like this:I'd prefer if this resulted in a single HTTP request to a bundled file because I can't be sure my users will be deploying to hosts that support efficient HTTP/2 for loading many files at once, but a solution that loads a few dozen ES modules would be OK with me too if the bundle option can't be easily created.
Guidance on how to best do this would be greatly appreciated! I tried to figure it out myself using
npmandviteand suchlike but my JavaScript packaging knowledge isn't up to scratch.