Backend, Data Platforms and Visualization, Machine Learning and AI, Technology
Paper.JS versus JSXGraph for Graph Plotting: Our detailed comparison and verdict
At Ideas2IT, we love getting our hands dirty to explore tech stacks and what we could do with them. Think of it as internal PoCs that we do all the time for fun! Very recently, we caught ourselves wondering if Paper.JS could be used for plotting graphs. Here’s what we found out.
What is Paper.JS?
Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. Rather than being a simple wrapper around the Canvas, it offers much more:
- A Scene Graph / Document Object Model for vector graphics: Works with nested layers, groups, paths, compound paths, rasters, symbols, etc.
- The handling and drawing of these graphic items is automatic and optimized, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.
- A well-designed and battle-hardened Application Programming Interface (API).
- There is a good reason for the word Vector in Vector Graphics. Paper.js treats Vector Mathematics as a first-class citizen by making working with vectors and geometries as simple as possible through its core types such as Point, Size, and Rectangle. The manipulation of Point and Size objects is further simplified in PaperScript, where direct math operations using normal operator syntax are possible on such objects as if they were plain numbers.
- Construct paths and manipulate their curves and segments in very convenient and fine-grained ways.
- Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with different stroke ends and miter limits.
- Smoothen curves, and simplify path segments by fitting curves through points.
- Simulate dashed strokes that are currently lacking from the Canvas object, at near-native drawing speed.
- To start working with Paper.js, check this >> http://paperjs.org/tutorials/getting-started/working-with-paper-js/
What is JSXGraph?
JSXGraph vs Paper.js
UI-UX Form Factor
JSXGraph is a simulation of graph paper with interaction.
This contains all mathematics methods to plot a graph with accurate values. Eg: Parallel, Perpendicular, Axis, Curve, and Ellipse.
Paper.js is a simulation of the Adobe Illustrator app with interaction. It does not have methods for complex mathematic operations.
- JSXGraph is a good tool for complex graph plotting.
- It contains all mathematics methods to plot a graph with accurate values. Eg: Parallel, Perpendicular, Axis, Curve, and Ellipse.
- It does not have complex animation functionality, or blend modes features.
- Paper.js on the other hand is ideal for 2D Illustrations with interactions.
- It does not have methods for complex mathematic operations.
- Like the Adobe Illustrator, Paper.js contains many features for vectors like blend mode, curves, etc
Our Verdict on their Graph Plotting Capabilities
Usually, graph plotting requires a tech stack to support complex mathematic operations.
In Paper.js, the coordinate system keeps changing dynamically. Making it difficult to plot graphs accurately. Paper.js does not have built-in methods for many operations.
Whereas JSXGraph seems to be the tool built for the purpose.
Love our technical blogs?
Here are a few more for you to much on.