I’m new to Plotly and have some questions about it. First I’ll explain the context. I’m the developer of GlowScript. At glowscript.org one can write Python or JavaScript programs that generate navigable real-time 3D animations, plus “live” (incremental) graphs that accompany these animations. Most users are scientists or students studying science and engineering, and there are currently over 35000 accounts at glowscript.org.
What’s special about GlowScript is how surprisingly easy it is to program 3D animations. The one-line program “box()” creates a WebGL canvas, displays a white 3D box located at the origin, sets up appropriate lighting, places the “camera” appropriately so that the object fills the canvas, and enables mouse/touch controls for zooming and rotating the camera. All of these “intelligent defaults” can be easily modified. Python programs (called “VPython” programs because they use the VPython API which is also available with installed Python by importing the vpython module) are compiled to JavaScript in the browser by the RapydScript-NG transpiler.
Click on the following link to see a VPython animation of a binary star, then click “View this program” to see the remarkably short code:
[http://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/BinaryStar-VPython](http://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/BinaryStar-VPython)
Notice that in the while loop there are no explicit graphics statements, yet a 3D animation results. When the program modifies the pos attribute of the two instances of the sphere class, the next render, which occurs about 60 times per second, displays the spheres in the new locations.
Next consider a live Plotly graph and again click “View this program” to see the very high-level API for acsessing Plotly:
[http://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/GraphTest](http://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/GraphTest)
The following program is a 3D animation of a physical system plus a real-time “live” graph of important quantities:
[http://www.glowscript.org/#/user/matterandinteractions/folder/matterandinteractions/program/20-interacting-current-loops/edit](http://www.glowscript.org/#/user/matterandinteractions/folder/matterandinteractions/program/20-interacting-current-loops/edit)
This combination of a 3D animation plus coordinated graphing of the physical quantities makes an important connection between the system and the graph. The key GlowScript module that gives GlowScript users access to either Plotly or Flot is here:
[https://github.com/BruceSherwood/glowscript/blob/master/lib/glow/graph.js](https://github.com/BruceSherwood/glowscript/blob/master/lib/glow/graph.js)
Now for the questions.
(1) I’m using extendTraces for the live, incremental graphing. I did a timing test and found that extendTraces is no faster than resetting the entire data set. Since 2011, GlowScript has used the old Flot library for graphs. It doesn’t even provide an extend option; the only way to do live graphs is to give Flot the entire data set each time, but it is quite a lot faster than Plotly. As a result, I currently let the program set a “fast” attribute (True for Flot and False for Plotly), with Flot the default.
My impression is that all of the popular JS graphing libraries are aimed at situations where all of the data points are pushed into an array and then given to the graphing library, and that none of them have been concerned with optimizing the case of live, incremental additions to the displayed data. Or have I missed something important? Does Plotly have a mechanism for making efficient live plots?
(2) In learning to use Plotly I of course played with it outside the complex GlowScript environment. To my surprise, when I brought it into GlowScript I got strange errors and had to modify attrConstant function to look like this, without of course knowing what on Earth I was doing:
function attrConstant() {
if (typeof value == 'string') { // inserted by Bruce Sherwood; don't know why this kludge is needed
value = value.replace(/\[/g,'')
value = value.replace(/\]/g,'')
}
this.setAttribute(name, value);
}
Evidently there’s something not right with the GlowScript environment, but does someone have an inkling of what it could be that would mess up Plotly in this way? An issue that may or may not be related is that in 2011, when GlowScript was new, “require” was not a major piece of JS, and GlowScript doesn’t use it. I see many references to require() in plotly.js but no definition of it, yet Plotly worked in isolation without importing require and, except for needing my kludge, works within GlowScript. This seems very puzzling.
(3) In the third program I referenced, the one with the graph of Kret etc., note that the legend texts are really too small to see well, but I couldn’t find in the documentation a way to make the legend font size bigger. Is there a way?
Bruce Sherwood
P.S. I needed a way to know when a Plotly call was completed but found nothing about this in the documentation. I finally found the following information:
[https://community.plotly.com/t/i-want-to-show-loading-symbol-while-loading-the-graph/157](https://community.plotly.com/t/i-want-to-show-loading-symbol-while-loading-the-graph/157)
This ought to be in the documentation.