Giter VIP home page Giter VIP logo

jsxgraph / jsxgraph Goto Github PK

View Code? Open in Web Editor NEW
1.0K 53.0 177.0 112.97 MB

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

Home Page: http://jsxgraph.org

License: Other

Python 0.68% JavaScript 98.40% CSS 0.33% PHP 0.48% Makefile 0.12% Shell 0.01%
geometry mathematics jsxgraph javascript data-visualization charting

jsxgraph's Introduction

JSXGraph

JavaScript library for interactive math visualizations in the web browser.

About

JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library, and uses SVG, canvas, or even the venerable VML. JSXGraph is easy to embed and has a small footprint: approx. 160 KByte if embedded in a web page. No plug-ins are required! Special care has been taken to optimize the performance.

JSXGraph supports multi-touch events and runs on all major browsers, even on very old IEs.

JSXGraph is developed at the Lehrstuhl für Mathematik und ihre Didaktik University of Bayreuth, Germany

Website

<script type="text/javascript" charset="UTF-8"
 src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet"
 type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" />

or

<script type="text/javascript" charset="UTF-8"
 src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraphcore.js"></script>
<link rel="stylesheet"
 type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.6/jsxgraph.css" />

Please report bugs to our issue tracking system found at https://github.com/jsxgraph/jsxgraph/issues

Usage

Include

  • jsxgraphcore.js and
  • jsxgraph.css and,
  • if required, one or more file readers

from a CDN or a local version in your HTML file.

HTML template:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>JSXGraph template</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" charset="UTF-8"></script>

    <!-- The next line is optional: MathJax -->
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
  </head>
  <body>

  <div id="jxgbox" class="jxgbox" style="max-width:800px; aspect-ratio: 1/1;"></div>

  <script>
    var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-8, 8, 8, -8]});
    var p = board.create('point', [1, 3], {name: 'point'});
  </script>

  </body>
</html>

For developing content, it is recommended to include jsxgraphsrc.js (jsxgraphcore.js is the minified version of jsxgraphsrc.js). For further usage instructions please consult our wiki especially our tutorials or the API reference docs.

Build and develop JSXGraph

  1. Clone this repository or download the zip file.
  2. To build and develop JSXGraph you need node.js v0.6+. First, install all dependencies required to build JSXGraph using npm in the JSXGraph root directory: $ npm install. This will create a new subdirectory node_modules in the JSXGraph root directory which holds all tools and libraries required to build jsxgraphcore.js.
  3. To build JSXGraph run $ npm run buildCore. This will output an non-minified version jsxgraphsrc.js and the minified version jsxgraphcore.js into the folder distrib.
  4. Develop JSXGraph:
  • Edit the source files in the folder src
  • Write unit tests in folder test
  • Run $ npm run eslint and $ npm run test to check for errors
  • Run $ npm run check-format to check the formatting of the source code
  • Submit a pull request

License

JSXGraph is free software dual licensed under the GNU LGPL or MIT License.

You can redistribute it and/or modify it under the terms of the

  • GNU Lesser General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version

or

JSXGraph is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License and the MIT License along with JSXGraph. If not, see https://www.gnu.org/licenses/ and https://opensource.org/licenses/MIT/.

ITEMS Cofunded by the Erasmus+ programme of the European union

jsxgraph's People

Contributors

alfredwassermann avatar andreas-web avatar benbro avatar christianp avatar dependabot[bot] avatar dxist avatar elleo avatar geometryzen avatar haaner avatar martin-f avatar matthiasehmann avatar mattstrahan avatar migerh avatar nikolas avatar ninmesara avatar niphram avatar pablopla avatar paolini avatar r-a-v-a-s avatar rhcad avatar saikedo avatar schattenkobold avatar sebablanco avatar snowballbird avatar soegaard avatar sritchie avatar stephanvandenberkmortel avatar sytabaresa avatar tom-berend avatar yongla avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jsxgraph's Issues

possible error in documentation

A line can be determined by three numbers

{Number|function} a {Number|function} b {Number|function} c

where a point (x, y, z) with ax+by+cz = 0 lies on that line. But the point (-10, 3, 1) defined in jsxgraph by

board.create('point', [1, -10, 3])

doesn't lie on a plane defined by

board.create('line', [1, 2, 4])

but -10*1+3*2+4*1=0.

Mouse position wrong when using google translate

If JSXGraph is used together with goole translate the mouse position is slightly off.
Example (replace gaId):

<div id="google_translate_element" class="sup7"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    pageLanguage: 'ru',
    gaTrack: true,
    gaId: 'UA-?????'
  }, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

A similar issue seems to be known:
https://groups.google.com/forum/?hl=de&fromgroups=#!searchin/google-translate-general/clientX/google-translate-general/H2zj0TNjjpY/jw6irtPlCw8J

sync file load

allow the user to load a construction from file synchronously and/or allow the user to specify a callback function

(this is a ticket from a backup of our old tracker at sourceforge trac)

ticks with height 0

When a ticks are set onto a line parallel to the y axis the last do-while loop in the updateTickCoordinates method gets stuck in an endless loop, because _tickEndings() always returns an array containing two elements.

Glider on polygon

Gliders on polygons are broken. They are jumpy and can't be set on every spot on the polygon.

IE9 in IE7-mode: document.body is not yet defined when scrollLeft is called

For IE9 running in IE7 mode (in an embedded WebBrowser component in a WPF-application) The document.body doesn't seem to be necessarily initialized when the following function is called, resulting in an error saying that : "unable to get value of the property 'scrollLeft' object is null or undefined".

function MouseMove() {
    document.body.scrollLeft;
    document.body.scrollTop;
}

(The little bit of magic in jsxgraph.js, lines 95-98 :) )

This can be avoided just by adding a simple "if(document.body){ ... }" check.

This rather exotic case (IE9 in IE7 mode within a WPF WebBrowser-control, !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN") is currently the only tested one.

angle visual styles

new style options for angles:

general: 'sector', 'none', 'square'
right angle: 'sector', 'none', 'sectordor', 'square'

Faces for ticks

Implement some faces for ticks like <, >, [], ^, v, <>, +, x, and (if possible) o.

Padding on document body makes mouse coords calculation incorrect

Example: http://jsfiddle.net/PNLxv/

If the document body has padding-left and/or padding-top, this gets added to the offset in JXG.Board.getCoordsTopLeftCorner, so the positions of mouse events are incorrect.

I can't see why the function getProp in getCoordsTopLeftCorner uses a variable pCont in the closure to refer to the element to get style from, instead of taking it as an argument. Changing that should fix it, but I can't build JSXGraph on windows, so I can't do it myself.

JSXGraph rotate glider do not work with Easeljs

I have been trying to figure out but all in vain as to why doesn't the features of JSXGraph such as glider and other transformation features do not work with Easeljs. I guess the redrawing of canvas or something is stopping it.

A simple code such as

var p1 = board.create('point',[a/2,-b/2], {name:'A', size:1});
var t = board.create('transform', [Math.PI/3,'A'], {type:'rotate'});
var p2 = board.create('point',[-a/2,-b/2], {name:'B', size:1});

also doesn't transform the two points and draws as if there was no transform statement.

Doesn't work in IFrame

Hi,

I have drawn a circle example in IFrame. Its drawn. but enlarging of circle with point on circumference doesn't work.

please reply asap.

thanks

return values of event handlers

We don't need preventDefault() and return false in every case, sometimes it would be better to return true and to not prevent default browser actions, e.g. on touch devices when the user wants to scroll the page and touches the board but no objects or if there's a button on the board the user can click.

As sometimes this behaviour might not be desired, it should be configurable via board options.

Selector methods in board

With selector methods one could select a bunch of elements and batch-process them, e.g. attach event handlers, update attributes, etc.

Refactor function expressions

We have a lot of functions expressions that are used as methods of elements and are defined on the fly in creator functions. With the AMD pattern we can define these methods as local variables of each module and simply reuse the definitions.

We'd have to refactor these functions and replace every access to parameters of the creator functions (primarily the parameters parents and attributes) with properties of the elements.

Intersections between curves and other objects

In the GUI we want to place points on all possible kinds of intersections. This works pretty good for lines and circles but intersections with curves are missing.

So we need a function wich computes all (> 2) intersections of a given curve with another object [ like a curve, line or circle ]. These intersections should be CAS points and ideally being returned in an array.

(this is a ticket from a backup of our old tracker at sourceforge trac) - original reporter: @haaner

Use AMD library (such as RequireJS) to build and manage dependencies

Structuring the code using the AMD (Asynchronous Module Definition) pattern, and using RequireJS, would introduce the following advantages:

  • File dependencies will become very declarative, each file will specify its dependencies, which would make it easier to maintain
  • Provides a standardised approach to loading scripts, which would allow third parties to easily integrate it into their own source code
  • By using RequireJS, the build process can be simplified by using its built tool that will combine files taking dependencies into account, and apply optimisations using UglifyJS or Google's Closure compiler.
  • The build process can be configured to generate a single file and instead of using full RequireJS library, use AlmondJS, which is a "shim" loader.

I am currently considering Forking the project and doing it myself, but to set it properly, it would help to have the tree of dependencies between all files.

Two-dimensional Gliders

It would be nice to place a glider not only on a one-dimensional object, but also on a object of 2 dimensions (OBJECT_CLASS_AREA), so it can be placed in triangles, polygons or circles ...

(this is a ticket from a backup of our old tracker at sourceforge trac) - original reporter: @haaner

Improve epub3/jc handling

For sigil: Delete all contents of the container div before parsing the code.

For epub: Add a reload button to the navigation bar.

New GeometryElement events 'click/tap'

Provide a new event type 'click' and/or 'tap' which is fired when the user clicks/taps on the an element. Possible approach:

Use the existing event handlers and use timing and finger/mouse position information to determine a click situation.

Another, at first glance easier approach would be to register the click event handler on the board container and use existing JSXGraph methods to determine the elements below the mouse and fire a click handler. But this will only work for mouse events because browsers do not offer a tap or 'touchclick' event, only touchstart and touchend.

Sector, unlike Circle, does not suppress visibility of implicit points

See http://jsfiddle.net/Cleonis/LUnVA/

When a Circle is created, supplying the coordinates with anonymous functions, JSXGraph must create the points in order to create the Circle. Only the circle is shown, of course.

As per my enhancement request (#24) the element 'Sector' now accepts anonymous functions. But the created points are shown.

Enhancement request: make 'Sector' behave like 'Circle': do not show the created points.

Zoom in other versions

I copied the library from Github. When I opened examples\vector.html I can zoom chart with the middle mouse button. This example uses the version 0.92/jsxgraphcore.js
In all other exaples, I can not zoom the charts. And if I change jsxgraphcore.js in vector.html on version 0.97 zoom stops working. How fix it?

Refactor visibility of elements

Attributes should not be overruled silently. Right now this affects the 'visible' attribute. An element should be visible only if the user says so (attribute 'visible') and there is a representation in the real plane.

JXG.Util.utf8Decode does not handle characters outside of Unicode BMP

If I try to decode characters outside the Basic Multilingual Plane, the decoding function fails.

For example:
JXG.Util.utf8Decode('\xf0\x9f\x99\x8a')

This should be one unicode character, but it decodes to two.

There could be many ways to fix this, but what we have done, is to work around this with this very interesting solution:
http://ecmanaut.blogspot.ca/2006/07/encoding-decoding-utf8-in-javascript.html

so: decodeURIComponent(escape('\xf0\x9f\x99\x8a'))

It is a hack with a deprecated function, but it works for unicode characters in the astral plane and also as the functions are implemented on native code, it is very fast.

keepaspect ratio broken?

check setBoundingBox if keepaspectratio takes care of the viewport being centered or not

(this is a ticket from a backup of our old tracker at sourceforge trac)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.