JavaScript data loader examples

Observable Framework supports data loaders written in JavaScript. These data loaders run in the most standard way—using node --no-warnings=ExperimentalWarning {script-name} for JavaScript (.js) data loaders, and tsx {script-name} for TypeScript (.ts) data loaders. To test a data loader, you can run the relevant command directly in a shell.

Because data loaders run in this standard environment, they have to be written as standard node (or tsx) scripts. For instance, they have to import explicitly every library that they use.

TSV

The data loader below accesses data on US hourly electricity demand and generation from the Energy Information Administration, does some basic wrangling, and returns a tab-separated value file.

Create a file in your project source root with the .tsv.js double extension (for example, docs/data/my-data.tsv.js), then paste the JavaScript code below to get started.

Access the output of the data loader from the client using FileAttachment:

const usElectricity = FileAttachment("data/us-electricity.tsv").tsv();

The file attachment name does not include the .js extension. We rely on Framework’s routing to run the appropriate data loader.

We can now display the attached dataset:

Inputs.table(usElectricity)

JSON

The data loader below accesses Magic the Gathering card data from the Scryfall API, does some basic wrangling, and returns a JSON.

Create a file in your project source root with the .json.js double extension (for example, docs/data/my-data.json.js), then paste the JavaScript code below to get started.

Access the output of the data loader from the client using FileAttachment:

const magicCards = FileAttachment("data/magic.json").json();

The file attachment name does not include the .js extension. We rely on Framework’s routing to run the appropriate data loader.

We can now display the attached dataset:

Inputs.table(magicCards)