Mathematical functions with live updating parameters via sliders

plotly.js
1

Hi everyone,

New to plotly.js, trying to work out if it is any use for my purposes. What I need is to be able to visualise a mathematical function (a statistical distribution) and change parameters seeing their effects in realtime. I can do something similar to this with jsxgraph (example https://jsfiddle.net/themusicroob/nk2gtv97/2/), but what I’d like is to be able to do this in 3D. Specifically I’d like a graph of the function z=((1-e^(-ax))^w)*(be^(-by))^(1-w) with sliders for the parameters a, b, and w, which, when manipulated, cause the graph to update in realtime. I’ve seen plotly.js can handle realtime data, and draw 3d graphs. But I’ve not seen any examples of it being used to plot mathematical functions and, presumably for the same reason, I’ve not seen the actual data in the graph being manipulated through the UI.

Is this possible with plotly.js or am I barking up the wrong tree?

Thanks in advance for any help.

2

Here’s an example: http://rickyreusser.com/plotly-expression-transform/

3

Thanks for the question @themusicroob, and thanks for the link @etienne! That example was highly experimental and had some rough edges. The short answer is that it’s definitely possible and I suspect it would actually perform very well since webgl data gets passed through the pipeline very quickly (see: http://codepen.io/rsreusser/pen/MbGbOj ).

If you’ll bear with me, things have changed and improved quite a bit since I made that example, so I’ll make an updated example that should be significantly cleaner and nicer. I’m a bit pressed for time at the moment, but I’ll hopefully be able to make an example today that does this.

Edit: one caveat now that I reread. manipulating 3D plots through the plot UI might be a bit difficult. I’ll need to do a bit of research to figure out the state of that. Manipulating through menus and sliders should be fine though.

4

Thanks @etienne, thanks @ricky. The example is very useful and shows that what I want is possible. I’ll take a look at the source and see if I can work out how to achieve it. Would also be interested in seeing any improvements that can be made, though to be honest the example is probably smooth enough for my purposes.