Notebook to Vanilla JavaScript Steps

Community Help
17

There are multiple things you might mean here.

If you have a single local file that you want to be able to read from a local copy of the notebook, you could use d3.json (replace the require call with this):

d3.json("path/to/file.json").then(data => {

(Note that this will probably give you CORS errors unless you open the page in a local web server)

Alternatively, you might want a button that lets you select a file from your computer like the examples here: https://beta.observablehq.com/@mbostock/reading-local-files

Then you might add something like this to the HTML body:

<input id="inputJSON" type="file" accept="application/json">

and replace the require call with this:

const inputElement = document.querySelector('#inputJSON');
inputElement.addEventListener('change', () => {
  const url = URL.createObjectURL(inputElement.files[0]);
  d3.json(url).then(data => {

(this wraps the original code in an additional function; here’s a link to a fork of the above block with this change).

This earlier post of mine is also related to changing out the flare dataset for another one (in a different notebook) and might be helpful if you’re looking to get the format right.

1 Like