Observable Javascript is not working in browser

Community Help
1

I am new to both Observable and D3. I am currently trying to learn D3 and trying to see how some of the javascript works in Observable notebook.

For example, I wrote this in a notebook

image
image1005Ɨ751 35.2 KB

When I run the same code in the browser, it returns an error
image

But browser expects the following
image

Do I understand, that whatever javascript works in the observable notebook may not be suitable in the browser and vice versa.

I desire to simply copy the js from vs studio code and paste it here. Is it possible or I have to keep on tweeking the same code here and there to satisfy the requirement depending on browser or observable notebook?

const height = 720;
const width = 1280;
const glblDim = {
    height: height,
    width: width,
    margin: {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    }
};
1 Like
2

Hello smpa01, great question!

Observable has a special syntax that is used to enable reactivity between cells (and some other functionality), and not everything that is written into a cell can be considered ā€œvanillaā€ JavaScript and run in the browser.

Take a look at this video for more information: JavaScript and Observable / Observable / Observable as well as this notebook: Observableā€™s not JavaScript / Observable / Observable

I hope this clarifies things and let me know if you need help with figuring out how to transform the contents of a cell into vanilla JavaScript!

1 Like
3

Thanks @duaneatat for those links, I will keep on studying them and have them handy.

I prefer working in VS Studio Code and I need to build visuals that will render in a browser.

The only reason why I came to Observable primarily (may discover some other fantastic Observable capabilities moving forward in my journey, who knows !!!) is notebooks are so handy to test out some portion of d3 code on the fly (rather than doing console.log in the browser), such as

scaleX = d3.scaleLinear()
.domain([1,12])
.range([0,1210])

It is very convenient in the notebook, but I did not anticipate the learning curve here for tweeking notebook-specific javascript and that is going to slow me down here.

Is there a ready converter (just thinking out loud) from vanilla js to notebook js. I donā€™t want to ride on that curve unless I absolutely have to.

4

Totally understand what you mean! In the simplest case, you can go from vanilla JS to Observable simply by putting everything inside one cell:

cell = {
  // Vanilla JS

  return [something here];
}

Whatever you return from the {} block will end up available to other cells in the notebook (and will also be displayed above the cell). Also note that the cell name canā€™t be preceded by a const or let.

This necessitates a funny syntax if you just want to define an object as a cell:

Vanilla JS:

const foo = { width: 10, height: 20 };

As an Observable cell:

foo = ({ width: 10, height: 20 });

Since the observable parser would interpret the curly braces of the object as the beginning of a block, we have to wrap those curly braces in parenthesis. And then it will work as expected.

The approach taken in the notebook youā€™re referencing is to instead use a block that returns a value in order to define glblDim. Itā€™s functionally equivalent to (and probably better written as):

glblDim = ({
  width: width,
  height: height,
  // etc..
})

To answer your overall question, there isnā€™t an automated way of converting between Observable and JavaScript, but for simpler notebooks, as long as you can work your way around the way cells are defined, it might not be too onerous to copy and paste between them.

Iā€™d love to hear any other questions about this, or just hear your pain points ā€“ this is an area that trips a lot of people up and weā€™re really interested in your experience here since we do want to enable people to use Observable casually without having to invest too much time going up the learning curve (and just incrementally adapt to Observable rather than all at once). :pray:

1 Like
5

@duaneatat thank you again for your time, effort and willingness to help a newbie out. It is extremely valuable and I will keep it as a guide as I move forward.

Should I get stuck again with something else, I will post a Q here.
Leaning D3 takes a lot of time, and effort and on top of that, I canā€™t have another one just to learn Obseravble js.

But I donā€™t plan to quit Observable and you are right to point out that we many need to incrementally adapt to Observable rather than all at once. But for now, I have what I need. Thanks again.

2 Likes