jsxgraph or flot backend (or interactive viewer for svg backend?)

Dan Drake on the Sage mailing list pointed out that google now has the ability to plot graphs:

https://www.google.com/search?q=sin(x)%2C+cos(x)

A nice javascript thing is generated and has automatic tracing, zooming, and panning turned on. Of course, those are things we'd all love in the Sage project for our matplotlib-based graphics :).

Has anyone ever worked on a backend that generates javascript code for one of the javascript plotters out there (like jsxgraph or flot)? Alternatively, I suppose we could generate an svg or html5 plot and then accompany it with the javascript code to trace the function, etc. Has anyone experimented with writing a javascript "viewer" for graphics, having some of the same features that the standard graphics window that pops up under qt, wx, gtk, etc.?

I think this would be interesting to work on next summer if I have extra time.

Thanks,

Jason

Has anyone ever worked on a backend that generates javascript code for
one of the javascript plotters out there (like jsxgraph or flot)?
Alternatively, I suppose we could generate an svg or html5 plot and then
accompany it with the javascript code to trace the function, etc.

Someone has worked on a html5 back-end, It was jsut discussed a bit on the thread "Using the Agg renderer by itself"

Here's a cut and paste:

···

On 12/5/11 9:49 PM, Jason Grout wrote:

On 11/27/11 12:33 PM, Ludwig Schwardt wrote:
>
> Ben is referring to mplh5canvas, available at
> http://code.google.com/p/mplh5canvas/. The main advantage of this
> approach is interactive zooming of plots within the browser. If this is
> not important to you, it will probably be faster to generate static PNGs
> or SVGs.
>
> The HTML5 backend should be easy to try out, as it is a pure Python
> package with no onerous dependencies.
>

-Chris

--
Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@...236...

Michael Droettboom played with this a little at the Sage Days in March, IIRC, and I seem to think he also whipped up an interactive demo using svg plots. Michael, do you remember what your conclusions were?

Thanks,

Jason

···

On 12/7/11 10:27 PM, Chris Barker wrote:

On 12/5/11 9:49 PM, Jason Grout wrote:

Has anyone ever worked on a backend that generates javascript code for
one of the javascript plotters out there (like jsxgraph or flot)?
Alternatively, I suppose we could generate an svg or html5 plot and then
accompany it with the javascript code to trace the function, etc.

Someone has worked on a html5 back-end, It was jsut discussed a bit on
the thread "Using the Agg renderer by itself"

Here's a cut and paste:

On 11/27/11 12:33 PM, Ludwig Schwardt wrote:
  >
  > Ben is referring to mplh5canvas, available at
  > http://code.google.com/p/mplh5canvas/. The main advantage of this
  > approach is interactive zooming of plots within the browser. If this is
  > not important to you, it will probably be faster to generate static PNGs
  > or SVGs.
  >
  > The HTML5 backend should be easy to try out, as it is a pure Python
  > package with no onerous dependencies.
  >

My conclusion was basically that the current crop of browsers are plenty fast and its generally feasible. But rewriting all that Python code in Javascript ain't a small project :wink:

Mike

···

On 12/07/2011 11:36 PM, Jason Grout wrote:

On 12/7/11 10:27 PM, Chris Barker wrote:

On 12/5/11 9:49 PM, Jason Grout wrote:

Has anyone ever worked on a backend that generates javascript code for
one of the javascript plotters out there (like jsxgraph or flot)?
Alternatively, I suppose we could generate an svg or html5 plot and then
accompany it with the javascript code to trace the function, etc.

Someone has worked on a html5 back-end, It was jsut discussed a bit on
the thread "Using the Agg renderer by itself"

Here's a cut and paste:

On 11/27/11 12:33 PM, Ludwig Schwardt wrote:
   >
   > Ben is referring to mplh5canvas, available at
   > http://code.google.com/p/mplh5canvas/. The main advantage of this
   > approach is interactive zooming of plots within the browser. If this is
   > not important to you, it will probably be faster to generate static PNGs
   > or SVGs.
   >
   > The HTML5 backend should be easy to try out, as it is a pure Python
   > package with no onerous dependencies.
   >

Michael Droettboom played with this a little at the Sage Days in March,
IIRC, and I seem to think he also whipped up an interactive demo using
svg plots. Michael, do you remember what your conclusions were?

So maybe pyjamas or pyjs might help?

http://pyjs.org/

http://stackoverflow.com/questions/683462/best-way-to-integrate-python-and-javascript gives a few other python->javascript compilers. I don't know if any are currently active, though.

I thought you also had some conclusion about using SVG instead of HTML5 canvas...

Jason

···

On 12/15/11 8:03 PM, Michael Droettboom wrote:

On 12/07/2011 11:36 PM, Jason Grout wrote:

On 12/7/11 10:27 PM, Chris Barker wrote:

On 12/5/11 9:49 PM, Jason Grout wrote:

Has anyone ever worked on a backend that generates javascript code for
one of the javascript plotters out there (like jsxgraph or flot)?
Alternatively, I suppose we could generate an svg or html5 plot and then
accompany it with the javascript code to trace the function, etc.

Someone has worked on a html5 back-end, It was jsut discussed a bit on
the thread "Using the Agg renderer by itself"

Here's a cut and paste:

On 11/27/11 12:33 PM, Ludwig Schwardt wrote:
    >
    > Ben is referring to mplh5canvas, available at
    > http://code.google.com/p/mplh5canvas/. The main advantage of this
    > approach is interactive zooming of plots within the browser. If this is
    > not important to you, it will probably be faster to generate static PNGs
    > or SVGs.
    >
    > The HTML5 backend should be easy to try out, as it is a pure Python
    > package with no onerous dependencies.
    >

Michael Droettboom played with this a little at the Sage Days in March,
IIRC, and I seem to think he also whipped up an interactive demo using
svg plots. Michael, do you remember what your conclusions were?

My conclusion was basically that the current crop of browsers are plenty
fast and its generally feasible. But rewriting all that Python code in
Javascript ain't a small project :wink:

Yes. In the case where you want to create a bunch of graphics objects that may be transformed (i.e. zoomed and panned) later, SVG is much more efficient. Canvas forces JavaScript to run through the entire drawing stack with each update, whereas SVG rendering allows a single object to be manipulated and only the parts of the drawing that change will be updated (and that all happens in the browser's renderer, not JavaScript so is therefore much faster).

Mike

···

On 12/15/2011 11:44 PM, Jason Grout wrote:

On 12/15/11 8:03 PM, Michael Droettboom wrote:

On 12/07/2011 11:36 PM, Jason Grout wrote:

On 12/7/11 10:27 PM, Chris Barker wrote:

On 12/5/11 9:49 PM, Jason Grout wrote:

Has anyone ever worked on a backend that generates javascript code for
one of the javascript plotters out there (like jsxgraph or flot)?
Alternatively, I suppose we could generate an svg or html5 plot and then
accompany it with the javascript code to trace the function, etc.

Someone has worked on a html5 back-end, It was jsut discussed a bit on
the thread "Using the Agg renderer by itself"

Here's a cut and paste:

On 11/27/11 12:33 PM, Ludwig Schwardt wrote:
     >
     > Ben is referring to mplh5canvas, available at
     > http://code.google.com/p/mplh5canvas/. The main advantage of this
     > approach is interactive zooming of plots within the browser. If this is
     > not important to you, it will probably be faster to generate static PNGs
     > or SVGs.
     >
     > The HTML5 backend should be easy to try out, as it is a pure Python
     > package with no onerous dependencies.
     >

Michael Droettboom played with this a little at the Sage Days in March,
IIRC, and I seem to think he also whipped up an interactive demo using
svg plots. Michael, do you remember what your conclusions were?

My conclusion was basically that the current crop of browsers are plenty
fast and its generally feasible. But rewriting all that Python code in
Javascript ain't a small project :wink:

So maybe pyjamas or pyjs might help?

http://pyjs.org/

http://stackoverflow.com/questions/683462/best-way-to-integrate-python-and-javascript
gives a few other python->javascript compilers. I don't know if any are
currently active, though.

I thought you also had some conclusion about using SVG instead of HTML5
canvas...