[RFC/ANN] JSXGraph: interactive plots on static websites

Package Announcements
1

Hello,

I’d like to announce JSXGraph.jl a wrapper around the javascript library of the same name (jsxgraph.org), in their own words:

JSXGraph is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.

The aim of the package is to help describe interactive figures simply, using Julia. In a way it’s a bit like Interact.jl except that the output is pluggable javascript that can be used with Documenter.jl or Franklin.jl (or any other static framework that you might be using but you should consider Franklin, cough, cough).

Code looks like this:

using JSXGraph
b = board("brd", xlim=[-2,2], ylim=[-1,2])
b ++ slider("a", [[-1,1.5],[1,1.5],[0,1.5,3]])
@jsf foo(x) = val(a)*x^2 - 1
b ++ plot(foo, dash=2)
b

This basically plots f(x) = ax^2 where a is controlled by a slider.

(if you’re in Juno, a parabola should appear in the plotpane, otherwise it should appear in an independent Blink window (yes, also if you’re in a notebook (†))

†: there’s some dark magic required to load javascript libraries properly with jupyter notebooks, VegaLite.jl has figured it out but I haven’t. If you know how to do it & can show me a working example, you will earn my gratitude and a virtual medal :medal_military:.

The code above defines:

  • a board b (thing which contains objects)
  • a slider with a specific position which goes from value 0 to 3
  • a parametrized function which depends upon the value of the slider via val
  • a plot which is appended to the board with ++ (you could also do b(plot(...)) or plot(...) |> b depending on your preferences).

The @jsf macro is a monstrosity defines an object that wraps around the function foo keeping track of a javascript representation of the function. It is an extension (@travigd would likely say an abuse) of the @js macro offered by JSExpr.jl.

Comparison with plotly

Plotly is more geared towards showing data. Generally though it has less support for interactivity (e.g. the sliders are very limited). It’s also several times heavier to load than JSXGraph.

If your primary concern is to show pre-computed data, then Plotly is great and should be preferred (or VegaLite, Plots etc).

Limitations

Everything that appears in the body of a @jsf function has to be understandable by Javascript. JSXGraph.jl helps with this by defining the standard maths functions like sin, cos, tan etc. However functions from specific packages will not work at this point.

You can still do data plots where you pass an array of pre-computed values (and this could be combined with functions and interactivity).

Next steps

The wrapping is far from complete. I’d like to see if there’s interest from potential users and whether there are some people willing to help me with it (porting more functionalities is not very hard).

More examples: JSXGraph Examples

22 Likes
2

Very nice!

I’m just lucky with VegaLite.jl with Jupyter: JupyterLab and nteract ships the vega-lite JavaScript stuff out-of-the-box, so I can just output the vega-lite MIME type and it will show with all the interactivity. We also always include a PNG MIME version, so that Jupyter versions that don’t support vega-lite still show a figure (even though there is no interactivity in that case). In earlier versions we used HTML Mime types and tried to inject Javascript, it was complicated and never really worked everywhere…

In some way this is similar to the interactive stuff in VegaLite.jl, right? There is a research paper that describes the approach taken in vega-lite a bit more.

3

Awesome thanks, yes I tried to imitate what you guys did (and there are other people who did similar stuff with D3.js) but I’m missing something.

So I don’t think so but I may be wrong because I don’t know VegaLite well. The kind of stuff JSXGraph is really good for are parametric curve that you can control externally. For instance this example controlling Lissajous curves or this one with Bezier curves. Can Vega Lite do that? My impression was that VL was more like Plotly but with a grammar of graphics?

2 Likes
4

the link to examples is down: “Check out this page for a gallery of examples and explanations.”

but looking at the examples of the original library it looks like this is the tool I’ve been looking for for years now(IE: Euler line - JSXGraph Wiki) ! Is it correct that graphs/plots with this library can be manipulated via the mouse?

If so you will be awarded my unofficial julian of the year award!

5

Oops: here they are JSXGraph Examples

Yes the original lib is pretty awesome, with a bit of creativity you can do amazing stuff I think. my current wrapping of the thing is limited so you can’t quite do that yet but in theory it’s just a matter of adding the interface which doesn’t take very long, help is welcome, hint hint :smiley:

2 Likes
6

Very nice! We are happy that you are using JSXGraph! (I’m the lead developer of JSXGraph). Please allow me to point you to JessieCode, our small programming language on top of JSXGraph: https://github.com/jsxgraph/JessieCode. With JessieCode one can use the math syntax sin, cos, …, without translation to JavaScript.

The most simple way to use JessieCode in JSXGraph is e.g. for function graphs: If the function term is supplies as string, it is interpreted as JessieCode.

Example with a slider a: board.create('functiongraph', ["V(a)*sin(x)"]);

You can try out JessieCode at https://bin.sketchometry.com/, which also contains a reference.

4 Likes
7

Hello @alfredwassermann , it’s awesome that you’re commenting here (and thanks for your help on GitHub), yes I’m aware of JessieCode though I haven’t played with it much.

At the moment the interface is very limited but I’m hoping that it could go down the route of some of your examples using R+JSXGraph where some mathematical/statistical analysis would be done in Julia and then illustrated in JSXGraph.

One key limitation that I can see is that if you write a fairly sophisticated function in Julia that relies on external dependencies etc then you can’t pass that down easily to JSXGraph; and I would imagine several people here would be interested in that. (That’s what Interact.jl allows but the output is not static javascript), what would be cool and that I’d like to look into is to build proxies in Julia which can be passed down to JSXGraph, that way you’d have

Julia program --> Interpolating Proxy --> JSXGraph

Is that something you do or have thought of doing in JessieCode too?

Thanks again for chipping in & for developping jsxgraph

8

JSXGraph has the possibility to connect to a web server to get data, for example from R, a CAS, or Python. The code for this is in the folder server and it is used e.g. in the locus-element (jsxgraph/locus.js at master · jsxgraph/jsxgraph · GitHub)
A working example can be seen at Locus computation - JSXGraph Wiki. The equation for the red curve is computed on server side by CoCoA, the implicit plotting is done by matplotlib from Python, then the plot data is send to JSXGraph.

2 Likes