Remove deprecated features from the standard library about framework

[mbostock]

Can we replace Observable’s standard library with explicit imports?

Working

These libraries work today.

import * as Plot from "npm:@observablehq/plot";

import * as d3 from "npm:d3";

import _ from "npm:lodash";

import * as aq from "npm:arquero";

import * as Arrow from "npm:apache-arrow";

I’m tempted to republish htl to @observablehq/htl to match all our other libraries.

import * as htl from "npm:htl";

import {html} from "npm:htl";

import {svg} from "npm:htl";

Almost working

These libraries don’t work yet.

Observable Inputs doesn’t insert the stylesheet automatically, and Inputs.file isn’t available because it requires FileAttachment integration. #143 Also it uses the wrong __ns__ namespace for styles, and you have to load the stylesheet from GitHub instead of npm. #29

import * as Inputs from "npm:@observablehq/inputs";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/observablehq/inputs/src/style.css" crossorigin="">

Leaflet likewise requires you to insert the stylesheet manually. It’d be nice if that happened automatically, but at least there should be a way to resolve the correct stylesheet to go along with the version of leaflet you loaded.

import * as L from "npm:leaflet";

const div = Object.assign(document.createElement("div"), {style: "height: 180px;"});
const map = L.map(display(div)).setView([51.505, -0.09], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css" crossorigin="">

Not working

These libraries aren’t available yet.

We could offer FileAttachment as a wrapper on top of fetch with built-in support for CSV, TSV, etc. It wouldn’t be able to resolve the mime type synchronously (or whether the file exists)… and it wouldn’t enforce that the passed-in path is statically analyzable (outside of Markdown, anyway).

import {FileAttachment} from "npm:@observablehq/stdlib";

A related question is whether FileAttachment could be made to work in data loaders, reading from local files. That’s something that you can’t do with fetch, but would make things more portable between client code and data loaders.

You can import @viz-js/viz, katex, and mermaid and use them directly. (KaTeX needs a stylesheet, like Leaflet and Observable Inputs.) Should these be separate wrapper libraries? Or should we combine them into a single “stdlib”? Or an “observablehq:” namespace?

import {dot} from "npm:@observablehq/stdlib";

import {tex} from "npm:@observablehq/stdlib";

import {mermaid} from "npm:@observablehq/stdlib";

We also provide a couple DatabaseClient implementations on top of duckdb-wasm and sqlite. Do we need these? We don’t have SQL cells in the CLI. But these interfaces are a lot more convenient than using the libraries directly. In theory if FileAttachment is also available in vanilla ES modules, then these would be available too, which would be nice for data loaders.

import {DuckDBClient} from "npm:@observablehq/stdlib";

import {SQLiteDatabaseClient} from "npm:@observablehq/stdlib";

Mutable and Generators are implemented by us, and not currently easily accessible in vanilla JavaScript because they’re not published to npm (in a way that is easily imported into vanilla JavaScript) — but that’d be easy to fix.

import {Mutable} from "npm:@observablehq/stdlib";

import {Generators} from "npm:@observablehq/stdlib";

I think we’d only need Generators.observe, Generators.queue, and Generators.input. And ideally these would be re-implemented as async generators rather than synchronous generators that yield promises. We might also want to shorten the name. We don’t need Generators.map, Generators.disposable, Generators.filter, Generators.range, Generators.valueAt, or Generators.worker.

now and width are also provided by us, but these are extra weird because they are generators. So presumably in the vanilla JavaScript version, these would need to be functions that you call that return a generator? (Because you can’t have multiple consumers of a generator.)

import {now} from "npm:@observablehq/stdlib";

import {width} from "npm:@observablehq/stdlib";

Sample datasets

These can all be all be loaded using d3.csv or d3.json. Though obviously you lose a lot of convenience because you’re never going to remember the giant URL. Maybe these should be available as a library, too.

const aapl = d3.csv("https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9", d3.autoType);

const alphabet = d3.csv("https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d", d3.autoType);

const cars = d3.csv("https://static.observableusercontent.com/files/048ec3dfd528110c0665dfa363dd28bc516ffb7247231f3ab25005036717f5c4c232a5efc7bb74bc03037155cb72b1abe85a33d86eb9f1a336196030443be4f6", d3.autoType);

const citywages = d3.csv("https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a", d3.autoType);

const diamonds = d3.csv("https://static.observableusercontent.com/files/87942b1f5d061a21fa4bb8f2162db44e3ef0f7391301f867ab5ba718b225a63091af20675f0bfe7f922db097b217b377135203a7eab34651e21a8d09f4e37252", d3.autoType);

const flare = d3.csv("https://static.observableusercontent.com/files/a6b0d94a7f5828fd133765a934f4c9746d2010e2f342d335923991f31b14120de96b5cb4f160d509d8dc627f0107d7f5b5070d2516f01e4c862b5b4867533000", d3.autoType);

const industries = d3.csv("https://static.observableusercontent.com/files/76f13741128340cc88798c0a0b7fa5a2df8370f57554000774ab8ee9ae785ffa2903010cad670d4939af3e9c17e5e18e7e05ed2b38b848ac2fc1a0066aa0005f", d3.autoType);

const miserables = d3.json("https://static.observableusercontent.com/files/31d904f6e21d42d4963ece9c8cc4fbd75efcbdc404bf511bc79906f0a1be68b5a01e935f65123670ed04e35ca8cae3c2b943f82bf8db49c5a67c85cbb58db052");

const olympians = d3.csv("https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c", d3.autoType);

const penguins = d3.csv("https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a", d3.autoType);

const pizza = d3.csv("https://static.observableusercontent.com/files/c653108ab176088cacbb338eaf2344c4f5781681702bd6afb55697a3f91b511c6686ff469f3e3a27c75400001a2334dbd39a4499fe46b50a8b3c278b7d2f7fb5", d3.autoType);

const weather = d3.csv("https://static.observableusercontent.com/files/693a46b22b33db0f042728700e0c73e836fa13d55446df89120682d55339c6db7cc9e574d3d73f24ecc9bc7eb9ac9a1e7e104a1ee52c00aab1e77eb102913c1f", d3.autoType);