JSXGraph.cljs

JSXGraph is a JavaScript library that lets you build 2-dimensional scenes full of geometric objects, function curves and interactive UI elements, potentially with many complex constraints defined between these objects.

JSXGraph.cljs extends JSXGraph with a React / Reagent component that makes it easy to define JSXGraph constructions inside of a user interface built with Clojurescript.

Quickstart

Install JSXGraph.cljs into your Clojurescript project using the instructions at its Clojars page:

(https://clojars.org/org.mentat/jsxgraph.cljs)

Require jsxgraph.core in your namespace:

(ns my-app
   (:require [jsxgraph.core :as jsx]))

Create your first jsx/JSXGraph board, populated with two points and an arrow between them:

(cljs
 [jsx/JSXGraph {:boundingbox [-3 3 3 -3] :axis true}
  [jsx/Point {:name "A" :size 1 :parents [-1 1]}]
  [jsx/Point {:id "B" :name "BEE!" :size 1 :parents [2 -1]}]
  [jsx/Arrow {:size 4
              :parents ["A" "B"]}]])

Here's a more complex example of an interactive vector field, implemented here:

See the project's interactive documentation notebook for more guides and examples.

Canvas Dependency

The JSXGraph NPM package depends on the canvas package. canvas comes with many pre-built binaries, but if you're running on a non-supported OS or processor architecture NPM may try to compile this dependency from source.

If you run into trouble, see the canvas docs page on compilation for instructions on how to install the dependencies for this process.

Clerk Support

If you want to use JSXGraph.cljs with Clerk, check out the jsxgraph/clerk template. This deps-new template will generate a Clerk project for you, fully configured to use JSXGraph.cljs in your Clerk notebooks.

Interactive Documentation via Clerk

The project's interactive documentation was generated using Nextjournal's Clerk. If you'd like to edit or play with the documentation, you'll need to install

• node.js
• The clojure command line tool
• Babashka

Once this is done, run this command:

bb clerk-watch

This will open a browser window to http://localhost:7777 with the contents of the documentation notebook. Any edits you make to dev/jsxgraph/notebook.clj will be picked up and displayed in the browser on save.

Thanks and Support

To support this work and my other open source projects, consider sponsoring me via my GitHub Sponsors page. Thank you to my current sponsors!

I'm grateful to Clojurists Together for financial support during this library's creation. Please consider becoming a member to support this work and projects like it.

License

Copyright © 2022-2023 Sam Ritchie.

Distributed under the MIT License. See LICENSE.