Circle marker on a line plot linked to a slider

New To Observable
1

I would like to have a marker on my line plot that is linked to a slider. As the slider is moved the circle marker should move along the line of the line plot. Is there a way to do this in Observable?

1 Like
2

The easiest approach would be to leverage Observable’s built in reactivity. Thus, you could create a slider named something like viewof x, like so:

viewof x = Inputs.range([-1, 12], { value: 1, step: 0.01 })

Then, create a plot that depends on the parameter x. The plot should update whenever you change the value of x by moving the slider. The technique is illustrated in [this notebook], which produces the following:

1 Like
3

Thanks! That’s amazing.

4

I just tried the solution and I’m still struggling. I have a data table with the columns being the x- and y-axis values. I made the x-axis the slider, but then it made a vertical line (that moves with the slider) instead of a dot on the line that’s already there. I.e. y is not a function of x, it is read from a data table.
Any suggestions?
I suppose one way of describing it is that I want a dot/circle to move like the tips move when a cursor moves across the plot, but linked to a slider instead of cursor movement. Does that make sense at all?

5

I adjusted the example notebook so that the points are generated and the slider picks the index of the point to plot, rather than the point itself. Of course, a notebook illustrating what you’ve got is always helpful.

6

Thank you!

Here is the notebook:

I would essentially like the black dot to move along the red line (all lines would ultimately have their own dot moving to the same slider, but I can add those once I know how to do one) as the slider moves.

I hope this helps.

7

There are a few things that I’d do differently. Most importantly, I’d load the data once, store that result in a variable, and then refer to that variable when needed.

We can address your question in a manner pretty similar to my previous response. That is, we set up a slider whose value indexes the data and then plot points by choosing the appropriate data point by index. The first argument to Plot.dot might represent the y-coordinate that you want to plot all the points in one step.

I’ve sent this suggestion to you that implements this. You can merge the changes into your notebook, if that helps.

1 Like
8

Wonderful! Thank you very much. This is exactly what I needed. You are a superstar!

1 Like
9

Apologies for asking another question on this thread, but it is related.

I want to use the same graph again, but without the slider and just highlight a single threshold value with a dot. How would I go about doing that? I’ve tried something on the notebook below, but the dots do not stay on the line: