Plot function on top of existing `Plot`

Community Help
1

Hi,

I have described my question in a notebook here: problem description

Thanks!

1 Like
2

Judging from your notebook, you’re asking how to generate an application that looks something like so:

where the scatter plot comes from some data file and the linear fit comes from the text box, rather than from a computation based on the data.

I think that part of the reason that you’re having a challenge is simply that many of the notebooks you’re referring to are several years old now and the tools they use have been improved or superseded. For example,

  • There’s no need to import the Text input anymore. Inputs.text is now built in.
  • The use of build_samples seems like overkill, since you’re just plotting a line, which is determined by just two points. If you’re doing logistic or polynomial regression, then I suppose build_samples might make sense.
  • Most importantly - Mike Bostock’s funplot is, well, pretty fun, but largely superseded by Plot. In fact, if your whole point is to lay down the plot of a function on top of a Plot, it makes sense to simply incorporate another mark.

Using some newer and simple tools, I’d do something like so:

First, define f using an Inputs.text:

viewof f = Inputs.text({ submit: true, label: tex`f(x):`, value: "50x - 5780" })

Assuming you’ve imported math.js, you can parse that into a computable function in a separate cell, like so:

ff = {
  let ff = math.compile(f);
  return (x) => ff.evaluate({ x: x });
}

You can now use that ff function to generate a line mark doing something like so:

Plot.line(
  [
    [170, ff(170)],
    [235, ff(235)]
  ],
  { strokeWidth: 3 }
)

You can see all this in action in the notebook embedded above.

2 Likes
3

Thank you!

This is so cool! It allows for plotting any line according to any function and it doesn’t have to be hardcoded. You can include any function in the text input :heart_eyes:

Here I used build_samples so any function is plotted (not just linear functions):

2 Likes
4

Glad you like it!

Also note that, when using the embed feature, it’s generally not necessary to embed dependencies. That is, if you wish to display two cells, say f2 and plot2, you need only embed those and not, for example a dependency like ff2.

2 Likes