SyntaxError: Unexpected token

New To Observable
1

I’m trying to create an area plot linked to a slider that reveals more of the area under the curve as the slider is moved from 0 to 1. When I use this code snippet:

const slider = document.getElementById(‘slider’);

I get a SyntaxError: Unexpected token with the problem being const (squiggly red line underneath).

How do I fix this? Are there libraries I need to import first? (I’m more familiar with Python, so please forgive me for possibly using the wrong phrases)

2

Named cells in Observable are not vanilla JavaScript: you would simply write

slider = document.getElementById(‘slider’)

see Observable JavaScript / Observable | Observable.

However what we recommend on Observable is to avoid document.getElementById, and name your slider directly when you create it. For example:

slider = Inputs.range([0, 100], {label: "my value"})

Even better, since the slider is a UI widget for a certain value, you can use the viewof operator:

viewof parameter = Inputs.range([0, 100], {label: "adjust this parameter"})

and in another cell:

parameter // this cell shows 50

You can then use this parameter in another computation, for example to create a chart:

chart = Plot.rectY(penguins, Plot.binX({y: "count", thresholds: parameter}, {x: “body_mass_g"})).plot()

See Input + Chart / Observable | Observable

2 Likes
3

Thank you very much.

1 Like