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.

1 Like
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.

1 Like
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: