Skip to content

Getting started documentation request: Vanilla JS with no CDN #1496

@simonw

Description

@simonw

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to docs

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions