Lightning fast data plotting and graphics with JSXGraph
Valentin, Bianca
Wilfahrt, Peter
The JavaScript based library JSXGraph enables a wide range of interactive data visualizations from complex mathematical content like geometry constructions or curve plotting to online charts and maps. Thereto it does not rely on any other library but uses SVG for drawing on most browsers and VML on the Internet Explorer. JSXGraph is easy to embed and has a small footprint: less than 100 KByte if embedded in a web page. Special care has been taken to optimize the performance. JSXGraph is developed at the Lehrstuhl für Mathematik und ihre Didaktik, University of Bayreuth, Germany.
 So we'll start with what is JSX Graph, perhaps not all of you have seen the talk of last year. And go on with JSX Graph, which is running on mobile devices. Show what is JSX Script. It's a recent invention about JSX Graph. And to end, we'll have some further applications, examples, fun stuff. I think you will like it. So let's start with what is JSX Graph. How did we start? The original idea was that there are many dynamic geometry systems out there, like GeoNex, GeoJ Brass, and Rella, Capri, you might know here in France. In USA, it's Geometer Sketchpad, I think. And they are all based on Java. And we just didn't want Java because we think it's dead. And so we wanted to have another dynamic geometry system which runs on every browser with JavaScript. And of course, we can use JavaScript to program geometric construction, not only to read the database which is just given by Capri or GeoJ Brass. So what was the result? We have a library, JSX Graph, which is implemented completely in JavaScript, which runs on all major browsers, even Internet Explorer, and even Internet Explorer with a version smaller than nine. Of course, Firefox, Opera, Chromium. And we don't need any plugins because we use SVG and VML. And what is different to last year? We don't need any additional libraries. So we kicked off Prototype and jQuery and do the things on ourselves because we didn't need very much about getElement by ID, we can do it by ourselves and don't need the dollar. So you can use it, of course. It's LGPL license. So you can use it for your own private commercial purposes for free. So first example, what is JSX Graph? You see Newton's method, you might know it from school, you can drag around this point X0 and see the lines adapting. And that's the major advantage of JSX Graph. You don't have to program all those events about the points and the dependencies that's built in. You just have to create, say, point and line to this point. And if you move around the point, the lines go around with it. So I'll hand over to Peter. One of the main benefits is you don't have to care where you're going. You have to date to run some every PC and every platform, every operating system, and the new touchpad, like that, and Android start or Android, and mobile phones on the iPod touch on Android phones and on every device, even if you have no plugins like Java or Flash, because they suck, and Android devices, we did implement the Canvas renderer because the guys did bug us. We had to because it didn't run last year. So we featured a new Canvas renderer to do it in now VML, SVT, and Canvas. So we can do it now on nearly every platform that has a browser. And one of the main benefits is the name of the talk. We are faster than a Java plugin. We have prepared a little comparison. That's what it normally looks like. We have drawn our image and we're still waiting. But you did see it loading. Normally, it would have shown. I would present now, but you have the initial time of Java and stuff. And you can display it on every device. And like Michael said, on this talk on Monday, plugins are there, so don't use plugins. Just build it in the browser. So, JG-Dragon Mobile Devices is one of our main progress of this year. We have no internet. We have no internet. There would be a YouTube video included presenting on iPod Touch. But if you have it, like the new iPad being around here, you can see it. And one is the same presentation we'll get in touch with later. So, it runs and you can touch it. We implement a multi-touch and stuff and just go ahead. It runs. What we did or what we're doing now is we built an application to get here with the App Store. It's not in there right now. So, we are pending reviews. What we will do is some basic application for doing calculus in school and stuff. Then we will build a new dynamic geometry system. And we will implement a full multi-touch support in about a few months. Multi-touch is enabled right now. So, if you want to try it out, you can do it afterwards. And, yeah, so we have it. The other stuff. So, as a small comparison, SVT with Canvas, the main benefit is you can use it even in the browser. But as you see here, SVT is, or Canvas is a bit faster in the browser. But when you're on mobile device, Canvas is even faster. And perhaps like on Android Voice, you don't have SVT enabled. So, that's a small comparison on the left is used in the Canvas. So, just a script. One of the most beautiful versions that were made by Bianca last year. Okay. So, you might not know just a script. That's because it's invented by us. By her? No, it's by Michael. Could you go? So, what was the idea about jessi script? If you had seen the Newton thing that I presented before, it was all programmed with JavaScript. That might not be very difficult for all of you. But it's impossible for a teacher in Germany. You take a microphone. It's impossible for a teacher in Germany. And for pupils, it's even more impossible. So, we thought about what could we do to ease this construction thing. And the result was jessi script. So, what is jessi script? It's a syntax that is similar to what is taught in schools. And I'm not familiar with the syntax that is taught in French or American schools. But perhaps you might imagine if you have p1,1, that's a point at the coordinates 1,1. And if you have k, that's because it's in German Kreis for circle. You have a circle around p with radius 2. And I think that's even smaller than SVG. And it's easy to learn for students. And another great thing about it, it's secure. You might imagine you have a wiki where you want to present interactive geometric content. Where you can drag points around and show what is meant with some theorems. And you could provide to anyone to use jessi script to construct something and add it to the wiki. Without any security lag because it's parsed by jessi script. And not just to say evil something. So I have a little example. Over there you see the syntax. It's one point, one circle, another point. And a segment, you see it because the brackets are going to the points and not from the points away. And if we send it, you see it on the board. And you can again drag the points around, do what you want with it. And jessi script is more developed than just having a point or a segment. You can do even macros. It's not so long this macro. But what it does is it takes two points and it creates the fitting square. And you could use it here for the Pythagorean theory. And here it shows the square function. It's x squared. And you see if you have here b, the squared value is x. And it's not difficult. You might foster algorithmic thinking for people with it. It's very useful at schools, I think. So now we come to the fun stuff. First thing you might have seen yesterday from Michael Neutze. It's the animated age data from Germany, I think. It's the same thing that Michael presented yesterday. But it's done with JSX Graph. It's redone, I think, I would say. And you see it's fast. And it works on every device. And the next thing you might have seen some more times these days, it's the German election data and it's also rebuilt with JSX Graph. The main interesting thing about it here is that we use arc view shaped data, which you can read with a Python script that runs on server, of course. And you have two options. Either you use the Python script to convert the data once and read it here. Or you can do it by live. You run the Python script on the server and read arc view shaped data files. And what is done there is you can shorten the number of numbers. Because arc view shaped data has 12 or 13 numbers per thing. I don't know. And you can do a Raymond Douglas Poick algorithm. I don't know if you know it. It's just something we talked about this morning to shorten the data of the path. These are not all the points that are within the arc view shaped format. That was text talk, yes. So of course, if you can do math and you can do circles and points, you can do charting. And these animations are also built in with JavaScript with JSX Graph. And they are done with JavaScript, of course. So if you want to have this chart with those plopping pies, you don't have to do it on yourself with all the events you need to create. And of course, you have line charts. And here the interesting thing about that is that the data comes live from server. It's randomly generated. But you might imagine that you want to plot stock data on live and this is possible. It was an Ajax request. And now the real fun part, don't be hypnotized. You can drag the sliders around and there are more or less rectangles. And if you go back to 95, go back to 95. And then draw around the colors, it's a bit disco feeling. And you saw it where very many rectangles and it was really fast. You could drag the points around. So here you see some new animations. We had animations last year, but now we have some new ones. Here you see changing colors. All do with JavaScript. Moving circles. Over there you see the point F which runs along these other points which is done by a......bizier curve, something like that. It's calculated in the background where the point has to go along. And perhaps you can drag on the weight thing. So it's just bumping around. In the background a linear differential equation solved. And you see perhaps here this math formula. We're supporting ASCII MathML and MathJax. Perhaps you might know it. To display such formulas you might imagine for a graph, the integral or something like that. And down there you have a moving chart. It's again a little psychedelic. And if you go over it the opacity of the bars is changing. And this is done by prototype. You might use the built-in animations or you might use prototype for your own ideas. So it's very flexible. And the last thing, you might even do games with JSX Graph. So if it's a bit boring in a talk or at school, at university, at work, you might play Tetris with JSX Graph. So Peter is good at it. Okay. Merci beaucoup pour votre attention. And if you want to contribute, you're welcome. You're very welcome. We have our site, JSXGraph.org. And we have also a wiki which you find from our main page. And we have a Google group. So you can send annotations, bugs. We have no bugs, of course, but perhaps you find one or you have suggestions what we could do. So the main benefits are we are faster than any other library. And we do a more scientific approach while we solve all the issues and the paths with algorithms. And we do encourage you to send examples or proposals. And if you don't, can visualize for yourself, just send them in. And if you have success or anything else. So if there are any questions, are there questions right now? Yeah. I happen to be married with a math teacher. And she's using a lot of GeoGebra. It's a pain for her to use it. Yeah, she uses it but she's integrating stuff in the... Yeah, in web pages. It's not so easy. Do you provide it as a web service, like a page running where you can type in your script and get the results? From GeoGebra? From JS Script. Is there a web page where you can put your... Yeah, you could. In our wiki there's a page where you could try it out. But we use... If your wife doesn't like GeoGebra, she can take your GeoGebra file and read them with JSxgraph. We have a GeoGebra reader, as you have seen. It's a GeoGebra file indeed and we can read it with JSxgraph and display it. At the moment you can't save files but we are implementing it or we are working on it. You can import every other file and display it, work with it, but you can't actually save it. But we are working on it. But you could save the jessi script syntax. You just run it every time, so it's displayed again. I just have two comments about this. One, the games I think is wonderful because when I was a math student I know that all the time we would have these graph and top-levels. We'd always install Tetris or Asteroids and eventually we could program them. So I mean to be able to do that. We have Snake. I didn't show it but we have Snake. Let's have a look at our wiki if you have many more games. It's scientific. I think it's great because it completes the cycle. The other thing is, do you have media wiki integration with this? We have plugins for WordPress, media wiki, Drupal, Moodle and several others. So you all look at that? Yeah. Just have a look on the website where you can integrate it because it was a thing to do to integrate it in e-learning platforms. It is done. So I guess you already answered that you are using only JavaScript for your missions or you are also borrowing the mix-mile somewhere. No. Just JavaScript. It's your JavaScript. It's just SVG static things and you animate them with JavaScript and timeouts. Yeah. Just JavaScript. If anyone does want to do a comparison, feel free. We don't know exactly what is faster, pure SVG animation or JavaScript enabled animation. Feel free to do it. I can file a bug for this but I noticed that if you look for the animated page permit, the slider you use in the bottom, I'm not sure how well it works on mobile devices. It's just a straight-up in the old mobile limiter and you can't grab the handle to drag it around. So maybe you want to look into using an HTML5 web form slider or something like that. So maybe if you go to the browser rather than I'm not sure how it is made. Well, it's sort of a fake slider. Yeah, it's done within JSX Graph. It's a point in the line. But what you can do is just use jQuery sliders or really other sliders and hook them up. So this works too. Okay. Any other questions? For more complex computations inside JavaScript, have you looked at the worker stuff that's going on so that you can put a JavaScript into its own thread to manipulate the cluster? I don't think so. For the election data, we did something with chunks, time chunks, to read the data fast. But I don't know if this... So the work is something like you load a JavaScript file, it runs in its own thread. Okay. That's what it does. It doesn't have any DOM access or stuff like that. But it's encapsulated on its own and it will be perfectly for storing the differential equations and stuff like that. Okay. So could you manipulate the things out there? If you see the stiff here at the animated age data, you want to manipulate the text out of JSX Graph. There are APIs. Okay. You can communicate via messages, but the heavy computations and stuff that could be put out into the threads and then it would run faster. Okay. It would be in nice extend. Let's have a look at it after the talk. But we're doing some server side computation. We implemented R for example and stuff. But let's talk about it later. I'm sorry. This is the beginning. How many browsers do you run in? Every one. You might imagine. Every major one. Even Internet Explorer 6, 7, 8. 6, 7, 8, 9. Great. Okay. We were running already in 9. It was only a little thing to adjust it. Okay. And we have running some Bachelor thesis right now to implement 3D and some physics engine for fast path solving. And the graphs we saw already. Yeah. I had a question as well. At some point you showed both SDG and Canvas outputs. So I'm guessing that, so Canvas is faster obviously, especially on low-part advice. Yeah. I guess you don't have interactivity with Canvas, right? We have. You have it? Yeah. It's drawn every time you do something. If you go over. Can you go over the line again? Yeah. They are highlighting. You see the highlighting? Yeah. They work pretty much the same. VML, SVG and Canvas. Did you find it difficult to generate multiple outputs for VML and Canvas? Don't let someone know that. It works. I think it was okay. Because somewhere the difference are not too big between SVG and VML. But perhaps if you look at shadows and VML, you have just to do something very easy. And SVG, you need those filters. And so you had to do many things. But the basics, the points, the circles, the lines, that's not the problem. Thank you very much. Thank you very much. Thank you.
 So we'll start with what is JSX Graph, perhaps not all of you have seen the talk of last  year.  And go on with JSX Graph, which is running on mobile devices.  Show what is JSX Script.  It's a recent invention about JSX Graph.  And to end, we'll have some further applications, examples, fun stuff.  I think you will like it.  So let's start with what is JSX Graph.  How did we start?  The original idea was that there are many dynamic geometry systems out there, like GeoNex, GeoJ  Brass, and Rella, Capri, you might know here in France.  In USA, it's Geometer Sketchpad, I think.  And they are all based on Java.  And we just didn't want Java because we think it's dead.  And so we wanted to have another dynamic geometry system which runs on every browser with JavaScript.  And of course, we can use JavaScript to program geometric construction, not only to read the  database which is just given by Capri or GeoJ Brass.  So what was the result?  We have a library, JSX Graph, which is implemented completely in JavaScript, which runs on all  major browsers, even Internet Explorer, and even Internet Explorer with a version smaller  than nine.  Of course, Firefox, Opera, Chromium.  And we don't need any plugins because we use SVG and VML.  And what is different to last year?  We don't need any additional libraries.  So we kicked off Prototype and jQuery and do the things on ourselves because we didn't  need very much about getElement by ID, we can do it by ourselves and don't need the dollar.  So you can use it, of course.  It's LGPL license.  So you can use it for your own private commercial purposes for free.  So first example, what is JSX Graph?  You see Newton's method, you might know it from school, you can drag around this point  X0 and see the lines adapting.  And that's the major advantage of JSX Graph.  You don't have to program all those events about the points and the dependencies that's  built in.  You just have to create, say, point and line to this point.  And if you move around the point, the lines go around with it.  So I'll hand over to Peter.  One of the main benefits is you don't have to care where you're going.  You have to date to run some every PC and every platform, every operating system, and  the new touchpad, like that, and Android start or Android, and mobile phones on the iPod touch  on Android phones and on every device, even if you have no plugins like Java or Flash,  because they suck, and Android devices, we did implement the Canvas renderer because  the guys did bug us.  We had to because it didn't run last year.  So we featured a new Canvas renderer to do it in now VML, SVT, and Canvas.  So we can do it now on nearly every platform that has a browser.  And one of the main benefits is the name of the talk.  We are faster than a Java plugin.  We have prepared a little comparison.  That's what it normally looks like.  We have drawn our image and we're still waiting.  But you did see it loading.  Normally, it would have shown.  I would present now, but you have the initial time of Java and stuff.  And you can display it on every device.  And like Michael said, on this talk on Monday, plugins are there, so don't use plugins.  Just build it in the browser.  So, JG-Dragon Mobile Devices is one of our main progress of this year.  We have no internet.  We have no internet.  There would be a YouTube video included presenting on iPod Touch.  But if you have it, like the new iPad being around here, you can see it.  And one is the same presentation we'll get in touch with later.  So, it runs and you can touch it.  We implement a multi-touch and stuff and just go ahead.  It runs.  What we did or what we're doing now is we built an application to get here with the App Store.  It's not in there right now.  So, we are pending reviews.  What we will do is some basic application for doing calculus in school and stuff.  Then we will build a new dynamic geometry system.  And we will implement a full multi-touch support in about a few months.  Multi-touch is enabled right now.  So, if you want to try it out, you can do it afterwards.  And, yeah, so we have it.  The other stuff.  So, as a small comparison, SVT with Canvas, the main benefit is you can use it even in the browser.  But as you see here, SVT is, or Canvas is a bit faster in the browser.  But when you're on mobile device, Canvas is even faster.  And perhaps like on Android Voice, you don't have SVT enabled.  So, that's a small comparison on the left is used in the Canvas.  So, just a script.  One of the most beautiful versions that were made by Bianca last year.  Okay.  So, you might not know just a script.  That's because it's invented by us.  By her?  No, it's by Michael.  Could you go?  So, what was the idea about jessi script?  If you had seen the Newton thing that I presented before, it was all programmed with JavaScript.  That might not be very difficult for all of you.  But it's impossible for a teacher in Germany.  You take a microphone.  It's impossible for a teacher in Germany.  And for pupils, it's even more impossible.  So, we thought about what could we do to ease this construction thing.  And the result was jessi script.  So, what is jessi script?  It's a syntax that is similar to what is taught in schools.  And I'm not familiar with the syntax that is taught in French or American schools.  But perhaps you might imagine if you have p1,1, that's a point at the coordinates 1,1.  And if you have k, that's because it's in German Kreis for circle.  You have a circle around p with radius 2.  And I think that's even smaller than SVG.  And it's easy to learn for students.  And another great thing about it, it's secure.  You might imagine you have a wiki where you want to present interactive geometric content.  Where you can drag points around and show what is meant with some theorems.  And you could provide to anyone to use jessi script to construct something and add it to the wiki.  Without any security lag because it's parsed by jessi script.  And not just to say evil something.  So I have a little example.  Over there you see the syntax.  It's one point, one circle, another point.  And a segment, you see it because the brackets are going to the points and not from the points away.  And if we send it, you see it on the board.  And you can again drag the points around, do what you want with it.  And jessi script is more developed than just having a point or a segment.  You can do even macros.  It's not so long this macro.  But what it does is it takes two points and it creates the fitting square.  And you could use it here for the Pythagorean theory.  And here it shows the square function.  It's x squared.  And you see if you have here b, the squared value is x.  And it's not difficult.  You might foster algorithmic thinking for people with it.  It's very useful at schools, I think.  So now we come to the fun stuff.  First thing you might have seen yesterday from Michael Neutze.  It's the animated age data from Germany, I think.  It's the same thing that Michael presented yesterday.  But it's done with JSX Graph.  It's redone, I think, I would say.  And you see it's fast.  And it works on every device.  And the next thing you might have seen some more times these days,  it's the German election data and it's also rebuilt with JSX Graph.  The main interesting thing about it here is that we use arc view shaped data,  which you can read with a Python script that runs on server, of course.  And you have two options.  Either you use the Python script to convert the data once and read it here.  Or you can do it by live.  You run the Python script on the server and read arc view shaped data files.  And what is done there is you can shorten the number of numbers.  Because arc view shaped data has 12 or 13 numbers per thing.  I don't know.  And you can do a Raymond Douglas Poick algorithm.  I don't know if you know it.  It's just something we talked about this morning to shorten the data of the path.  These are not all the points that are within the arc view shaped format.  That was text talk, yes.  So of course, if you can do math and you can do circles and points, you can do charting.  And these animations are also built in with JavaScript with JSX Graph.  And they are done with JavaScript, of course.  So if you want to have this chart with those plopping pies,  you don't have to do it on yourself with all the events you need to create.  And of course, you have line charts.  And here the interesting thing about that is that the data comes live from server.  It's randomly generated.  But you might imagine that you want to plot stock data on live and this is possible.  It was an Ajax request.  And now the real fun part, don't be hypnotized.  You can drag the sliders around and there are more or less rectangles.  And if you go back to 95, go back to 95.  And then draw around the colors, it's a bit disco feeling.  And you saw it where very many rectangles and it was really fast.  You could drag the points around.  So here you see some new animations.  We had animations last year, but now we have some new ones.  Here you see changing colors.  All do with JavaScript.  Moving circles.  Over there you see the point F which runs along these other points which is done by a... ...bizier curve, something like that.  It's calculated in the background where the point has to go along.  And perhaps you can drag on the weight thing.  So it's just bumping around.  In the background a linear differential equation solved.  And you see perhaps here this math formula.  We're supporting ASCII MathML and MathJax.  Perhaps you might know it.  To display such formulas you might imagine for a graph, the integral or something like that.  And down there you have a moving chart.  It's again a little psychedelic.  And if you go over it the opacity of the bars is changing.  And this is done by prototype.  You might use the built-in animations or you might use prototype for your own ideas.  So it's very flexible.  And the last thing, you might even do games with JSX Graph.  So if it's a bit boring in a talk or at school, at university, at work,  you might play Tetris with JSX Graph.  So Peter is good at it.  Okay.  Merci beaucoup pour votre attention.  And if you want to contribute, you're welcome.  You're very welcome.  We have our site, JSXGraph.org.  And we have also a wiki which you find from our main page.  And we have a Google group.  So you can send annotations, bugs.  We have no bugs, of course, but perhaps you find one or you have suggestions what we could do.  So the main benefits are we are faster than any other library.  And we do a more scientific approach while we solve all the issues and the paths with algorithms.  And we do encourage you to send examples or proposals.  And if you don't, can visualize for yourself, just send them in.  And if you have success or anything else.  So if there are any questions, are there questions right now?  Yeah.  I happen to be married with a math teacher.  And she's using a lot of GeoGebra.  It's a pain for her to use it.  Yeah, she uses it but she's integrating stuff in the...  Yeah, in web pages.  It's not so easy.  Do you provide it as a web service, like a page running where you can type in your script and get the results?  From GeoGebra?  From JS Script.  Is there a web page where you can put your...  Yeah, you could.  In our wiki there's a page where you could try it out.  But we use...  If your wife doesn't like GeoGebra, she can take your GeoGebra file and read them with JSxgraph.  We have a GeoGebra reader, as you have seen.  It's a GeoGebra file indeed and we can read it with JSxgraph and display it.  At the moment you can't save files but we are implementing it or we are working on it.  You can import every other file and display it, work with it, but you can't actually save it.  But we are working on it.  But you could save the jessi script syntax.  You just run it every time, so it's displayed again.  I just have two comments about this.  One, the games I think is wonderful because when I was a math student I know that all the time we would have these graph and top-levels.  We'd always install Tetris or Asteroids and eventually we could program them.  So I mean to be able to do that.  We have Snake.  I didn't show it but we have Snake.  Let's have a look at our wiki if you have many more games.  It's scientific.  I think it's great because it completes the cycle.  The other thing is, do you have media wiki integration with this?  We have plugins for WordPress, media wiki, Drupal, Moodle and several others.  So you all look at that?  Yeah.  Just have a look on the website where you can integrate it because it was a thing to do to integrate it in e-learning platforms.  It is done.  So I guess you already answered that you are using only JavaScript for your missions or you are also borrowing the mix-mile somewhere.  No.  Just JavaScript.  It's your JavaScript.  It's just SVG static things and you animate them with JavaScript and timeouts.  Yeah.  Just JavaScript.  If anyone does want to do a comparison, feel free.  We don't know exactly what is faster, pure SVG animation or JavaScript enabled animation.  Feel free to do it.  I can file a bug for this but I noticed that if you look for the animated page permit, the slider you use in the bottom,  I'm not sure how well it works on mobile devices.  It's just a straight-up in the old mobile limiter and you can't grab the handle to drag it around.  So maybe you want to look into using an HTML5 web form slider or something like that.  So maybe if you go to the browser rather than I'm not sure how it is made.  Well, it's sort of a fake slider.  Yeah, it's done within JSX Graph.  It's a point in the line.  But what you can do is just use jQuery sliders or really other sliders and hook them up.  So this works too.  Okay.  Any other questions?  For more complex computations inside JavaScript, have you looked at the worker stuff that's going on  so that you can put a JavaScript into its own thread to manipulate the cluster?  I don't think so.  For the election data, we did something with chunks, time chunks, to read the data fast.  But I don't know if this...  So the work is something like you load a JavaScript file, it runs in its own thread.  Okay.  That's what it does. It doesn't have any DOM access or stuff like that.  But it's encapsulated on its own and it will be perfectly for storing the differential equations and stuff like that.  Okay.  So could you manipulate the things out there? If you see the stiff here at the animated age data, you want to manipulate the text out of JSX Graph.  There are APIs.  Okay.  You can communicate via messages, but the heavy computations and stuff that could be put out into the threads and then it would run faster.  Okay.  It would be in nice extend.  Let's have a look at it after the talk.  But we're doing some server side computation.  We implemented R for example and stuff.  But let's talk about it later.  I'm sorry.  This is the beginning.  How many browsers do you run in?  Every one.  You might imagine.  Every major one.  Even Internet Explorer 6, 7, 8.  6, 7, 8, 9.  Great.  Okay.  We were running already in 9.  It was only a little thing to adjust it.  Okay.  And we have running some Bachelor thesis right now to implement 3D and some physics engine for fast path solving.  And the graphs we saw already.  Yeah.  I had a question as well.  At some point you showed both SDG and Canvas outputs.  So I'm guessing that, so Canvas is faster obviously, especially on low-part advice.  Yeah.  I guess you don't have interactivity with Canvas, right?  We have.  You have it?  Yeah.  It's drawn every time you do something.  If you go over.  Can you go over the line again?  Yeah.  They are highlighting.  You see the highlighting?  Yeah.  They work pretty much the same.  VML, SVG and Canvas.  Did you find it difficult to generate multiple outputs for VML and Canvas?  Don't let someone know that.  It works.  I think it was okay.  Because somewhere the difference are not too big between SVG and VML.  But perhaps if you look at shadows and VML, you have just to do something very easy.  And SVG, you need those filters.  And so you had to do many things.  But the basics, the points, the circles, the lines, that's not the problem.  Thank you very much.  Thank you very much.  Thank you.
Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_0_59.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_60_2279.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_2280_4655.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_4656_7127.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_7128_7211.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_7212_8111.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_8112_9923.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_9924_13439.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_13440_14147.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_14148_16367.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_16368_18527.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_18528_18599.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_18600_20771.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_20772_23579.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_23580_24179.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_24180_24395.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_24396_25319.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_25320_28319.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_28320_30647.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_30648_30719.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_30720_30803.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_30804_31151.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_31152_36635.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_36636_36683.png Lightning_fast_data_plotting_and_graphics_with_JSXGraph_2_36684_36732.png
So we'll start with what is JSX Graph, perhaps not all of you have seen the talk of last year. And go on with JSX Graph, which is running on mobile devices. Show what is JSX Script. It's a recent invention about JSX Graph. And to end, we'll have some further applications, examples, fun stuff. I think you will like it. So let's start with what is JSX Graph. How did we start? The original idea was that there are many dynamic geometry systems out there, like GeoNex, GeoJ Brass, and Rella, Capri, you might know here in France. In USA, it's Geometer Sketchpad, I think. And they are all based on Java. And we just didn't want Java because we think it's dead. And so we wanted to have another dynamic geometry system which runs on every browser with JavaScript. And of course, we can use JavaScript to program geometric construction, not only to read the database which is just given by Capri or GeoJ Brass. So what was the result? We have a library, JSX Graph, which is implemented completely in JavaScript, which runs on all major browsers, even Internet Explorer, and even Internet Explorer with a version smaller than nine. Of course, Firefox, Opera, Chromium. And we don't need any plugins because we use SVG and VML. And what is different to last year? We don't need any additional libraries. So we kicked off Prototype and jQuery and do the things on ourselves because we didn't need very much about getElement by ID, we can do it by ourselves and don't need the dollar. So you can use it, of course. It's LGPL license. So you can use it for your own private commercial purposes for free. So first example, what is JSX Graph? You see Newton's method, you might know it from school, you can drag around this point X0 and see the lines adapting. And that's the major advantage of JSX Graph. You don't have to program all those events about the points and the dependencies that's built in. You just have to create, say, point and line to this point. And if you move around the point, the lines go around with it. So I'll hand over to Peter. One of the main benefits is you don't have to care where you're going. You have to date to run some every PC and every platform, every operating system, and the new touchpad, like that, and Android start or Android, and mobile phones on the iPod touch on Android phones and on every device, even if you have no plugins like Java or Flash, because they suck, and Android devices, we did implement the Canvas renderer because the guys did bug us. We had to because it didn't run last year. So we featured a new Canvas renderer to do it in now VML, SVT, and Canvas. So we can do it now on nearly every platform that has a browser. And one of the main benefits is the name of the talk. We are faster than a Java plugin. We have prepared a little comparison. That's what it normally looks like. We have drawn our image and we're still waiting. But you did see it loading. Normally, it would have shown. I would present now, but you have the initial time of Java and stuff. And you can display it on every device. And like Michael said, on this talk on Monday, plugins are there, so don't use plugins. Just build it in the browser. So, JG-Dragon Mobile Devices is one of our main progress of this year. We have no internet. We have no internet. There would be a YouTube video included presenting on iPod Touch. But if you have it, like the new iPad being around here, you can see it. And one is the same presentation we'll get in touch with later. So, it runs and you can touch it. We implement a multi-touch and stuff and just go ahead. It runs. What we did or what we're doing now is we built an application to get here with the App Store. It's not in there right now. So, we are pending reviews. What we will do is some basic application for doing calculus in school and stuff. Then we will build a new dynamic geometry system. And we will implement a full multi-touch support in about a few months. Multi-touch is enabled right now. So, if you want to try it out, you can do it afterwards. And, yeah, so we have it. The other stuff. So, as a small comparison, SVT with Canvas, the main benefit is you can use it even in the browser. But as you see here, SVT is, or Canvas is a bit faster in the browser. But when you're on mobile device, Canvas is even faster. And perhaps like on Android Voice, you don't have SVT enabled. So, that's a small comparison on the left is used in the Canvas. So, just a script. One of the most beautiful versions that were made by Bianca last year. Okay. So, you might not know just a script. That's because it's invented by us. By her? No, it's by Michael. Could you go? So, what was the idea about jessi script? If you had seen the Newton thing that I presented before, it was all programmed with JavaScript. That might not be very difficult for all of you. But it's impossible for a teacher in Germany. You take a microphone. It's impossible for a teacher in Germany. And for pupils, it's even more impossible. So, we thought about what could we do to ease this construction thing. And the result was jessi script. So, what is jessi script? It's a syntax that is similar to what is taught in schools. And I'm not familiar with the syntax that is taught in French or American schools. But perhaps you might imagine if you have p1,1, that's a point at the coordinates 1,1. And if you have k, that's because it's in German Kreis for circle. You have a circle around p with radius 2. And I think that's even smaller than SVG. And it's easy to learn for students. And another great thing about it, it's secure. You might imagine you have a wiki where you want to present interactive geometric content. Where you can drag points around and show what is meant with some theorems. And you could provide to anyone to use jessi script to construct something and add it to the wiki. Without any security lag because it's parsed by jessi script. And not just to say evil something. So I have a little example. Over there you see the syntax. It's one point, one circle, another point. And a segment, you see it because the brackets are going to the points and not from the points away. And if we send it, you see it on the board. And you can again drag the points around, do what you want with it. And jessi script is more developed than just having a point or a segment. You can do even macros. It's not so long this macro. But what it does is it takes two points and it creates the fitting square. And you could use it here for the Pythagorean theory. And here it shows the square function. It's x squared. And you see if you have here b, the squared value is x. And it's not difficult. You might foster algorithmic thinking for people with it. It's very useful at schools, I think. So now we come to the fun stuff. First thing you might have seen yesterday from Michael Neutze. It's the animated age data from Germany, I think. It's the same thing that Michael presented yesterday. But it's done with JSX Graph. It's redone, I think, I would say. And you see it's fast. And it works on every device. And the next thing you might have seen some more times these days, it's the German election data and it's also rebuilt with JSX Graph. The main interesting thing about it here is that we use arc view shaped data, which you can read with a Python script that runs on server, of course. And you have two options. Either you use the Python script to convert the data once and read it here. Or you can do it by live. You run the Python script on the server and read arc view shaped data files. And what is done there is you can shorten the number of numbers. Because arc view shaped data has 12 or 13 numbers per thing. I don't know. And you can do a Raymond Douglas Poick algorithm. I don't know if you know it. It's just something we talked about this morning to shorten the data of the path. These are not all the points that are within the arc view shaped format. That was text talk, yes. So of course, if you can do math and you can do circles and points, you can do charting. And these animations are also built in with JavaScript with JSX Graph. And they are done with JavaScript, of course. So if you want to have this chart with those plopping pies, you don't have to do it on yourself with all the events you need to create. And of course, you have line charts. And here the interesting thing about that is that the data comes live from server. It's randomly generated. But you might imagine that you want to plot stock data on live and this is possible. It was an Ajax request. And now the real fun part, don't be hypnotized. You can drag the sliders around and there are more or less rectangles. And if you go back to 95, go back to 95. And then draw around the colors, it's a bit disco feeling. And you saw it where very many rectangles and it was really fast. You could drag the points around. So here you see some new animations. We had animations last year, but now we have some new ones. Here you see changing colors. All do with JavaScript. Moving circles. Over there you see the point F which runs along these other points which is done by a......bizier curve, something like that. It's calculated in the background where the point has to go along. And perhaps you can drag on the weight thing. So it's just bumping around. In the background a linear differential equation solved. And you see perhaps here this math formula. We're supporting ASCII MathML and MathJax. Perhaps you might know it. To display such formulas you might imagine for a graph, the integral or something like that. And down there you have a moving chart. It's again a little psychedelic. And if you go over it the opacity of the bars is changing. And this is done by prototype. You might use the built-in animations or you might use prototype for your own ideas. So it's very flexible. And the last thing, you might even do games with JSX Graph. So if it's a bit boring in a talk or at school, at university, at work, you might play Tetris with JSX Graph. So Peter is good at it. Okay. Merci beaucoup pour votre attention. And if you want to contribute, you're welcome. You're very welcome. We have our site, JSXGraph.org. And we have also a wiki which you find from our main page. And we have a Google group. So you can send annotations, bugs. We have no bugs, of course, but perhaps you find one or you have suggestions what we could do. So the main benefits are we are faster than any other library. And we do a more scientific approach while we solve all the issues and the paths with algorithms. And we do encourage you to send examples or proposals. And if you don't, can visualize for yourself, just send them in. And if you have success or anything else. So if there are any questions, are there questions right now? Yeah. I happen to be married with a math teacher. And she's using a lot of GeoGebra. It's a pain for her to use it. Yeah, she uses it but she's integrating stuff in the... Yeah, in web pages. It's not so easy. Do you provide it as a web service, like a page running where you can type in your script and get the results? From GeoGebra? From JS Script. Is there a web page where you can put your... Yeah, you could. In our wiki there's a page where you could try it out. But we use... If your wife doesn't like GeoGebra, she can take your GeoGebra file and read them with JSxgraph. We have a GeoGebra reader, as you have seen. It's a GeoGebra file indeed and we can read it with JSxgraph and display it. At the moment you can't save files but we are implementing it or we are working on it. You can import every other file and display it, work with it, but you can't actually save it. But we are working on it. But you could save the jessi script syntax. You just run it every time, so it's displayed again. I just have two comments about this. One, the games I think is wonderful because when I was a math student I know that all the time we would have these graph and top-levels. We'd always install Tetris or Asteroids and eventually we could program them. So I mean to be able to do that. We have Snake. I didn't show it but we have Snake. Let's have a look at our wiki if you have many more games. It's scientific. I think it's great because it completes the cycle. The other thing is, do you have media wiki integration with this? We have plugins for WordPress, media wiki, Drupal, Moodle and several others. So you all look at that? Yeah. Just have a look on the website where you can integrate it because it was a thing to do to integrate it in e-learning platforms. It is done. So I guess you already answered that you are using only JavaScript for your missions or you are also borrowing the mix-mile somewhere. No. Just JavaScript. It's your JavaScript. It's just SVG static things and you animate them with JavaScript and timeouts. Yeah. Just JavaScript. If anyone does want to do a comparison, feel free. We don't know exactly what is faster, pure SVG animation or JavaScript enabled animation. Feel free to do it. I can file a bug for this but I noticed that if you look for the animated page permit, the slider you use in the bottom, I'm not sure how well it works on mobile devices. It's just a straight-up in the old mobile limiter and you can't grab the handle to drag it around. So maybe you want to look into using an HTML5 web form slider or something like that. So maybe if you go to the browser rather than I'm not sure how it is made. Well, it's sort of a fake slider. Yeah, it's done within JSX Graph. It's a point in the line. But what you can do is just use jQuery sliders or really other sliders and hook them up. So this works too. Okay. Any other questions? For more complex computations inside JavaScript, have you looked at the worker stuff that's going on so that you can put a JavaScript into its own thread to manipulate the cluster? I don't think so. For the election data, we did something with chunks, time chunks, to read the data fast. But I don't know if this... So the work is something like you load a JavaScript file, it runs in its own thread. Okay. That's what it does. It doesn't have any DOM access or stuff like that. But it's encapsulated on its own and it will be perfectly for storing the differential equations and stuff like that. Okay. So could you manipulate the things out there? If you see the stiff here at the animated age data, you want to manipulate the text out of JSX Graph. There are APIs. Okay. You can communicate via messages, but the heavy computations and stuff that could be put out into the threads and then it would run faster. Okay. It would be in nice extend. Let's have a look at it after the talk. But we're doing some server side computation. We implemented R for example and stuff. But let's talk about it later. I'm sorry. This is the beginning. How many browsers do you run in? Every one. You might imagine. Every major one. Even Internet Explorer 6, 7, 8. 6, 7, 8, 9. Great. Okay. We were running already in 9. It was only a little thing to adjust it. Okay. And we have running some Bachelor thesis right now to implement 3D and some physics engine for fast path solving. And the graphs we saw already. Yeah. I had a question as well. At some point you showed both SDG and Canvas outputs. So I'm guessing that, so Canvas is faster obviously, especially on low-part advice. Yeah. I guess you don't have interactivity with Canvas, right? We have. You have it? Yeah. It's drawn every time you do something. If you go over. Can you go over the line again? Yeah. They are highlighting. You see the highlighting? Yeah. They work pretty much the same. VML, SVG and Canvas. Did you find it difficult to generate multiple outputs for VML and Canvas? Don't let someone know that. It works. I think it was okay. Because somewhere the difference are not too big between SVG and VML. But perhaps if you look at shadows and VML, you have just to do something very easy. And SVG, you need those filters. And so you had to do many things. But the basics, the points, the circles, the lines, that's not the problem. Thank you very much. Thank you very much. Thank you.
geometry systems out there, like GeoNex, GeoJ browsers, even Internet Explorer, and even it. The other stuff. So, as a small comparison, comparison on the left is used in the Canvas. So, SVG. And it's easy to learn for students. And present interactive geometric content. Where you Neutze. It's the animated age data from Germany, to shorten the data of the path. These are not there are more or less rectangles. And if you go main benefits are we are faster than any other GeoGebra? From JS Script. Is there a web page more complex computations inside JavaScript, have But perhaps if you look at shadows and VML, you