Observable Framework Data Loader with local csv file

Community Help
1

Hi there, I’m using the Observable Framework and I’m having trouble using a dataloader to load a CSV file I have in the same directory.

I have my data file called my_log_data_2024.csv (this file is ON my computer, not the web) and a data loader file I’m using that I’ve named log_extract.csv.js I’d like to read the contents of my_log_data_2024.csv, but it’s just not working.

First off, I’m having trouble finding the “right” way to import FileAttachment.

Attempting to do the recommended import using

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

Is giving me the error: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'npm:'

So I swapped this to:

import * as ObStdLib from '@observablehq/stdlib';

const {FileAttachment} = new ObStdLib.Library();

After seeing a different post asking how they’d do this in a data loader, however after doing that I’m getting issues that .csv is not a function on the FileAttachment.

For more context I’m attempting to modify the example-report.md that gets generated on a fresh install of the Observable Framework.

Node Version: v20.9.0
NPM Version: 10.1.0

Package.json dependencies:
“@observablehq/framework”: “latest”,
“d3-dsv”: “^3.0.1”,
“d3-time-format”: “^4.1.0”

2

JavaScript data loaders are standard Node.js programs, so you should use Node’s readFile from node:fs/promises to read a file. The FileAttachment class is only needed for client-side JavaScript (not data loaders).

1 Like
3

Thank you!! I needed to hear that designation. I thought the FileAttachment was available in the dataLoader as well. That absolutely got me movin!! Appreciate it!